ホームページ : Googleマップを利用しよう③ (突撃！ことば塾)

ホームページ : Googleマップを利用しよう③

その二
マーカー、吹き出しの表示

目的地や目印となる建物にマーカーを表示すると、地図が見やすくなります。
また、吹き出しに説明やメッセージを表示することができます。

こんな感じです。

まず、マーカーを画面の中央に表示するには、コードを以下のようにします。

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.0165, 135.783), 17);
var marker = new GMarker(map.getCenter());
map.addOverlay(marker);

（GMarkerクラスについてはこちらへ。getCenter、addOverlayメソッドは、GMap2クラスのメンバーです。詳しくは、こちらへ。）

次に、吹き出しを画面の中央に表示するには、コードを以下のようにします。

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.0165, 135.783), 17);
map.openInfoWindowHtml(map.getCenter(), "メッセージ");

（openInfoWindowHtmlメソッドは、GMap2クラスのメンバーです。
詳しくは、こちらへ。"メッセージ"部分には、HTMLタグも使えます。）

出来上がりです。
  sample6.html

続く

参照
  Googleマップを利用しよう①
  Googleマップを利用しよう②

日時: 2007年02月10日 20:51｜パーマリンク