CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-markers
Laxmidi
Laxmidi

Reputation: 2684

Google Maps Javascript V3: How can I Set the Marker Shadow's Offset from the Marker?

I've got a Google Map with a few different types of icons. I've got a shadow on each icon. How can I adjust the marker shadow's offset from the marker?

In the loop that builds each marker, I've got: 

var icon = customIcons[type];
var marker = new google.maps.Marker({
    map: map,
    position: point,
    icon: icon.icon,
    shadow: icon.shadow
    });

The icon gets set by type.

var customIcons = {
  Football: {
    icon: 'http://path-to-image1.png', 
    shadow: 'http://path-to-shadow-image1.png'
  },
  Lacrosse: {
    icon: 'http://path-to-image2.png',
    shadow: 'http://path-to-shadow-image2.png'
  }
};

In this tutorial, they set the size and offset for a single icon as follows:

var image = new google.maps.MarkerImage('images/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('images/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));

In my situation, I've got multiple icons and they are set in an object. How can I add the size and offset to var customIcons ?

Thank you.

Upvotes: 2

Views: 11429

Answers (2)

Metablocks Corp
Metablocks Corp

Reputation: 1665

According to this piece of Google Map API v3 documentation:

Note: Marker shadows were removed in version 3.14 of the Google Maps JavaScript API. Any shadows specified programmatically will be ignored.

Upvotes: 3

Nicolas Le Thierry d'Ennequin
Nicolas Le Thierry d'Ennequin

Reputation: 6154

See: https://developers.google.com/maps/documentation/javascript/reference#MarkerImage

The shadow image is a MarkerImage object. As such, its constructor can take an anchor parameter (Point object) to tell how to position the shadow relative to your marker coordinates.

By default, the bottom-center point of MarkerImage is aligned on the marker coordinates. If your shadow image isn't the same size as your marker image (e. g. if it is wider) you will have to adjust the shadow's position.

Upvotes: 0

Related Questions