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

ITNCAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Have you tried this outside of the fiddle environment?
0
ITNCAuthor Commented:
I'm sorry I am not following that question, can you clarify?
0
Julian HansenCommented:
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?
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

ITNCAuthor Commented:
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
0
Julian HansenCommented:
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.
0
Julian HansenCommented:
I have looked at your code but there is not enough here to figure out what the question is - can you provide more information.
0
ITNCAuthor Commented:
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.
0
Julian HansenCommented:
I have not tested this but based on the docs and your code it would seem you would need to do something like this

// CREATE INSTANCE OF OMS
// map IS YOUR MAP INSTANCE
var oms = new OverlappingMarkerSpiderfier(map);

// SETUP GLOBAL CLICK LISTENER
var iw = new gm.InfoWindow();
oms.addListener('click', function(marker, event) {
  iw.setContent(marker.desc);
  iw.open(map, marker);
});

// CREATE THE MARKERS
$.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) {
    // ADD THIS TO YOUR ORIGINAL CODE
    // THIS LINE IS SO THE GLOBAL LISTENER CAN FIND YOUR DESCRIPTION
    marker.desc = 'UUID: ' + val.caps_inventory_uuid + '<br /> Last Update: ' + val.timestamp + '';
    
    // ADD MARKER TO oms INSTANCE
    oms.addMarker(marker); 

    // NOT SURE WHY YOU ARE DOING THIS ... PER MARKER?
    map.set('zoom', 5);
    map.setCenter(new google.maps.LatLng( val.latitude,val.longitude));
  });
});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ITNCAuthor Commented:
OK thanks! I will plug this in and do some testing then get back with you.
0
ITNCAuthor Commented:
This worked great. I really appreciate your time and assistance.
0
Julian HansenCommented:
You are most welcome - good luck with your project.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.