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?
 
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
 
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
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
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
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.