how do I increase the clickable area of an icon in google maps

Question

We are trying to increase the clickable area of a marker on a google map. The reason we want to do that clicking on the icon sometimes misses the anchor point. We rather not reduce the size of the icon size

We are assuming that one of the properties of the GIcon objects is what we need to change and tried changing the iconAnchor and and infoWindowAnchor property of the GIcon but that doesnt seem to work.

anyone point us in the right direction?

Answer 1

Reference: http://code.google.com/apis/maps/documentation/reference.html#GIcon

iconAnchor and infoWindowAnchor set where in the image the actual point on the map and the info window are respectively.

If you want a bigger clickable area, you may be able to do something with the imageMap property for non-IE (I've never tried). However, I think your best bet would be to define a custom GIcon that uses a larger image(padded with transparent space. Unfortunately, that's quite a bit of a hack -- maybe someone else knows of a better way.

Answer 2

In the end, we reduced the size of the image. We had not noticed the recommended graphic size was 19x19

Answer 3

I know its been a while but I had the same issue, lets say your icon is 51 pixels wide and 32 pixels tall:

var baseIcon = new GIcon(G_DEFAULT_ICON);
baseIcon.imageMap = [0,0 , 51,0, 51,32 , 0,32];

Basically you're just inputting x,y co-ordinates

Answer 4

If you have different icons, it's a good idea to create the imageMap dynamically:

function getImgSize(imgSrc) {
   var newImg = new Image();
   newImg.src = imgSrc;
   var height = newImg.height;
   var width = newImg.width;
   return [height,width];
}

var icon = new GIcon(G_DEFAULT_ICON,iconUrl);
var iconSize = getImgSize(iconUrl);
icon.iconSize = new GSize(iconSize[1], iconSize[0]); // set icon size
icon.imageMap = [0,0, icon.iconSize.width,0, icon.iconSize.width,icon.iconSize.height,0,icon.iconSize.height]; // set click area
icon.shadowSize = new GSize(0, 0); // disable shadow