google maps - InfoBox labels don't offset as expected -

google maps - InfoBox labels don't offset as expected -

i'm using infobox class utilities library of google maps v3 api making labels associated points.

now, goal have labels flow neatly around point, can see, isn't happening:

image

as can see infobox specification, pixeloffset takes size object ( https://developers.google.com/maps/documentation/javascript/reference#size ). docs don't whole lot values accepted. (i, of course, want negative values.)

first, have array offset values:

var arr = [ {x: -25, y: -25}, {x: -25, y: 0}, {x: -25, y: 25}, {x: 0, y: -25}, {x: 0, y: 0}, {x: 0, y: 25}, {x: 25, y: -25}, {x: 25, y: 0}, {x: 25, y: 25} ];

then, position:

var lat = 58.9030277; var lng = 5.7114827999999990;

finally, loop generates markers , offsets:

for (i = 0; < arr.length; i++) { marker = new google.maps.marker({ position: new google.maps.latlng(lat, lng) }); var myoptions = { content: '#' + (i + 1), disableautopan: true, pixeloffset: new google.maps.size(arr[i].x, arr[i].y), position: new google.maps.latlng(lat, lng) }; ib = new infobox(myoptions); }

does understand behavior? there improve way result?

the issue offsets assume wrong default-position of label, label not centered on position, it's placed below point(the middle of top-border of infobox placed @ position)

to exact result must know width/height of marker , of infoboxes(assuming both squares). furthermore width/height of marker must divisible 2 , width/height of label must divisible 3(first problem here, seems if width/height of infobox 25).

the first marker(top left) must placed at:

{x:-(widthorheightofinfobox*1.5), y:-((widthorheightofinfobox*1.5)+(widthorheightofmarker/2))}

for other markers add together widthorheightofinfobox x or y(depending on row/col)

assuming marker has width/height of 10 , infobox width/height of 24(remember, has divisble 3), should give desired result:

var arr = [ {x: -36, y: -41}, {x: -36, y: -17}, {x: -36, y: 7}, {x: -12, y: -41}, {x: -12, y: -17}, {x: -12, y: 7}, {x: 12, y: -41}, {x: 12, y: -17}, {x: 12, y: 7} ];

google-maps