Positioning custom markers on a Google Map

Question

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

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

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

I am having the following issues:

---

1.) All the markers have the same titles, so I'm presuming that somewhere in the for loop at the bottom of the page I have made a mistake... Not sure what though?

Fixed in answers below.

---

2.) The markers have various overlapping issues due to the z-index and also because some of the markers have the same co-ordinates. Is it possible to make it so that markers offset themselves a couple pixels per loop so that they don't overlap, and the z-index automatically increases per loop so they are higher than the previous marker

Need to make it so that when a 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 latest offset and then add to that to make it the highest! But how do I alter the zindex of the marker on the hover?

---

3.) The final thing (and probably the most difficult) is that the tooltips are not equally positioned when moved to the right side of the marker when the map is moved. Any ideas to improve this? They get even worse with the JSON-based markers and slip off the map.

---

Can anyone help me out with these problems?

Thanks

Answer 1

I don't know if this will work, but its following the pattern of that link I shared, perhaps 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 'item needs' initialising 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'm guessing here, as I haven't got a local copy of the code, but, It looks like you need to change the z-index when you do 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

With regard to the position of the tooltip, you're going to have to experiment with the draw function, as it seems to calculate the position from the marker. It might be better to work out the position not from the google map coordinates 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 the positioning is consistently off, you could just apply a correction to the top and left values, if it's more complicated, you'll have to change the algorithm.