例−10:JSON形式のデータを読み込んで、マッピングする

フォームのボタンを押すと、マーカーが追加されます。
マーカーをクリックすると、フォームで入力した文字が表示されます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Google Maps JavaScript API Example</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

    <script src="http://maps.google.co.jp/maps?file=api&v=2&key=[あなたのAPIキー]&sensor=false"
            type="text/javascript"></script>

    <script type="text/javascript">
    //<![CDATA[
    function load(){ 
      prettyPrint();

      var map = new GMap2(document.getElementById("map")); 
      map.setCenter(new GLatLng(35.676148, 139.74479), 15); 
      map.addControl(new GSmallMapControl()); 
      map.addControl(new GMapTypeControl()); 

      // JSON形式のファイルをダウンロードする
      GDownloadUrl("./example_12.json", function(doc, stat){
        
        //JSON形式はそのままJavaScriptオブジェクトとして扱える
        eval("loaddata=" + doc); 
        
        //ループで地図上にマーカーを配置する
        for (var i = 0; i < loaddata.data.length; i++) { 
          var marker = makeMarker(
                         loaddata.data[i].lat,
                         loaddata.data[i].lng,
                         loaddata.data[i].name
                       );
          map.addOverlay(marker);
        }
      });
    }
    
    //マーカーを作成して返す
    function makeMarker(lat, lng, name) {
      var point = new GLatLng(lat, lng);
      var marker = new GMarker(point); 

      // クリックしたマーカーに該当する情報を表示 
      GEvent.addListener(marker, "click", function(){ 
        //マーカーにデータを保持させる方法
        marker.openInfoWindowHtml(
            "<b>"+name+"</b><br>" +
            "lat:" + lat + "<br>" +
            "lng:" + lng
        );
      }); 
      return marker;
    }
    
    //ページがロードされたら、load 関数を実行して、地図を表示する
    window.onload = load;
    
    //ページを抜けるとき、メモリ開放
    window.onunload = GUnload;
    //]]>
    </script>
  </head>
  <body >
    <div id="map" style="width: 600px; height: 600px"></div>
  </body>
</html>

取得するJSONファイル (example_12.json) (注)ファイルはUTF-8で保存してください

{
	data: [
		{lat:35.676148,lng:139.74479,name:"国会議事堂"},
		{lat:35.678494,lng:139.744205,name:"国立図書館"}
	]
}






サイト内検索
Google Maps APIプログラミング入門 第2版
Google Maps APIプログラミング入門 第2版
全520ページ。Google Maps API version3を中心に公式ドキュメントより詳しく解説しています。
詳しくはこちら
Google Maps APIプログラミングガイド

Google Maps API Expert 4人が共著で執筆。中級者向けに実用に役立つサンプルを中心に紹介! スマートフォン時代に合わせたGoogle Maps APIの使い方も掲載。
詳しくはこちら