Google Mapsを自サイトに設置する

地図にマーカーを表示する

地図を使うなら、表示したいポイントを地図上にマーキングしたいですね。Google Maps APIには、座標を与えてマーカーを表示するためのクラスGMarkerが用意されています。試しに、東京タワーにマーカーを表示してみましょう。→サンプル

【上記サンプルのソース】
<!DOCTYPE html PUBLIC "-//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">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <head>
    <!-- 下記キーは、必ず自分専用のものを
        http://www.google.com/apis/maps/で取得して使ってください -->
     <script 
        src="http://maps.google.com/maps?file=api&v=1&key=自分のキー&datum=wgs84" 
        type="text/javascript"></script>
  </head>
  <body>
  
    <!-- ここへ地図を出力します↓ -->
    <div id="map" style="width: 500px; height: 400px"></div>
    
    <script type="text/javascript">
    //<![CDATA[
    
    var map = new GMap(document.getElementById("map"));
    
    //東京タワー座標設定 
    var lon   = 139.74541783332825 ; //タワーの経度
    var lat   = 35.65870845033576  ; //タワーの緯度
    var tokyotwer = new GPoint(lon,lat);

    //東京タワーを中心にする
    map.centerAndZoom(tokyotwer , 0); 
    
    //コントロール追加
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());

    //東京タワーを表示する     var marker = new GMarker(tokyotwer);     map.addOverlay(marker);

    //]]>
    </script>

  </body>
</html>
このサンプルでは、コントロール(地図の中の拡大縮小用の矢印ボタンや地図と衛星写真の切り替えボタンです)も追加してみています。

このコードの中で、マーカーの処理は、太字の部分です。東京タワーの座標を引数で与えて、GMarkerのインスタンスを作り、メソッドaddOverlayで表示するという具合です。




※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。