Adding ancor point and icon size to map marker with gmap3

Question

I am using gmap3 and have added custom pins and pin shadow to my map, but I am having problems in getting the icon and the shadow to align. My code is:

marker: {
  options: {
    icon: '/media/pins/pin.png',
    iconSize: [26, 30],
    shadow: '/media/pins/pin_shadow.png',
    shadowSize: [44, 30],
    iconAnchor: [13, 70],
  },

Haven't been able to find any examples online, so I am not sure if the problem is with what I call the option (ex: iconSize) or with the way I serve the value to it (ex: [13, 70])

Answer 1

As Duncan points out the solution is to use the MarkerImage class. And the way to do that is:

marker: {
  options: {
    icon:
      new google.maps.MarkerImage('/media/pins/pin.png',   //icon url
      new google.maps.Size(26, 30),    //sets the icon size
      new google.maps.Point(0, 0),    //sets the origin point of the icon
      new google.maps.Point(13, 30)),    //sets the anchor point for the icon
    shadow:
      new google.maps.MarkerImage('/media/pins/pin_shadow.png',
      new google.maps.Size(44, 30),
      new google.maps.Point(0, 0),
      new google.maps.Point(13, 30)),
  },

Answer 2

MarkerOptions has no iconSize, shadowSize or iconAnchor properties. It's hard to say if gmap3 takes the options and plugs it straight into MarkerOptions. If it does, you'd need to create the icon and shadow as MarkerImage objects instead.