Positioning custom markers on a Google map

Question

I have the following Google Map test application: http://dev.driz.co.uk/googlemap/

As you can see, I use geolocation to show your (user) position on the map, and then some JSON data to fill the map with other markers.

Note: depending on where you are in the world, you may not see contacts (they are located in the UK near Huddersfield), if you zoom out, you should see them.

I am having the following issues:

---

1.) All markers have the same name, so I assume that somewhere in the for loop at the bottom of the page I made a mistake ... Not sure what?

Corrected in the answers below.

---

2.) Markers have different matching problems due to the z-index, and also because some markers have the same coordinates. Is it possible to make the markers shift a couple of pixels per loop so that they do not overlap, and the z index automatically increases by each cycle so that they are higher than the previous marker.

You need to make sure that when the user hovers the marker, it has a higher z index to make it sit on top ... If that makes sense? So in the hover event, I need to get the last offset, and then add to it to make it the highest! But how to change the zindex marker to freeze?

---

3). The last thing (and probably the hardest one) is that the tooltips are not located the same when they move to the right side of the marker when moving the map. Any ideas to improve this? They get worse with JSON-based markers and slide off the map.

---

Can someone help me solve these problems?

thanks

Answer 1

I don’t know if this will work, but it will follow the pattern of the link that I shared, maybe something like this ....

function doToolTip(item) { return function () { mTooltip = new Tooltip('<span class="name">' + item.User.Profile.firstname + ' asked:</span> <span class="title">' + item.Post.title + '</span>'); mTooltip.open(this.getMap(), this); }; } 

... and this is your main code. I think that "item needs" is initialized outside the scope of the loop (but I could be wrong)

  //other code etc... var item; for (var i = 0; i < data.length; i++) { item = data[i]; //other code etc.... google.maps.event.addListener(marker, 'mouseover', doToolTip(item)); //other code etc... } 

OK I guess here, since I don't have a local copy of the code, but it seems you need to change the z-index when you execute the draw function ...

  //code fragment... // need to force redraw otherwise it will decide to draw after we show the Tooltip $(this).css('z-index', 9999); this.draw(); // show tooltip 

As for the position of the tooltip, you will have to experiment with the drawing function, as it seems to calculate the position from the marker. It’s best to work out a position not from the coordinates of the google map, but from the actual position on the page - I think the culprits are:

  pos = this.getProjection().fromLatLngToDivPixel(this.get('position')); // top offset top = pos.y - this.getAnchorHeight() / 2 - this.wdiv.outerHeight() / 2; // left offset if (this.getMap().getCenter().lng() > this.get('position').lng()) { left = pos.x + this.wdiv.outerWidth(); } else { left = pos.x - this.wdiv.outerWidth(); } // window position this.wdiv.css('top', top); this.wdiv.css('left', left); 

If positioning is constantly off, you can simply apply the correction to the upper and left values, if it becomes more difficult, you will have to change the algorithm.