« Google Page Creator の利点 Lo mismo! »
Control.Modal + Google Maps
ずいぶん前、Google Maps と Lightbox を組み合わせるものをやった。フキダシ中のサムネイルをクリックすれば大きな写真が出るもの。
この反対の概念を何度か試みては出来なかった。地図は、ある程度の大きさがどうしても必要になる。少しでも大きいほうが見やすく使いやすいに決まっている。が、WEBレイアウトを考えるうえで、可視領域を有効に使ってマップを示すのは結構むずかしい。
そこで、掲題のスクリプト control.modal.js を使ってみる＝ Google Maps を表示するサンプル
しかし、これはインラインフレーム。iframe はスマートな方法と思えないので、下のDIVを表示する方法でチョクに地図を書けないかと思ったけれど・・・
Lightbox は基本的に画像表示のためのものだし、javascript の上でまた別の javascript を装備するのは厄介が多い。
そこで、ここに直接地図のスクリプトを描けないかと思うんですが、やはりこちらでも javascript 同士がバッティングしている按配で、マップを表示できない。さらに要検討。
・・・だけど、毎日 22:00 には眠ってしまうから時間がありません。
そこで、ここに直接地図のスクリプトを描けないかと思うんですが、やはりこちらでも javascript 同士がバッティングしている按配で、マップを表示できない。さらに要検討。
・・・だけど、毎日 22:00 には眠ってしまうから時間がありません。
おまけ＝lightbox.js を使わず control.modal.js で Lightbox 効果
control.modal.js の Download。ここにCSSのサンプルも示してあり、少し改変して使用した。prototype.js も必要。script.aculo.us を抱き合わせで使ったりできるので、Lightbox よりむしろ用途は広いかも。
以上のサンプル・別ウィンドウ。・・・今日の備忘録おしまい。
追記： Googleは今日、ｉ アプリで動作する「モバイルGoogleマップ」をリリースし、DoCoMo 903i 以降の機種で利用可能とか。地図は携帯の小さい画面で見たくないなあ。・・・というか、オレ 701iDだし。ｉ アプリって使ったことないし。そもそも自分の作った Maps API も見ないし、使わないし（あっ）。
「Google Maps を表示するサンプル」は、マップへのリンクとして最良の方策だと思います。
実動作はiframeだけど、iframeだと思われないような表現方法(見た目もhtmlも)というのは、逆に好都合のような気がします。
マップをリンクでどうやって表示する・・なんてことはGoogleは全く関知しないことだけど、とても重要なことですよね。
>> cyberden さん
地図がコンテンツの「主」か「従」かにもよると思いますが、表示の仕方というのは案外盲点ですよね。
写真なども併せ、この方法をさりげなくスマートに使えば、WEBページを作るというより「ちょっと洒落た小作品を作る」愉しみに近いかなぁ、とか思います。
先日は、infowindowにxmlから画像を読み込む件でアドバイスありがとうございました。
またまた、お教え頂ければ幸いです。
Lightboxを、xmlから読み込んだ画像に組み合わせようと挑戦しているのですが、うまく行きません。
下記コード
var html = '<div id="ventana">サムネイルをクリック<br /><a href="ajisai.jpg" rel="lightbox" onclick="showLightbox(this); return false;">紫陽花<br /><img src="ajisai-thumb.jpg" width="80" height="60" alt=""/><\/a><br /><\/div>
を参考にさせていただいて、xmlに、大きい写真を「photolarge」、サムネイルを「photo」として書き、
下記コード
var html = "<a href="+photolarge+" rel='lightbox' onclick='showLightbox(this); return false;'>"+photo+"</a>
で読み込んだのですが、『rel』の部分の書き方がうまくないらしく、
『 rel='lightbox' onclick='showLightbox(this); return false;'> 』の文字と、画像が表示されます。
どのように書けば、「lightbox」を読み込むことができるでしょうか。
『"』を『'』にしたり色々やってみたのですがだめでした。
よろしくお願いいたします。
>> アイ さん
意図されていることがよく分からないのですが、
ｈｒeｆ＝”’ + photolarge + ’” ・・・というふうに、シングルのコーテーションを、さらにダブルのコーテーションで囲んでみてはどうでしょう。
どうもうまく行きません。
回りくどい言い方をしてしまいましたが、どうしたいかを端的に言いますと、
var html = '<div id="ventana">サムネイルをクリック<br /><a href="ajisai.jpg" rel="lightbox" onclick="showLightbox(this); return false;">紫陽花<br /><img src="ajisai-thumb.jpg" width="80" height="60" "/><\/a><br /><\/div>
の画像を、xmlで読み込むようにしたいのです。
下記のように書いて、コーテーションをシングルにしたり、ダブルにしたりとやってみたのですがうまく行かないのです。
var html = '<a href="+photolarge+" rel="lightbox" onclick="showLightbox(this); return false;">"+photo+"<\/a>
出来れば、ご教授ください。
>> アイ さん
画像ファイル名を、lat や lng などと同様に要素として呼び出せても、API の javascript 中で onclick にて別の javascript を作動させるのはムズカシイ気がします。
※追記：失礼。できました。
http://6pesos.googlecode.com/svn/trunk/lbox.html
ありがとうございました。
前のお返事で『難しい』とのことだったので、諦めて「「target='_blank'」で別ウインドウの設定にします」と書き込んだところで「追記」を見つけました。
できたようで嬉しいです。見せていただきました。
ただ、今現在、私が書いたソースに足してみたところでは動いていません。
これから、ソースをじっくり見せていただいて、書き直します。
ありがとうございました。嬉しいです。
今後ともよろしくお願いいたします。
悪戦苦闘しています、
http://japonyol.net/editor/mlb.html
を元に、これに画像を加え、更に「LightBox」を加えようとしているのですが、
教えていただいたサンプルの、aタグを単純に書き込めばいいかと思ったのですが、
スクリプトが書き加えてあるようで、悪戦苦闘です。
ズームの機能も使いたいし、頑張ってみます。