Friday, November 2, 2007

Google Maps GIcon imageMap Property

Been fooling around with Google Maps API lately. When using custom markers on the maps, you should specify the imageMap property, so that the markers are still clickable even when beneath a "shadow," in Firefox. Yet the Google Maps API never describes the format in detail, simply stating it is "an array of integers representing the x/y coordinates of the image map we should use to specify the clickable part of the icon image in browsers other than Internet Explorer."

I searched high and low and could not find anyone that explained the format in more detail, but after studying the HTML image map formats, it became clearer that Google wants you to use the same format for this imagemap array as the "polygon" type of imagemap that HTML uses.

Specifically, your x,y pairs should denote points OUTLINING the area you want to be clickable. In very simple terms, if you have a square icon that is 8x8, and you wanted the entire square to be clickable, you would use an array of: [0,0, 7,0, 7,7, 0,7]. The first pair is the top/left corner, the second pair is top/right, the third is bottom/right, and the fourth is bottom/left.

They key is to think of your starting point, and traveling from point to point in order, encircling the area to make clickable for your GIcon (aka google.maps.Icon).

26 comments:

Jeremy said...

Thanks! This hint made my day! best regards from germany

jeremy

miki said...

thanks! very useful ;)

Max said...

And fixed another problem successfully!
Great! Thanks! ;-)

driedfruit said...

Thanks you! That information is ridiciously hard to find

Bernhard Schenkenfelder said...

Thank you very much! This blog post was very helpful.

DhilliPrasad said...

Thanks! This Was an outstanding post

-Dhilli

Anonymous said...

Muchas gracias!!! Tu comentario fue muy útil!!!

Martín.

Anonymous said...

damn man, you really rock, lol, that's works perfectly in FF, cool comment... have a nice day cheers from Mexico.. ;)

Anonymous said...

Thank you very much!
It was hard to find this simple definition of "Icon.imageMap".
Thank you very much!
:D

grosven said...

Awesome dude! THANKS!

Anonymous said...

Thanks for the note.

jwheat3300 said...

I just wanted to say thank, couldn't figure it out either. Google really should include an example!

Chiel said...

Thanks a lot :)

Luke Moynihan said...

awesome thanks! I couldnt see any info on Googles docs about this

kajs said...

the G_DEFAULT_ICON imageMap type is "poly". it uses more than just 4 points.

miha said...

Thank you from Slovenia.

Angus Purcell said...

This probably save me about an hour of mucking around! Thanks!
Angus

Dan said...

Thanks so much, I've been fighting with this for nearly a day thinking it had to do with PNG files and transparency.

Anonymous said...

Thanks.

Hiroyuki said...

Thank you! You saved my lots of time!

Diego said...

Wow! Gracias! I had a hard time trying to figure this out... thank you for your help!

Anonymous said...

Still up to date

Thanks a lot

Mark said...

Many, many thanks!!

local map marketing said...

very nice work going .

Headsets said...

I think the problem is fixed.

Anonymous said...

Thanks, this really helps me understand ImageMap property of icon. But I was wondering if any one know the alternative of it in v3 API of Google maps?