Overlapping markers that occupy the exact same location on the map?

4,300 views
Skip to first unread message

Brandon

unread,
Oct 19, 2009, 12:53:54 AM10/19/09
to Google Maps JavaScript API v3
Firing off first: http://noblepagan.com/vbusermap.php

Alright, that's out of the way, here's my question:

Each of the markers are dynamically created off the database of
users. The location is created via one of two methods, either the
user in their control panel adds a city, state, and country into their
profile and we geocode the location from that, or (in the event those
fields are empty) we geocode based off their IP location.

Now, obviously I could have them input their physical address, but
that would cause so much user privacy concerns that I just don't want
to deal with that headache. Our users are content with just the city
being displayed. That said, this obviously causes an issue, where
there are multiple markers on the exact same point. The problem is
that only one marker can be physically clicked on for the information.

Is there a way for the markers to be offset for each iteration of the
marks so that folks can actually click them? Is there a way to
overlap them and still have all of them be interactive?

I have looking into z-indexing the markers, but come up with the same
issue.

Thank you in advance for any assistance that can be given on this.

Brandon

Brandon

unread,
Oct 19, 2009, 1:08:59 AM10/19/09
to Google Maps JavaScript API v3
The best example would be to zoom down to Tacoma, Washington. There
is a marker with a darker shadow than the rest. That's because
there's something like 8 markers there, but one can only see / click
the topmost marker.

Brian Casey

unread,
Oct 19, 2009, 1:55:40 AM10/19/09
to google-map...@googlegroups.com
I added a right-click handler to my markers that changes the z-index
so that the top-most marker goes to the bottom of the stack. Even if
the markers are stacked up tightly, enough right-clicks will bring
each of them to the top - eventually.

> --~--~---------~--~----~------------~-------~--~----~

--
Brian Casey
b...@goption.com

Esa

unread,
Oct 19, 2009, 6:09:02 AM10/19/09
to Google Maps JavaScript API v3
I don't see a map at all. I think it is this condition:

if (google.loader.ClientLocation)

that prevents the map to be constructed when ClientLocation returns
null. That is not very unusual.

Brandon

unread,
Oct 19, 2009, 8:20:04 AM10/19/09
to Google Maps JavaScript API v3
Esa:
These are static markers on the map, I'm not using the client's IP to
display the map or the markers, the markers are coming from my
database directly. The map itself works fine for me on the browsers I
have tested it on thus far, the only issue is the markers that are
stacked not being able to be seen.

Brian:
That sounds like a fairly easy fix, as I'm not a javascripter at all
(in the process of learning), would you mind sharing the handler?

Esa

unread,
Oct 19, 2009, 10:42:15 AM10/19/09
to Google Maps JavaScript API v3


On Oct 19, 3:20 pm, Brandon <bubbabri...@gmail.com> wrote:
> Esa:
> These are static markers on the map, I'm not using the client's IP to
> display the map or the markers, the markers are coming from my
> database directly.  The map itself works fine for me on the browsers I
> have tested it on thus far, the only issue is the markers that are
> stacked not being able to be seen.


It does not depend on browser. It depends on connection.

According to documentation google.loader.ClientLocation returns null
if IP cannot be located. In my case it is null and there is no map at
all.

Brandon

unread,
Oct 19, 2009, 2:59:08 PM10/19/09
to Google Maps JavaScript API v3
I see what you are saying now, so how would I go about fixing this
seeing as I have no control over whether google can locate an IP or
not?

Esa

unread,
Oct 19, 2009, 9:37:15 PM10/19/09
to Google Maps JavaScript API v3
Now you have:

function initialize(){
if (google.loader.ClientLocation){
etc..

Nothing happens inside initialize() if ClientLocation is null.

If you want to use the IP location service, you can pan map to the
resolved location:

if (google.loader.ClientLocation){
var lat = google.loader.ClientLocation.latitude;
var lng = google.loader.ClientLocation.longitude;
var geo = new google.maps.LatLng(lat, lng);
map.panTo(geo);
}

Put that after you created the map inside initialize(), e.g. just
before

var contentString1

Brandon

unread,
Oct 20, 2009, 10:21:08 AM10/20/09
to Google Maps JavaScript API v3
well jack me sideways lol. Thank you kindly :D. I didn't even
realize that was an issue, thank you for the pan idea as well :D.

Brandon

unread,
Oct 20, 2009, 10:28:45 AM10/20/09
to Google Maps JavaScript API v3
I think I've come up with a fairly easy way of handling the overlap
issue though. Since I'm pulling the marker locations from the
database, it was just as easy for me to add all the markers from one
city and squish the information all into one info-panel.

Thoughts?
Reply all
Reply to author
Forward
0 new messages