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

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



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クラスを使用すると、より細かい指定をすることが可能です。

MarkerImage(url:string, size?:Size, origin?:Point, anchor?:Point, scaledSize?:Size)
url
マーカーの画像のURLを指定します

size
(省略可)読み込む画像のサイズを指定します。
sizeプロパティを使って指定することも出来ます。


origin
(省略可)画像の基準点を指定します。
originプロパティを使って指定することも出来ます。デフォルトは画像の左上です。


scaledSize
(省略可)マーカーが表示されるときのアイコンのサイズを指定します。



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

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