マーカーをオリジナル画像にする

「地図にマーカーを表示する」では、地図上にマーカーを表示してみました。 今回はその続きで、マーカーの画像をオリジナルの画像にしてみましょう。
マーカーのアイコンを変更するには幾つか方法がありますが、ここでは簡単な方法を紹介します。

code

<script type='text/javascript'>

    var flagIcon_front = new google.maps.MarkerImage("http://googlemaps.googlermania.com/img/marker_flag.png");
    flagIcon_front.size = new google.maps.Size(35, 35);
    flagIcon_front.anchor = new google.maps.Point(0, 35);
    
    var flagIcon_shadow = new google.maps.MarkerImage("http://googlemaps.googlermania.com/img/marker_shadow.png");
    flagIcon_shadow.size = new google.maps.Size(35, 35);
    flagIcon_shadow.anchor = new google.maps.Point(0, 35);
    
    var mapCanvas;
    function intialize() {
      //Create a map
      mapCanvas = new google.maps.Map(document.getElementById("map_canvas"), {
        center : new google.maps.LatLng(38.196424,-147.130884),
        zoom : 2,
        mapTypeId : 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.setIcon("http://googlemaps.googlermania.com/img/google-marker-big.png");
      marker1.setShadow("http://googlemaps.googlermania.com/img/google-marker-big-shadow.png");
      marker1.setMap(mapCanvas);
      
      //marker2 : Tokyo, Japan
      var marker = new google.maps.Marker({
        position : new google.maps.LatLng(35.678494,139.744205),
        map: mapCanvas,
        icon: flagIcon_front,
        shadow: flagIcon_shadow,
      });
    }
    google.maps.event.addDomListener(window, "load", intialize);
  </script>

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

マーカーのアイコンは次の図のように、2枚の画像から構成されています。

marker_flag.png
marker_shadow.png

前側の画像はMarker.iconプロパティ、影画像はMarker.shadowプロパティで指定をすると画像を変更することができます。 new Marker()のときにオプションで指定するか、Marker.setIcon()/Marker.setShadow()で指定することができます。 URLだけを指定した場合、次の図のように画像の下辺中央がアンカー(地図とマーカーを結びつける基準点になります。)

またMarkerImagekクラスを使用すると、より細かい指定をすることが可能です。