Get size of icon

405 views
Skip to first unread message

Peter van der Zee

unread,
Nov 19, 2010, 3:26:37 PM11/19/10
to Google Maps JavaScript API v3
I'm trying to port my marker cluster script ( http://cm.qfox.nl ) from
v2 to v3 but it seems that's pretty much impossible because the api
doesn't expose enough details.

The biggest problem seems to be getting the actual size of the marker
and the anchor of the marker. I've searched the group, but can't
really find related posts (which was surprising to me).

Basically I need to know precisely what area of the map is covered by
a given marker in order to compare these regions to each other.
However, there are is no api to give me this information.

So this is what I have right now...

An icon can be set by .setIcon* (or implicitly through the
constructor, but I'm going to assume both ways lead to the same
result). This method accepts a string or a MarkerImage*. The .getIcon
method of a marker returns whatever you give it, it is not normalized
(quite annoying). The .getShape method is not set implicitly, so it's
useless in this case.

Ok, so .getIcon returns a string (the url of the icon) or the
MarkerImage. If it's the url, you can load it in an Image and get the
width/height after it's loaded. Easy enough.

If it returns the MarkerImage, things get hairy. That object should
have a coords property. I checked, it's not set. It does have five
properties. Four of them are scrambled by the minifiers, but their
values clearly show that they are the properties as given in the
constructor. The other one is obviously anchor, which is undocumented
but also unscrambled (which is hardly coincidental). Maybe it's just
missing from the documentation, who knows. Of the five properties, one
is type string. Two are points and two are sizes. Since anchor is a
point, you can also infer the origin, which is "point"less.

So since I can get at least the url from MarkerImage, albeit through a
hack, I can reasonably reliably get the size of the image used for the
marker. It's not the end-goal, but at least it's something.

So my question is, am I overlooking anything here? I'd like to get the
anchor and final size of the image used for a marker when a
MarkerImage is supplied for an icon, rather than a regular string. As
it stands now, that seems impossible. Any help?

But as it stands it seems impossible to create a generic cluster
manager. You can make it safe for when .getIcon returns a string, but
when it doesn't you're pretty much screwed.

* Marker: http://code.google.com/apis/maps/documentation/javascript/reference.html#Marker
* MarkerImage: http://code.google.com/apis/maps/documentation/javascript/reference.html#MarkerImage

CroNiX

unread,
Nov 19, 2010, 5:18:19 PM11/19/10
to Google Maps JavaScript API v3
Is it the pixel coordinates you are after for the anchor location?
This might help.

var containerHelper = null;//set in global space

//call this somewhere in your map init function to create an overlay
that you can use to translate the coordinates
function init_helper_container(){
containerHelper = null;
containerHelper = new google.maps.OverlayView();
containerHelper.setMap(map);
containerHelper.draw = function () {
if (!this.ready) {
this.ready = true;
google.maps.event.trigger(this, 'ready');
}
};
}

...

google.maps.event.addListener(marker, 'click', function() {
var markerLoc =
containerHelper.getProjection().fromLatLngToContainerPixel(this.getPosition());
alert('x=' + markerLoc.x + ', y=' + markerLoc.y);
});

On Nov 19, 12:26 pm, Peter van der Zee <qfo...@gmail.com> wrote:
> I'm trying to port my marker cluster script (http://cm.qfox.nl) from
> * Marker:http://code.google.com/apis/maps/documentation/javascript/reference.h...
> * MarkerImage:http://code.google.com/apis/maps/documentation/javascript/reference.h...

CroNiX

unread,
Nov 19, 2010, 5:47:28 PM11/19/10
to Google Maps JavaScript API v3
This is an undocumented marker property I was just playing with
(pixelBounds), but it seems to be what you want...but its
undocumented...so unofficial...ugh. But the marker is supplying the
correct properties but no "official" method to retrieve them.

google.maps.event.addListener(marker, 'click', function() {
var pb = this.pixelBounds;
var iconX = Math.abs(pb.l) + Math.abs(pb.q);
var iconY = Math.abs(pb.n) + Math.abs(pb.o);
alert('Width: ' + iconX + ', Height: ' + iconY);
});

Peter van der Zee

unread,
Nov 20, 2010, 3:34:54 AM11/20/10
to Google Maps JavaScript API v3
Hm, that is interesting indeed. However, that would mean that I'd need
an event fired for every marker. But maybe there's another way of
getting to that object/information... It's weird that they (obviously)
have the information but don't expose it... Thanks!

sgiddings

unread,
Nov 20, 2010, 3:48:15 AM11/20/10
to Google Maps JavaScript API v3
You are quite right, the pixelBounds object is the one you want.
However, even though it is mentioned in the documentation, it is not
documented and the objects property names are not fixed.

I have opened an issue to try to get this documented.
If you add a comment, the google maps team might document it - making
life easier for us.
You can find it here -
http://code.google.com/p/gmaps-api-issues/issues/detail?id=2860

- Simon

sgiddings

unread,
Nov 20, 2010, 3:49:59 AM11/20/10
to Google Maps JavaScript API v3
You are quite right, the pixelBounds object is the one you want.
However, even though it is mentioned in the documentation, it is not
documented and the objects property names are not fixed.

I have opened an issue to try to get this documented.
If you add a comment, the google maps team might document it - making
life easier for us.
You can find it here -
http://code.google.com/p/gmaps-api-issues/issues/detail?id=2860

- Simon

CroNiX

unread,
Nov 20, 2010, 3:59:18 PM11/20/10
to Google Maps JavaScript API v3
I don't know why you would need to fire an event? I just used an
event to demo it. These properties and methods are part of each
marker object.

Normally I imagine you would be looping through an array of markers,
getting its icon size, comparing it to the others around detecting for
overlap, etc.

You could just extend the Markers object and add a method for easy
retrieval:

//Note: this will break should google change these undocumented
properties of pixelBounds
google.maps.Marker.prototype.getIconSize = function() {
var pb = this.pixelBounds;
return {
height: Math.abs(pb.n) + Math.abs(pb.o),
width: Math.abs(pb.l) + Math.abs(pb.q)
};
}

var iconSize = marker.getIconSize();
console.log('Height: ' + iconSize.height + ', Width: ' +
iconSize.width);

Peter van der Zee

unread,
Nov 21, 2010, 4:08:24 AM11/21/10
to Google Maps JavaScript API v3
On Nov 20, 9:59 pm, CroNiX <cronix...@gmail.com> wrote:
> I don't know why you would need to fire an event?  I just used an
> event to demo it.  These properties and methods are part of each
> marker object.

My bad. Got confused there. Thanks :)
I'm gonna go with pixelBounds and a notice of warning. The alternative
is to just let the user tell the script the size of the marker uppon
adding it to the manager.

- peter
Reply all
Reply to author
Forward
0 new messages