JSON形式のデータを扱い，画像も表示する

以下は，サンプルプログラムです．まず，JSON形式のデータのサンプルです．（便宜的に画像データは同じものを使用していますが，画像ファイルは個々のロケーションに合わせて準備することを前提としています）

{
  "marker":[
    {"lat":41.772596,"lng":140.725261,"name":"函館朝市","pic":"temple1.JPG"},
    {"lat":41.842359,"lng":140.767264,"name":"はこだて未来大","pic":"temple1.JPG"},
    {"lat":41.796864,"lng":140.756965,"name":"五稜郭","pic":"temple1.JPG"},
    {"lat":41.772912,"lng":140.816231,"name":"函館空港","pic":"temple1.JPG"}
  ]
}

ウェブサイトはこちら
次に，JavaScriptのコードです．


var map;

function initialize() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(41.791217,140.775032), 12);

//    GEvent.addListener(map, "click", clickAction);
  }
}

function downloadData(){
  GDownloadUrl("data.json", function dispData(data, statusCode){
    var obj = eval("(" + data + ")");

    for (var i = 0; i < obj.marker.length; i++) {
      var lat = obj.marker[i].lat;
      var lng = obj.marker[i].lng;
      var name = obj.marker[i].name;
      var pic = obj.marker[i].pic;

      map.addOverlay(createMarker(lat, lng, name, pic));
    }
  });
}

function createMarker(lat, lng, name, pic) {
  var marker = new GMarker(new GLatLng(lat, lng));

  var html = "<p>" + name + "</p>" + "<img src=\"" + pic + "\">" + "</p>";
  GEvent.addListener(marker, "click", function(){
    marker.openInfoWindowHtml(html);
  });

  return marker;
}

ウェブサイトはこちら

最後に，HTMLファイルです．

<!DOCTYPE html "-//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形式のファイルの取得</title>
    <script src="http://maps.google.com/maps?file=api&v=2
    &key=(キーを入力）&sensor=false"
            type="text/javascript" charset="utf-8"></script>
    <script src="code4_1.js" type="text/javascript"></script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 400px; height: 400px"></div>

    <form>
    <p>
    <input type="button" id="btn" value="ダウンロード" onclick="downloadData()" />
    </p>
    </form>

  </body>
</html>

ウェブサイトはこちら

JSON形式のデータを扱い，画像も表示する

JSON形式のデータを扱い，画像も表示する

演習課題