asked on

Integrate OverlappingMarkerSpiderfier with Jquery UI Map

I am currently using Jquery UI Map to plot points on a map. I have that code working properly (the code will be posted below as it is currently) but I have an issue where I have multiple markers with the exact same coordinates.

I first tried implementing markerclusterer and that did group the markers but since they are still the exact same coordinates you cant drill down to see the individual markers.

I then found OverlappingMarkerSpiderfier and it seems to resolve this problem in the manner of which I prefer (I do not want to offset the markers). Now I just need help in integrating it into my existing code but I haven't been able to figure it out yet. Below is my code that plots the markers. It is inside an AJAX POST that sends some info to my PHP script which in turn outputs the required data as a JSON array.

                $.each(data, function (key, val) {
                    $('#map_canvas').gmap('addMarker', {
                        'position': '' + val.latitude + ',' + val.longitude + '',
                        'bounds': true,
                        'icon': '/images/marker-' + val.status + '.png'
                    }, function(map, marker) {
                        map.set('zoom', 5);
                        map.setCenter(new google.maps.LatLng( val.latitude,val.longitude));
                    }).click(function () {
                        $('#map_canvas').gmap('openInfoWindow', {'content': 'UUID: ' + val.caps_inventory_uuid + '<br /> Last Update: ' + val.timestamp + ''}, this);
                    });

                });

Open in new window

Julian Hansen

Have you tried this outside of the fiddle environment?

ITNC

ASKER

I'm sorry I am not following that question, can you clarify?

Julian Hansen

Have you tested your code in an environment other than fiddle.

The point of the question was to establish if this is something that might be caused by using fiddle or due to the implementation of code.

If you run your code against another web server - same results?

ITNC

ASKER

I have not run this code in a fiddle yet at all, it runs on my own web server. The code above works perfectly fine though. I just need to know how to integrate OverlappingMarkerSpiderfier

Julian Hansen

I am sorry - I must have posted to the wrong question I will take a look at your post again and get back to you.

Julian Hansen

I have looked at your code but there is not enough here to figure out what the question is - can you provide more information.

ITNC

ASKER

So the code I posted in the question receives a JSON array and looks at the following variables: latitude, longitude, status, and uuid. It then uses Jquery UI Map to plot the markers on the map. The problem I have with the code above is that when I have multiple markers with the same latitude and longitude the user can only see the last marker loaded with those coordinates.

I need to allow the user to see all the markers loaded regardless if they have the same coordinates or not. The only solution I have found so far for that issue is by using OverlappingMarkerSpiderfier.

So what I need help with is modifying my above code to use OverlappingMarkerSpiderfier to plot the markers so the user can see the entire set of markers with the same coordinates.

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ITNC

ASKER

OK thanks! I will plug this in and do some testing then get back with you.

ITNC

ASKER

This worked great. I really appreciate your time and assistance.

Julian Hansen

You are most welcome - good luck with your project.