Changing Default Google Map Marker

Vaishakh Thayyil

Google Maps , Google Maps Tutorials

Monday, July 18, 2011

2 Comments

Google Map v3 Tutorial : Basic Concepts 



Tweet #newtonball with a screenshot of the level to win a suprize gift.
Checkout this cool game
Newton Ball in Playstore

  There are two ways by which you can change the default Google
Map Marker . In place of the default pushpin icon you can replace
it with the icon of your own . Google Maps documentation says 
the icons can be of two types .

 1) Simple Icons
      
This can be done by specifying the markers icon property 
The icon property is set this way .

    icon : 'somemarker.png'


For transparency ,icon should be an 24-bit png image .

function initialize() {

    // Setting the Options for the Maps 
    var myOptions = {
      zoom: 4,
      center: new google.maps.LatLng(-33, 151),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    //Creating the Map Object 

    var map = new google.maps.Map(document.getElementById("map_canvas"),
                                  myOptions);
     

    var image = 'somemarker.png';
    // Image for the Icon  
    var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);

    var someMarker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image
    });
  
}
//End the Initialize function 

I assume you know how to call the initialize function .You can
get the basic format of the code here .

2) Complex Icons


This is the second set of markers  , but unlike simple icons
here you can specify the exact clickcable region , the shadow
image , the order in which they should be displayed with
respective to other overlays . Here you have to specify the
size of the icon ,anchor of the icon .Its more customizable
and you can customize it according to your needs .

So along with the icon property you will have to specify three
more properties .
 a) shadow
 b) shape
 c) zIndex

Shadow and Icon in case of Complex Icons must be objects of
MarkerImage.

MarkerImage takes in four parameters
 a) Image Source
 b) Size of the Marker
 c) Origin  of Marker
 d) Destination of Marker

Example of MarkerImage:

var image = new google.maps.MarkerImage('beachflag.png',
      // This marker is 30 pixels wide by 32 pixels tall.
      new google.maps.Size(30, 32),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      new google.maps.Point(0, 32));

  In the Similar Manner you can create the shadow MarkerImage .
Things you must note while choosing the shadow image is :

 a) The shadow must spread out horizontally in 45 degree to the
 icon image . Both Shadow and the Icon images should be transparent
i.e must be of the extension (.png) .

The third property Shape of the Marker takes in two parameters
    a) type      :   HTML <area> elements examples (poly,rect,circle).
    b) coord   :   X,Y coordinates of the polygon selected .
The shape is used to define the clickable area of the marker .

Code for Complex Icons

function initialize() {

    // Setting the Options for the Maps 
    var myOptions = {
      zoom: 4,
      center: new google.maps.LatLng(-33, 151),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    //Creating the Map Object 

    var map = new google.maps.Map(document.getElementById("map_canvas"),
                                  myOptions);
     
      var image = new google.maps.MarkerImage('beachflag.png',
      // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(20, 32),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      new google.maps.Point(0, 32));

      var shadow = new google.maps.MarkerImage('beachflag_shadow.png',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(37, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));
      // Shapes define the clickable region of the icon.
      // The type defines an HTML  element 'poly' which
      // traces out a polygon as a series of X,Y points. The final
      // coordinate closes the poly by connecting to the first
      // coordinate.
   
      var shape = {

           coord: [1, 1, 1, 20, 18, 20, 18 , 1],
           type: 'poly'

      };

     var someMarker = new google.maps.Marker({
        position: myLatLng,
        map    : map,
        shadow : shadow,
        icon   : image,
        shape  : shape,
        zIndex : 2   

    });
  
}
//End the Initialize function 

Screenshot

beachflag_shadow.png (Shadow)

   beachflag.png (Icon Image)