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.)