Changes the icon of Marker

This page describes how to change the icon of a marker.
There is several methods. In here, introduces a simple way.



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>

Description

Marker's icon is makes up from two images.


marker_flag.png

marker_shadow.png

Front's image used from Marker.icon property, backside's image used from Marker.shadow property. You can change these properties, when you make a instance with MarkerOptions or Marker.setIcon()/Marker.setShadow(), then the marker's icon will be change. Only url specified, the marker detects the anchor point at bottom-center. (The anchor point means a point of icon binds map and image.)



MarkerImage(url:string, size?:Size, origin?:Point, anchor?:Point, scaledSize?:Size)
url
Used to specify the url of image.

size
(optional)Used to specify the size of image in pixel.
You may also specify using size property.


origin
(optional)Used to specify the origin of image in pixel.
You may also specify using origin property.
Default origin is left-top of image.


scaledSize
(optional)Used to specify the size of icon when the marker appears.



Search
Books
Google Maps API Programming Guide

Four Google Maps API Experts wrote this book. Introducing useful examples for developers!
See more details