都道府県の県庁所在地を日本地図に表示する
はじめに、Google Maps API を使って日本地図を表示します。
続けて、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), 6);
for (var i=0; i<Japan.arr.length; i++)
map.addOverlay(createMarker(Japan.arr[i]));
}
// 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>
<div id="map" style="width:558px; height:558px"></div>
関連情報
- ベーシック
- 送信フォーム
- with jQuery
- Google Maps API
- BLOGRANGER API