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

サンプルプログラム

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=[あなたのAPIキー]" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

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

            // 登録済みマーカーをデフォルト表示 
            GDownloadUrl("http://googlemaps.googlermania.com/map/example_12.json", function(doc, stat){ 
                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
                );

                //マーカーの経度・緯度を取得する方法
                //var p=marker.getPoint();
                //marker.openInfoWindowHtml(
                //    "<b>"+name+"</b><br>" +
                //    "lat:" + p.lat() + "<br>" +
                //    "lng:" + p.lng()
                //);
            }); 
            return marker;
        }
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 500px"></div>
  </body>
</html>

example_12.jsonの内容

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

投票数:2 平均点:10.00

この記事の1行目に飛ぶ