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

「１．Google Mapsをサイトに設置してみる」では、Google Mapsの基本的な扱い方について説明しました。これでホームページ上に世界中のどの場所でも地図が表示できるようになったのですが、地図だけ表示しても面白くないですね。

そこで今回は、地図にマーカーを表示する方法を説明します。

code

<script type='text/javascript'>

    var mapCanvas;
    function intialize() {
      //Create a map
      mapCanvas = new google.maps.Map(document.getElementById("map_canvas"));
      mapCanvas.setCenter(new google.maps.LatLng(38.196424,-147.130884));
      mapCanvas.setZoom(2);
      mapCanvas.setMapTypeId(google.maps.MapTypeId.ROADMAP);
      
      
      //marker1 : New York, USA
      var marker1 = new google.maps.Marker();
      marker1.setPosition(new google.maps.LatLng(40.714353, -74.005973));
      marker1.setMap(mapCanvas);
      
      //marker2 : Tokyo, Japan
      var marker2 = new google.maps.Marker({
        position : new google.maps.LatLng(35.678494,139.744205),
        map: mapCanvas
      });
    }
    google.maps.event.addDomListener(window, "load", intialize);
  </script>

サンプルプログラムの解説

マーカーを表示するコードは、下記の部分です。

var marker1 = new google.maps.Marker();
marker1.setPosition(new google.maps.LatLng(35.676148,139.74479));
marker1.setMap(mapCanvas);

var marker = new google.maps.Marker();

マーカーを作成します。引数にMarkerOptionsを指定することで、marker2のようにマーカーの初期化を一度に行うことができます。

google.maps.Marker(MarkerOptions)

MarkerOptions : (省略可) マーカーの挙動を指定するオプションを指定します。

marker.setPosition(...); マーカーを表示する位置(緯度経度)を指定します

marker.setMap(mapCanvas); マーカーを表示する地図を指定します

たった3行のプログラムを追加するだけで、地図上にマーカーが表示できてしまうのです。