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

「1.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行のプログラムを追加するだけで、地図上にマーカーが表示できてしまうのです。


サイト内検索
Google Maps APIプログラミング入門 第2版
Google Maps APIプログラミング入門 第2版
全520ページ。Google Maps API version3を中心に公式ドキュメントより詳しく解説しています。
詳しくはこちら
Google Maps APIプログラミングガイド

Google Maps API Expert 4人が共著で執筆。中級者向けに実用に役立つサンプルを中心に紹介! スマートフォン時代に合わせたGoogle Maps APIの使い方も掲載。
詳しくはこちら