google-map-marker-with-shadow.js

google-map-marker-with-shadow.js

/* Here's how to add a coloured marker to a Google Map with a shadow in the
   right place.

   The pin itself used to be dynamically generated via Google Charts:
      //chart.apis.google.com/chart?chst=d_map_pin_letter&chld=|3491FF|000000
   documented here:
      https://developers.google.com/chart/image/docs/gallery/dynamic_icons

   Note however that this API was marked as deprecated on April 20th 2012
   although it's not clear when or if it will be turned off.
*/

var shadow = new google.maps.MarkerImage('shadow50.png', null, null,
                                         new google.maps.Point(10, 34))
  , point  = new google.maps.LatLng(lat, lng)
  , marker = new google.maps.Marker({ position: point
                                    , map: map
                                    , title: name
                                    , icon: 'pin-21x34.png'
                                    , shadow: shadowImage
                                    })
  ;

pin-21x34.png

shadow50.png