Googleマップ上でJSON形式のデータを扱う

以下は，JSON形式のデータファイルのサンプルです．

{
  "marker":[
    {"lat":35.70930459186816,"lng":139.72034454345703,"name":"本部キャンパス"},
    {"lat":35.70665619283589,"lng":139.7072982788086,"name":"大久保キャンパス"},
    {"lat":35.698013436605755,"lng":139.7208595275879,"name":"河田町キャンパス"}
  ]
}

JSON形式のファイルはこちら

以下のように，JavaScriptのスクリプトファイルを用意します．

var map; 

function load(){ 
    map = new GMap2(document.getElementById("mymap")); 
    map.setCenter(new GLatLng(35.70282282786898,139.71399307250976), 15); 
map.addControl(new GSmallMapControl()); 
map.addControl(new GMapTypeControl()); 


   // 登録済みマーカーをデフォルト表示 
    GDownloadUrl("http://www.hishiyama.com/fieldinfo/samples/wmarkerdat.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;
}

スクリプトはこちら

HTMLファイルを用意します．

<!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>JSONデータをGoogle Maps上に表示</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=（キーを入力）"
     type="text/javascript"></script>
        <script src="wmarkerdat.js" type="text/javascript"></script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 500px"></div>
  </body>
</html>

ウェブサイトはこちら

当該URLを開くとマーカと地図が同時に表示されます．

Googleマップ上でJSON形式のデータを扱う（読み込み時にマーカも表示する）

JSON形式のデータファイル

演習課題