GoogleマップAPI v3で地図とマーカー・バルーンを表示（複数版） version1.3

2010.10.30

この記事は公開から１年以上経過しており、内容が古くなっている可能性があります。

2011.05.14：最新版version1.4bができました。

2011.03.22：バグが見つかりました(詳細を見る)

今回のバージョンでは住所から座標を取得できるようにしました。（まずはサンプル）

ちなみに改良したプログラムはv1.2の改良版のため、バルーン複数表示はできなくなっています。

　

手順

1.bodyタグに、バルーン用情報を記述します。複数なんでちょっと長くなりますが４件ほどデータを入れます。（以下例）

<ul id=”gmap_list”>
    <li>
        <div class=’gmap_title’><a name=”gmap_title”>アロチ本家丸高</a></div>
        <div class=’gmap_photo’><img src=”img/marutaka.jpg” width=”120″ alt=”京橋幸太郎” /></div>
        <div class=’gmap_info’>
            <span class=’gmap_address’>和歌山県和歌山市友田町2-50</span><br />
            TEL：073-432-3313<br />
            営業時間：17:30～3:00<br />
            定休日：日曜
        </div>
        <div class=’clear’></div>
        <div class=’gmap_description’>
            醤油でひと煮立ちさせ、一晩寝かせた豚骨でとったスープはコクが生かされクセになる味
        </div>
    </li>
    <li>
        <div class=’gmap_title’><a name=”gmap_title”>井出商店</a></div>
        <div class=’gmap_photo’><img src=”img/yamatame.jpg” width=”120″ alt=”山為食堂” /></div>
        <div class=’gmap_info’>
            <span class=’gmap_address’>和歌山県和歌山市田中町4-84</span><br />
            TEL：073-424-1689<br />
            営業時間：11:30～23:30<br />
            定休日：木曜（年始休）
        </div>
        <div class=’clear’></div>
        <div class=’gmap_description’>
            和歌山ラーメンの名を全国に知らしめたのがこちらの店。
        </div>
    </li>
    <li>
        <div class=’gmap_title’><a name=”gmap_title”>まるイ</a></div>
        <div class=’gmap_photo’><img src=”img/marui.jpg” width=”120″ alt=”まるイ” /></div>
        <div class=’gmap_info’>
            <span class=’gmap_address’>和歌山県和歌山市中之島2323</span><br />
            TEL：073-427-2662<br />
            営業時間：平日19:00～翌3:00/土19:00～翌4:00<br />
            定休日：日曜
        </div>
        <div class=’clear’></div>
        <div class=’gmap_description’>
            全国から集まる麺ファンを虜にするこんもりと盛られたネギの山！
        </div>
    </li>
    <li>
        <div class=’gmap_title’><a name=”gmap_title”>ラグマン</a></div>
        <div class=’gmap_photo’><img src=”img/raguman.jpg” width=”120″ alt=”ラグマン” /></div>
        <div class=’gmap_info’>
            <span class=’gmap_address’>和歌山県和歌山市黒田258-7 玉置マンション1F</span><br />
            TEL：073-475-1200<br />
            営業時間：12:00～14:00/17:30～23:30 <br />
            定休日：水曜日
        </div>
        <div class=’clear’></div>
        <div class=’gmap_description’>
            “らぐまん”ならではのオリジナルラーメンは、34種類！レゲエが流れるログハウス作りのオシャレなお店。
        </div>
    </li>
</ul>
   
<div id=”map” style=”width:500px;height:500px;”></div>
<div class=’clear’></div>

※それのぞれに情報は必ずリスト形式にしてください。

ここで必要なものは

  • id=’gmap_list’：このIDを元にバルーン、マーカー用データを取得します。必ず「ul」または「ol」につけてください。
  • class=”gmap_title”＋aタグ：タイトルをクリックしたときに該当するマーカーの吹き出しを表示します。【追記】
  • class=”gmap_address”：このclass名を元に住所を取得し、座標に変換します。
  • id=”map”：ここにマップが表示されます。必ずwidthとheightを指定してください。

となっています。

　

もちろんこれまでのバージョン同様、座標データからマーカーを表示することもできます。その場合は前バージョンと同じく「class=”gmap_coord”」を含んだタグを追記してください。

<li>
    <div class=’gmap_title’><a name=’gmap_title’>アロチ本家丸高</a></div>
    <div class=’gmap_photo’><img src=’img/marutaka.jpg’ width=’120′ alt=’京橋幸太郎’ /></div>
    <div class=’gmap_info’>
        和歌山県和歌山市友田町2-50<br />
        TEL：073-432-3313<br />
        営業時間：17:30～3:00<br />
        定休日：日曜
    </div>
    <div class=’clear’></div>
    <div class=’gmap_description’>
        醤油でひと煮立ちさせ、一晩寝かせた豚骨でとったスープはコクが生かされクセになる味
    </div>
    <div class=’gmap_coord’>
        34.2326948,135.1848098
    </div>
</li>

class=”gmap_coord”の中の座標は

マーカー緯度,マーカー経度

となっています。（座標についてはこちらから手動で取得できます）

※ここで注意点。

マーカー座標を設定する際、以下のパターンが考えられます。

  1. すべて住所から座標に変換する場合。（gmap_addressのみ）
  2. すべて座標を「gmap_coord」に用意しておく場合。（gmap_coordのみ）
  3. 住所から変換するものと、座標が用意されているものが混ざっている場合（gmap_address＋gmap_coord）

1.の方法では、各項目（<li>内部の記述）の中に「gmap_address」を設定すればOKです。
（この場合「gmap_coord」は必要ありません。）サンプル

2.の方法についても、各項目の中に「gmap_coord」を設定すれば問題ありません。
（この場合「gmap_address」は必要ありません。）サンプル

問題は3の方法について。
一度でも住所から座標を取得する項目がある場合は、すべての項目に「class=”gmap_address”」を設定してください。その中で「class=”gmap_coord”」がある場合は、そちらが優先されます。
つまり「class=”gmap_address”」はとりあえずすべての項目の住所に設定しておき、座標に微調整を加えたいなどの項目がある場合のみ、それに「class=”gmap_coord”」をつけて設定する、という感じで設定してください。
サンプル

上記のサンプルはどれも見た目変わりませんが、ソースがそれぞれ違いますので各ページのソースをご覧ください。

　

２．以下のスクリプトをダウンロードしてください。

自作のマップ表示用スクリプトv3版

　

３．htmlファイルのheadタグに上記のファイルとGoogleMapAPIを読み込んでください。

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8“>
<script type=”text/javascript” src=”js/jquery.js“></script>
<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false“></script>
<script type=”text/javascript” src=”js/map.js“></script>

※metaタグで文字コードをutf-8にするのを忘れずに。これがないと正常に動作しない場合があります。
※スクリプトファイルはダウンロード後、「js」フォルダに入れていると仮定して記述しています。
※ダウンロードした「map.js」は、「map_v1.3.js」のようにバージョンナンバーが付いているので、ファイル名を変更するか、上記の読み込み部分の記述を変更してください。

　

４．bodyタグのonloadにて、マップ表示用関数を呼び出します。

<body onload=”map_all(‘map’,’gmap_list’)“>

map_allの引数について

  • 第一引数：マップを表示するタグのID（今回はmap）
  • 第二引数：バルーン情報が入っているリストタグのID（今回はgmap_list）

これで、マーカー・バルーン付きマップが表示できます。

　

５．スタイルを整えます。以下をheadタグ内に記述するか、別ファイルに保存してheadタグで埋め込んでください。（スタイルシートのダウンロードはこちら）

#map{
 float:left;
}

.clear{
 clear:both;
}

/*吹き出しのスタイル*/
.gmap_block{
 width:320px;
}
.gmap_block .gmap_title{
 font-size:100%;
 font-weight:bold;
 margin-bottom:10px;
}

.gmap_block .gmap_photo{
 float:right;
 margin-left:10px;
 overflow:hidden;
}

.gmap_block .gmap_info{
 font-size:75%;
}

.gmap_block .gmap_description{
 font-size:75%;
 margin-top:10px;
}
/*お店の情報（個別用）*/
#gmap_data{
 float:left;
 margin-right:10px;
 width:320px;
}

#gmap_data .gmap_photo{
 float:left;
 width:130px;
}

#gmap_data .gmap_title{
 font-size:100%;
 font-weight:bold;
 line-height:1.5em;
}

#gmap_data .gmap_info,
#gmap_data .gmap_description{
 font-size:75%;
 line-height:1.5em;
}

#gmap_data .gmap_description{
 padding-top:5px;
}

/*お店の情報（リスト用）*/
#gmap_list{
 width:300px;
 height:500px;
 overflow:scroll;
 float:left;
 margin:0px;
 padding:0px;
}

#gmap_list li{
 list-style-type:none;
 margin:0px 0px 20px 0px;
 padding:0px;
}

#gmap_list .gmap_photo{
 float:left;
 width:130px;
}

#gmap_list .gmap_title{
 font-size:100%;
 font-weight:bold;
 line-height:1.5em;
}

#gmap_list .gmap_title a{
 color:#0000FF;
 text-decoration: underline;
 cursor:pointer;
}

#gmap_list .gmap_info,
#gmap_list .gmap_description{
 font-size:75%;
 line-height:1.5em;
}

#gmap_list .gmap_description{
 padding-top:5px;
}

.gmap_coord{
 display:none;
}

 　

サンプル [新しいウィンドウで開く]

以上です。

バグなどありましたらご連絡いただけるとありがたいです。

【追記】

class=”gmap_title”を忘れると、エラー警告が出ることに気付いたので、付け加えました。

　

【追記：2011/03/22】

10件以上住所による座標取得を行おうとすると、途中でマーカーが表示されなくなるというバグが見つかりました。
現段階でこのバグの修正は行われておりません。
このスクリプトを利用されている方は申し訳ございませんが、10件マーカーを表示する必要がある場合は、旧来通りgmap_coordに座標を記述する方式を取ってください。
なお、座標の取得については
https://nandani.sakura.ne.jp/jstest/googlemapapi/map_set.html
のページをご利用ください。

【追記：2011/03/26】

マーカー数が少ないと、ズームが寄り過ぎる問題点について解決したスクリプトをアップロードしました（map_v1.3.1.js）
ズームの最大値の調整は、map_v1.3.1.jsの15行目にある「zoom_max」の値を調整してください。
スクリプトのダウンロードページへ。

【追記：2011/05/14】

10件以上住所による座標取得を行おうとすると、途中でマーカーが表示されなくなるという問題点を解決したバージョンをアップロードしました。

詳しくはこちらのページをご覧ください。

GoogleマップAPI v3で地図とマーカー・バルーンを表示（複数版） version1.4b

　　　　

今回参考にさせていただいたサイト

Google Maps API Version3 日本語ドキュメント（非公式）：該当記事「ジオコーディング」

スポンサーリンク

コメント

  1. quisty より:
    2011年01月31日 1:10 PM

    いつも拝見し、多くの知恵を頂いております。
    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にしてみましたが）でマスクされ、ストリートビュー表示はＯＫなので、おそらくＣＳＳ関係ではないかと思います。でもサンプルページのソースは極シンプルで、原因となりそうな箇所は見当たらず、言いっ放しで申し訳ないのですが、ご報告いたします。

    返信
  2. nandani より:
    2011年01月31日 11:28 PM

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

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

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

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

    返信
  3. quisty より:
    2011年02月01日 2:41 PM

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

    返信
  4. nandani より:
    2011年02月01日 11:11 PM

    quistyさん。

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

    それでは。

    返信
  5. rieko より:
    2011年03月21日 4:47 PM

    こんにちは。

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

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

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

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

    返信
  6. nandani より:
    2011年03月21日 9:39 PM

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

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

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

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

    返信
  7. rieko より:
    2011年03月22日 9:24 PM

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

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

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

    返信
  8. u5 より:
    2011年03月25日 7:57 PM

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

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

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

    返信
  9. nandani より:
    2011年03月26日 3:21 PM

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

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

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

    返信
  10. u5 より:
    2011年03月27日 12:03 AM

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

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

    返信
  11. gyo より:
    2011年11月24日 10:06 PM

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

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

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

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

    北海道
    東京
    沖縄

    返信
  12. nandani より:
    2011年11月28日 7:48 PM

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

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

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

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

    返信
  13. Sekiji より:
    2011年12月02日 9:19 PM

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

    返信
  14. Sekiji より:
    2011年12月02日 9:22 PM

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

    返信
  15. nandani より:
    2011年12月02日 11:42 PM

    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

    返信
  16. nandani より:
    2011年12月02日 11:54 PM

    Sekijiさん。

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

    返信
  17. Sekiji より:
    2011年12月03日 4:22 AM

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

    返信
  18. nandani より:
    2011年12月14日 6:59 PM

    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

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

    返信
  19. nandani より:
    2011年12月14日 7:02 PM

    追記

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

    返信
  20. Sekiji より:
    2011年12月26日 11:31 PM

    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 タンザニア

    返信
  21. nandani より:
    2012年01月09日 12:42 PM

    Sekijiさん。

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

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

    返信
  22. fkak より:
    2012年01月19日 2:52 PM

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

    返信
  23. nandani より:
    2012年02月12日 6:37 PM

    fkakさん

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

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

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

    返信
タイトルとURLをコピーしました