Setting marker icon 'anchor'

[stevesims]

With the Google Maps JS API, one can set the anchor point of a marker icon to be something other than the bottom centre of the icon image. You'd do this by doing something like:

        this.homePin = new google.maps.Marker({
          position: latLng,
          map: this.map,
          icon: {
            url: "images/pin-only.png",
            anchor: new google.maps.Point(8, 8),
          }
        });

(My pin-only.png is 16x16, so the anchor on the icon is the middle of the icon.)

This doesn't seem to be supported by the plugin.

In my app I'm drawing a circle with the radius of the accuracy of the home location at latLng, and then placing the homePin on top of that. As I can't adjust the anchor point of the marker icon, the marker sits above the centre point of the circle, which looks slightly odd.

[jskidd3]

Hi @stevesims,

Have you fully reviewed the documentation for anchor points? I have achieved this with the code written below.

Example:

this.map.addMarker({
    icon: myIcon,
    position: myPosition,
    title: "Title",
    snippet: "Snippet",
    flat: true,
    rotation: myBearing,
    anchor: [17, 60]
}, function(marker) {
    alert("Yay, a marker with an anchor!");
});

[stevesims]

Yes I have.

No matter what values I provide to that anchor, the position of the icon for me is not affected (on iOS).

The implementation code for setAnchor in Marker.m seems to indicate that this setting should affect the position of the info window, rather than the position of the icon. However createMarker does not do anything with that "anchor" data, so it just gets ignored.

[jskidd3]

I have just experimented a little more and it seems I was mistaken!

I suppose as a temporary solution, one could change the position of the marker in the file (for example, I have extended the transparent space in my PNG file so that it sits in the centre), but yes, I think this is certainly something that needs to be reviewed.

[wf9a5m75]

Thanks @jskidd3 for your help.

Although I've never added the anchor property for the icon option, but I will implement this in the next version.

[jskidd3]

Yes, my apologies, I didn't realise but pure coincidence was just giving me the impression the anchor was working for the icon, didn't realise it was the infowindow!. When will 1.0.12 be released? We have circular markers in our application also and this plays a key part. Can you make it so that if we do set an icon anchor, the rotation property makes the icon spin around the anchor point?

Thanks

[wf9a5m75]

@jskidd3 You can rotate the icon using marker.setRotation(degree) in the current version (v1.0.11)

[jskidd3]

Sure you can but its based around the bottom centre of the marker. Let's say for example I have a circle, if I set the anchor to the centre (which I can't do yet, I can only set the anchor of the infowindow), the marker should rotate around the centre point (the anchor), does that make sense or should I draw a diagram?

[wf9a5m75]

In your case, do you just need to the anchor property, don't you?

[jskidd3]

Isn't that just for the infowindow or does it effect the rotation of the icon as well?

[wf9a5m75]

The anchor of the icon property in the next version.

map.addMarker({
      'position': GOOGLE_TOKYO,
      'icon': {
        'url': 'www/images/google_tokyo_icon.png',
        'anchor': [10, 20]
      }
    });

[jskidd3]

Perfect, is it a possibility 1.0.12 will be released this weekend?

On 16 May 2014, at 22:14, Masashi Katsumata notifications@github.com wrote:

The anchor of the icon property in the next version.

map.addMarker({
'position': GOOGLE_TOKYO,
'icon': {
'url': 'www/images/google_tokyo_icon.png',
'anchor': [10, 20]
}
});
—
Reply to this email directly or view it on GitHub.

[wf9a5m75]

I'll make an effort as much as possible.

[jskidd3]

Cool thanks dude!

On 16 May 2014, at 23:18, Masashi Katsumata notifications@github.com wrote:

I'll make an effort as much as possible.

—
Reply to this email directly or view it on GitHub.

[wf9a5m75]

I released the plugin version 1.1.0 (old version name v1.0.12). Please uninstall the plugin, then install it again.

[nexorianus]

yes, I know... this is a really old issue, but any chance, that this property didn't make it into the documentation?
I can only find the infoWindowAnchor property in the Marker Docs