日本の湖

日本の湖に関するデータです。面積が大きい順にトップ30を選択しました。JSON形式で用意してあります。

ID、湖名、緯度、経度、の4つのデータで1セットとなっています。

{
  "marker":[
    {"id":"01","lakename":"琵琶湖","lat":35.265804,"lng":136.104126},
    {"id":"02","lakename":"霞ヶ浦","lat":36.03855,"lng":140.403557},
    {"id":"03","lakename":"サロマ湖","lat":44.137377,"lng":143.797989},
    {"id":"04","lakename":"猪苗代湖","lat":37.47731,"lng":140.09388},

...(略)

    {"id":"27","lakename":"池田湖","lat":31.235702,"lng":130.56118},
    {"id":"28","lakename":"桧原湖","lat":37.67825,"lng":140.056458},
    {"id":"29","lakename":"涸沼","lat":36.276801,"lng":140.507927},
    {"id":"30","lakename":"濤沸湖","lat":43.935082,"lng":144.394855}
  ]
}

今回のサンプルではGMarkerManagerを使って詳細な地図を表示する時にはマーカーを消すように設定してあります。

サンプル

では簡単なサンプルで試してみます。

code5_1.js

var map;
var manager;

function initialize() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map"));
    map.addControl(new GMapTypeControl());
    map.addControl(new GLargeMapControl());
    map.setCenter(new GLatLng(36.13628,138.604202), 5, G_SATELLITE_MAP);

    manager = new GMarkerManager(map);

    GDownloadUrl("./data/lake-30.json", createMap);
  }
}

function createMap(jsondata, statusCode){
  var json = eval("(" + jsondata + ")");

  var selectHtml = "";
  selectHtml += "<form>";
  selectHtml += "<select id='lakename' onChange='selectLake()'>";
  selectHtml += "<option value='0'>選択してください</option>";

  for (var i = 0; i < json.marker.length; i++) {
    var id = json.marker[i].id;
    var lakename = json.marker[i].lakename;
    var lat = json.marker[i].lat;
    var lng = json.marker[i].lng;

    var marker = createMarker(id, lakename, lat, lng)
    manager.addMarker(marker, 0, 10);

    selectHtml += "<option value='" + lat + "," + lng + "'>"
    selectHtml += lakename;
    selectHtml += "</option>";
  }

  selectHtml += "</select>";
  selectHtml += "</form>";
  document.getElementById("lake").innerHTML = selectHtml;
}

function createMarker(id, lakename, lat, lng){
  var marker = new GMarker(new GLatLng(lat, lng));

  var html = "<p>[" + id + "] " + lakename + "</p>";

  GEvent.addListener(marker, "click", function(){
    marker.openInfoWindowHtml(html);
  });

  return marker;
}

function selectLake(obj){
  var val = document.getElementById("lakename").value;

  if (val != "0"){
    var latlng = val.split(",");
    var lat = latlng[0];
    var lng = latlng[1];

    map.setCenter(new GLatLng(lat, lng), 10);
  }
}

map5_1.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" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>サンプル：日本の湖</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=(key)&sensor=false"
            type="text/javascript" charset="utf-8"></script>
    <script src="./js/code5_1.js" type="text/javascript"></script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="lake"></div>
    <div id="map" style="width:500px; height:400px;"></div>
  </body>
</html>

実際に試してみた画面イメージは次の通りです。

p5-1

選択メニューから湖を選択すると、選択した湖へ移動します。

p5-2

p5-3

GMarkerManagerを使い、各マーカーが表示される最大縮尺レベルを設定してあるため、湖が表示された状態でズームインを行うとマーカーが非表示となり湖が見やすくなります。

p5-4

( Written by Tatsuo Ikura )

Profile

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。