ダリの雑記：WEBプログラム版

いつも拝見し、多くの知恵を頂いております。
Google Map API v3についても、本家をドキュを読んでいると激烈睡魔に襲われてしまう私にとってはたいへん助かりました。JqueryでGoogle Map APIの問題のいくつかを解決するアイデアがナイスです。
早速ダウンロードさせていただき、設置テストを行ってみました。以下はそのご報告です。

まず個別版。
WinXP - FireFox3.6、G-Chrome,Opera11x、Mac OS-X Safari,FireFoxで表示、機能ともＯＫです
次に複数版
WinXP - FireFox3.6、G-Chrome,Opera11x、Mac OS-X Safari,FireFoxで表示、機能ともＯＫです。

問題は消えて欲しいIE7です。
個別版、複数版とも地図が背景の白でマスクされた状態で表示されます。マーカー、ボタン、メジャー、ストリートビュー用ウォーカーアイコンは表示されています。
ウォーカー君を地図上にＤ＆Ｄするとストリートビューになりますが、これはＩＥ7でもきちんと表示されます。

このような状態から、当初、私のＣＳＳ設定のミスと考え、display、Z-index等の要素を変える、フォーラム等で上がっている改善策をいろいろ試してみましたが直りませんでした。
当方の設置条件が原因と思っておりました、本日、こちらのサンプルページをＩＥ7で拝見したところ、私のテストと同様の状態でしたのでご報告させていただきます。
ＩＥ7でページを開くと、一瞬地図が表示され、白（背景？ＣＳＳでHTML,BODYまでtransparentにしてみましたが）でマスクされ、ストリートビュー表示はＯＫなので、おそらくＣＳＳ関係ではないかと思います。でもサンプルページのソースは極シンプルで、原因となりそうな箇所は見当たらず、言いっ放しで申し訳ないのですが、ご報告いたします。

コメントありがとうございます。
ブラウザチェックはざっとしかやっていないため、このようなコメントは非常に助かります。

さてIE7で地図の表示がおかしくなるということですが、困ったことにこちらでは、IE7のチェックはIE Testerでしか行えずしかもそれでは正常に表示されてしまいます・・・。

考えられる可能性としては、文字コードがUTF-8になっていないということですが、これだとマーカーやメジャーすら表示されないはずだし・・・
う～ん。

すみません。この問題を解決するのは少し時間がかかるかもしれません。
もし何か進展ありましたら、お知らせいただければありがたいです。

お返事、ありがとうございました。
文字コードはUTF-8で運用しております。付け加えるのを忘れておりましたが、IE8での表示はＯＫです。
また、貴サイトだけではなく、他サイトのV3判でも同様の現象が見られ、ましたので、Googleから送られてくるコードに起因するもののように思います。
海外のフォーラムでも同様のスレッドが上がっていて、親DIVに内包させないというのが解決策でした。またtableにMapを配したときも同様の状態になるというコメントもありました。
となると、APIの仕様と考えてよいように思います。どこまでも手前仕様に執着するブラウザの面倒は見切れませんのでIE7は無視することにします。
ちなみにご報告は古いＸＰに入れっぱなしになっていたIE7でブラウジングしたときのみです。当方の環境で、Adobe BrowserLab、Microsoft Expression Web SuperPreview　では全く問題ありません。何らかの要因が重なった場合のみかもしれませんので、どうぞ余計なお時間をお使いにならないでください。

quistyさん。

なるほど、APIの仕様でしたか～・・・
今回はquistyさんのコメントのおかげで、いろいろと勉強になりました。
ありがとうございました！
何やら若干興味が出てきたので、自分でも少し調べてみようかと思います。
が、とりあえずはIE7のしかも一部の環境下（もしくはバージョン？）だけのようですし、考えないことにします^^;
でも、どうしてもというときのために、v2版も改良しておくべきかな。
あ、これは単純に自分の趣味としてですよ^^

それでは。

こんにちは。

こちらのサンプルがまさに理想通りの動作で、大変感動しさっそくダウンロードさせていただきました。ありがとうございます。

実際にテストしてみると、住所リストが多くなると、11件目まではマーカーもバルーンも表示されるのですが、12件目以降は表示しないようです。
件数が多くなると、読み込みも重くなり難しいのでしょうか・・・？
何か回避策などありますでしょうか。

お忙しいところすみません。
お時間のあるときで結構ですので、ご教示いただけると幸いです。

よろしくお願いいたします。

reikoさん。
コメント及びバグの報告ありがとうございます。
早速試してみたところ、たしかにある件数を境に全く表示されなくなってしまいますね・・・すみません。

いろいろと調べた結果、原因はこちらのサイト（http://okwave.jp/qa/q5278821.html）で分かったんですが、仕様から見直す必要がありそうですので、お急ぎならば一番手っ取り早い解決方法として、gmap_coordに座標を入力するという旧来の方法を取っていただけますでしょうか？（これならば12個超えても表示されることが確認できています。）

座標の取得についてはこちらのページをご利用ください。
https://nandani.sakura.ne.jp/jstest/googlemapapi/map_set.html
上記のフォームに住所を入れると下にマーカー座標が表示されます。

よろしくお願いいたします。

さっそくご調査およびご返信いただき、ありがとうございますm(__)m

座標入力する方法でやってみたところ、これなら問題なく動作しました。
こちらのほうが表示が早い（ような気がする）というメリットも感じましたので、これでやってみたいと思います。
また、座標取得できるページも教えていただき助かります。

とてもすばらしいスクリプトですので、これからも利用させていただきます。このたびは本当にありがとうございました。

こんにちは。
ブログでスクリプトを使わせていただき、大変重宝しております。

初歩的な質問になりますが、複数表示版で情報がまだ1つでマーカーも1つだけの場合、限度一杯までズームアップされてしまいますが、これをある程度引いたズームレベルまでで固定する方法がありましたらご教授いただけますでしょうか。

よろしくお願いいたします。

u5さん。
コメントありがとうございます。
マーカー数が１つだとズームが最大になってしまう問題点についてですが、すみません。
map_v1.3.jsではそれを考慮していませんでした。
そこで、この点を修正したスクリプト、map_v1.3.1.jsをアップロードしましたので、以下のURLからダウンロードしてください。

https://nandani.sakura.ne.jp/script-download/#gv3_map_js

ズームの最大値の調整は、スクリプトの15行目にある「zoom_max」の値を変更してください。

さっそくのご対応ありがとうございます！
本当に助かりました。

これからも重宝させていただきます！

素人ながらにいつもサイト拝見してお世話になってます。
ありがとうございます。
ver1.3の複数マーカータイプで案内地図を作って使っています。
iPhoneで利用したいので、画面領域の節約のため
セレクトメニューでマーカーの一覧を作って、
地図のマーカーにひもづけたいと思っています。

お手数おかけしますが、お手すきの際に
どのようにすればいいのかご教授ください。
このサイトを参考にしています。
http://www.openspc2.org/reibun/Google/Maps/API/ouyou/ver2/007/index.html

以下のようにやろうとしているのですが。。。
上手くいかず。

何卒宜しくお願い致します！

北海道
東京
沖縄

gyoさん。
コメントありがとうございます。

コメントで頂いたプルダウンで選択したもののバルーンを表示する、という方法については現在調査中です^^;

AddGMarker関数をうまく調整すれば行けると思うのですが・・・

もうしばらくお待ちください。

海外自転車ツーリング中の者です。仲間たちの現在地を一覧するために、以前から、こちらのスクリプトを利用した地図の作成を考えています。質問というかお願いなのですが、リストあるいはマーカーをクリックした際、情報ウインドウを表示するのに合わせて、軌跡を（addOverlayで外部kmlを）描画できる仕様をご教授いただけないでしょうか。kmlファイルはリストの中になどと記述（できれば複数）されるとありがたいのですが、そうするとinfowindow内のdiv要素扱いになってしまいますでしょうか。当方、スクリプト知識がほとんど無い素人です。よろしくお願いします。

すみません、13文中にタグを記述してしまいました。
kmlファイルはリストの中に＜div class＝’gmap_kml’＞などと記述

gyoさん。

遅くなってもういらないかもしれませんが^^;　とりあえずプルダウン選択によってマーカーのバルーンを表示することに成功しました。
こんな感じでいいですかね？

■サンプル（一番上にプルダウンメニューを表示しています）
https://nandani.sakura.ne.jp/jstest/googlemapapi_v3/map_all_v1.3_custom1_coords.html

画面領域の節約ということなので、まずは<ul id="gmap_list">～</ul>部分（バルーン用情報のリスト）をdisplay:noneで非表示にし、プルダウンを設置します。

プルダウンのoptionタグのvalueは何でもよくて（selectタグはid="gmap_select"で固定してますが）、要するに<ul id="gmap_list">～</ul>でリストされているバルーン用情報とプルダウンの“数と順番さえ合っていれば”選択したプルダウンのバルーンが表示されます。

つまり仕掛けはいたって単純で、プルダウンで選択されたものと同じ順番にある<li>のバルーンを表示するということです。

map.jsのダウンロードはこちら
https://nandani.sakura.ne.jp/jstest/googlemapapi_v3/js/map_v1.3.1_custom1.js

主な改良点は
・AddGMarker関数に引数markerNumを追加
・352～363行目と374～385行目の処理を追加

使えるかどうかわかりませんが、参考になれば幸いです。m(_　_)m

Sekijiさん。

コメントありがとうございます。
う～む・・・
出来るかどうかは分かりませんが、ちょっと調べてみます。
もしかしたら返信は遅くなったりギブアップかもしれませんが、ご勘弁ください^^;

早速のお返事、恐縮です。時間は気にしませんし、駄目でもともとです。調べて頂けるだけでも感謝です。当方、現在ウガンダにおり、アフリカにしては安定した3G環境があって、ネット接続は比較的快適なのですが、今後南下する過程で、接続の頻度が低くなる可能性が高く、頻繁にこちらに確認にこれなくなると思いますが、どうぞよろしくお願いします。

Sekijiさん。

お待たせしました。
とりあえずサンプルを作成してみました。
https://nandani.sakura.ne.jp/jstest/googlemapapi_v3/map_all_v1.3_custom2_type_coords.html

このサンプルでは、マーカー、または左にあるリストのタイトルをクリックすると、情報ウィンドウが表示されると同時に、KMLファイルに書かれているマーカー情報をオーバーレイで表示されるようになっています。
（なお、このKMLファイルはウェブから拾ってきた適当なものです。どうやら新幹線の停車駅リストっぽい。）

正直、自分はKMLのことをよくわかっていないため、これでいいのかわかりませんが^^;
Sekijiさんのおっしゃったとおり、まずHTML側にて、「gmap_kml」というクラス名をつけたdivタグをリストの中に記述し、その中にkmlファイルへのパスを記述します。（くわしくはサンプルページにてソースをご覧ください。）

スタイルシートでは、「gmap_kml」を「display:none;」で非表示にしておきます。

map.jsのほうは、AddGMarker関数を修正し、setMap関数にてKMLファイルに記述されているデータをオーバーレイで描画するようにしました。

このとき、前回マーカーをクリックしてオーバーレイ描画されたものは一度クリアされます。
つまりオーバーレイを重ねて重ねて・・・という風にするのではなく、一回一回差し替える感じになります。

これでいかがでしょうか？

カスタマイズしたmap.jsはこちら。
https://nandani.sakura.ne.jp/jstest/googlemapapi_v3/js/map_v1.3.1_custom2.js

それでは、道中お気をつけて^^

追記

記事にも書いているのですが、このmap.jsのversion1.3系は、住所から座標を取得しようとすると10件程度でマーカーが表示されなくなるというバグがあります。
もしこちらのプログラムをご利用または参照する場合は、gmap_coordに座標を入力するという旧来の方法を取ってください。

nandaniさま。
お礼遅くなりまして、申し訳ございません。
早速、拝見させて頂きました。
実は、本リクエストをさせて頂いた後に、バージョン1.4の存在を知り、先にそちらで、こんなかなというサンプルを作っておりました。
http://acml-jp.net/cyclists/index.html
そして、お願いさせて頂いた、KMLファイルのオーバーレイですが、よくよく考えてみると、本ページには今すぐ実装できるだけの素材が無いことに気付きました。
しかし、せっかく作って頂いたので、私個人のサイトの方で利用させて頂けないかと、3日ほど格闘の末、なんとなく実装できたように思います。
http://sekiji.net/mytrack/test.html
以前にも書いた通り、当方スクリプトなどの知識がまったくありません。1.4と作って頂いた1.3カスタムを横に並べて、なんとか移植してみましたが、ひょっとすると間違った記述になっているかも知れません（得にアドレスから座標取得の項、当方の利用環境では必要ありませんが）。
また、map.js内に、ベースになるトラックが記述されたKMLファイルをロードするよう指示してあります。
日本の速い回線だと認識できないかも知れませんが、ロード直後はまずスクリプトの指示どおり、リスト内のすべての位置情報が表示されるズームで地図が描画され、次にベースになるKMLファイルに合わせてズーム変更されているようです（ベースのKMLファイルには南北緯60度、東西経160度ぐらいの透明のトラックを対角に埋め込んであります）。
リストの項目をクリックすると、同縮尺のままマーカー位置に移動したあと即座（？）に、そのリスト要素のKMLレイヤーを全画面表示する縮尺に変更されます（よって、バルーンは場合によっては画面からはみ出ます）。
おおむね、このように動作していますが、まれに、最初にページをロードした際、もしくはリスト項目をクリックした際に、北緯０度、東経０度あたりをセンターにMAXズームになってしまう、もしくは、フリーズしてしまい、他のリスト項目をクリックしても反応しない、地図のドラッグなどの操作ができなくなることがあります（ブラウザによっても挙動が違うようです）。
おそらく、map.js内に記述したベースKMLのオーバーレイの方法が良くないのだと思います。
得に、サーバーに新たにアップロードしたKMLを呼び出す際は、ほぼ必ず発現し、当該KMLファイルのURLをmaps.google.comの検索フォームから直接読み込み、googleのサーバー内にキャッシュを作るまでは、何度リロードしても上記の0度0度ズームMAX状態になるようです。
今回初めてAPIv3を触って気付いたのですが、オーバーレイ表示したトラックにマウスポインタをフォーカスクリックすると、KMLファイルに記述した情報をバルーンで表示（Google Earthのように）してくれるようです。APIv2にはこの仕様はありませんでした。苦労してmap.jsを組み込んだのに…。
また、リスト項目分と、オーバーレイされたトラックをクリックした際に表示されるバルーンは、相互にクリアしあうことはなく、xで閉じなければ、双方から１つずつバルーンを開くことになるようです。
なにはともあれ、ありがとうございました。
もしお手空きのお時間などございましたら、さっとmap.jsなど目を通して頂けると幸いです。
Sekiji from タンザニア

Sekijiさん。

こちらこそ、返信が遅くなりすみません。
年末年始でドタバタしてたもので。

おぉ！
ばっちり動いているみたいですね。
でも不具合アリとのことで。
手が空いているときに確認しておきますね。

思い通りの地図ができました。ありがとうございます。ただ、マーカーを複数表示する場合、特定のマーカーだけ色を変える（例えば青）ことはできますか？これができれば完璧なのですが、、、。ご教授くださいますでしょうか？

fkakさん

ご返信が遅くなり大変申し訳ございません。
年度末ということで何かと忙しくて・・・

ご質問の件ですが、別の投稿でも同じような質問が有りましたので、そちらで回答させていただきました。
（回答の順番が逆になり申し訳ないのですが・・・）

こちらのページ
https://nandani.sakura.ne.jp/web_all/javascript/889/#comments
のコメント
2. Posted by nandani 2012年02月12日
をご参照ください。