複数のマーカーが配置された地図を作る方法 (その２)

グーグルが提供している GoogleMapsAPI を利用する。

(1) GoogleMapsAPI を使って地図を表示する JavaScript を作成します。
詳細は Google Maps API について をご覧ください

(2) 作成した JavaScript を ブログパーツ・モジュール に貼る

欠点
プログラム(JavaScript) の作成になるので、万人向けではない。

<script src="http://maps.google.co.jp/maps?hl=ja&file=api&v=2&key=APIキー" type="text/javascript"></script>
<script type="text/javascript">
var map;
function map_show() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map_canvas"));
    map.addControl(new GSmallMapControl());
    map.setCenter(new GLatLng(35.44474443019686, 139.6419972338996), 15);
    map_marker(35.44445778727835, 139.6373483867764, "<a href='http://www.city.yokohama.jp/'>横浜市役所</a>");
    map_marker(35.44474443019686, 139.6419972338996, "<a href='http://www.city.yokohama.lg.jp/naka/'>横浜市中区役所</a>");
    map_marker(35.44861580336326, 139.6450002196464, "<a href='http://www.pref.kanagawa.jp'>神奈川県庁</a>");
  }
}
function map_marker(lat, lng, html)
{
    var marker = new GMarker(new GLatLng(lat, lng));
    GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(html);
    });
    map.addOverlay(marker);
}
window.onload = map_show;
</script>
<div id="map_canvas" style="border: 1px solid black; width: 400px; height: 400px; float: left;"></div>