都道府県を選択してその県庁所在地の周辺地図を表示する

ホーム > Postal Search Ajax API サンプル > Google Maps API

はじめに、Google Maps API を使って、東京都庁を中心とした地図を表示します。

続けて、Japan オブジェクトの arr プロパティを使って、都道府県の県庁所在地の緯度経度を取得し、その結果から日本地図にマーカーを追加します。そのマーカーをクリックすると吹き出しを表示し、その噴出しの中に、都道府県の名前、フリガナ、ローマ字、地方公共団体コード、緯度経度を表示します。

続けて、Japan オブジェクトの arr プロパティを使って、都道府県のドロップダウンリストを表示します。そのドロップダウンリストを選択すると、選択した都道府県の県庁所在地を中心とした地図を表示します。

<script type="text/javascript">
//<![CDATA[

// GMap2
var map;

// window.onload
window.onload = function() {
  map = new GMap2(document.getElementById('map'));
  map.addControl(new GSmallMapControl());
  map.addControl(new GMapTypeControl());
  map.addControl(new GOverviewMapControl());
  map.setCenter(new GLatLng(Japan.Tokyo.y, Japan.Tokyo.x), 15);
  for (var i=0; i<Japan.arr.length; i++)
    map.addOverlay(createMarker(Japan.arr[i]));

  for (var i=0; i<Japan.arr.length; i++) {
    var pref = Japan.arr[i];
    var option = document.createElement('option');
    option.value = pref.g;
    if (pref == Japan.Tokyo)
      option.selected = true;
    option.appendChild(document.createTextNode(pref.a));
    var select = document.f.g;
    select.appendChild(option);
  }

  change(select);
}

// change
function change(select) {
  for (var i=0; i<Japan.arr.length; i++) {
    var pref = Japan.arr[i];
    if (pref.g == select.value) {
      map.panTo(new GLatLng(pref.y, pref.x));
      break;
    }
  }
}

// createMarker
function createMarker(pref) {
  var marker = new GMarker(new GLatLng(pref.y, pref.x));
  GEvent.addListener(marker, 'click', function() {
    marker.openInfoWindowHtml('<h3>' + pref.a + '</h3>'
      + '<dl>'
      + '<dt>フリガナ</dt><dd>' + pref.k + '</dd>'
      + '<dt>ふりがな</dt><dd>' + pref.h + '</dd>'
      + '<dt>ローマ字</dt><dd>' + pref.r + '</dd>'
      + '<dt>地方公共団体コード</dt><dd>' + pref.g + '</dd>'
      + '<dt>経度</dt><dd>' + pref.x + '</dd>'
      + '<dt>緯度</dt><dd>' + pref.y + '</dd>'
      + '</dl>'
    );
  });
  return marker;
}

//]]>
</script>

<form name="f">
<select name="g" onchange="change(this);"></select>
</form>

<div id="map" style="width:480px; height:320px"></div>

都道府県を選択してその県庁所在地の周辺地図を表示する

関連情報