0

I am relatively new to jQuery and working with APIs in general. I am trying to make omsOverlapping Marker Spiderifier work with Google Maps v3. I am using this to solve the issue of having multiple pointers in the exact same location.

The existing code creates a map instance and adds markers to it. Everything seems to be working fine, with no errors, but the markers just wont spiderify. I have no idea why. Any help pointing out what I'm doing wrong would be much appreciated.

What's more, this code dates back to 2013. Is there a better, more user friendly way to approach the issue mentioned above?

Here is my jsfiddle: https://jsfiddle.net/LaurenceLee/7p3mn92m/

(function($) {

/*
*  render_map
*
*  This function will render a Google Map onto the selected jQuery element
*
*  @type    function
*  @date    8/11/2013
*  @since   4.3.0
*
*  @param   $el (jQuery element)
*  @return  n/a
*/

function new_map( $el ) {

// find markers
var $markers = $('.marker');

// vars
var args = {
    zoom        : 4,
    center      : new google.maps.LatLng(37.096, -113.568),
    scrollwheel : false,
    mapTypeId   : google.maps.MapTypeId.ROADMAP,
      mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            },
            navigationControl: true,
            scrollwheel: true,
    streetViewControl: true
};

// create map               
var map = new google.maps.Map( $el[0], args);

// init Overlapping Marker Spiderfier and global listener (oms)
    var oms = new OverlappingMarkerSpiderfier(map, {markersWontMove: true, markersWontHide: true, keepSpiderfied: true, nearbyDistance: 10, legWeight: 5});
var iw = new google.maps.InfoWindow();
oms.addListener('click', function(marker, event) {
  iw.setContent(marker.desc);
  iw.setLatLng(marker.getLatLng());
  iw.open(map, marker);
});
oms.addListener('spiderfy', function(marker, event) {
  iw.close(map, marker);
});

// add a markers reference
map.markers = [];

// add markers
$markers.each(function(){
    add_marker( $(this), map );
    // push to oms
    oms.addMarker( $(this) );
});

// center map
center_map(map);
// return
return map;

}

/*
*  add_marker
*
*  This function will add a marker to the selected Google Map
*
*  @type        function
*  @date        8/11/2013
*  @since       4.3.0
*
*  @param       $marker (jQuery element)
*  @param       map (Google Map object)
*  @return      n/a
*/

function add_marker( $marker, map ) {

// var
var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
var icon = $marker.attr('data-icon');

// create marker
var marker = new google.maps.Marker({
    position    : latlng,
    map         : map,
    icon        : icon
});

// add to array
map.markers.push( marker );

// if marker contains HTML, add it to an infoWindow
if( $marker.html() )
{
    // create info window
    var infowindow = new google.maps.InfoWindow({
        content     : $marker.html(),
    });
    // show info window when marker is clicked
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open( map, marker );
    });
}

}

/*
*  center_map
*
*  This function will center the map, showing all markers attached to this map
*
*  @type    function
*  @date    8/11/2013
*  @since   4.3.0
*
*  @param   map (Google Map object)
*  @return  n/a
*/

function center_map(map) {

// vars
var bounds = new google.maps.LatLngBounds();

// loop through all markers and create bounds
$.each( map.markers, function( i, marker ){
    var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
    bounds.extend( latlng );
});
// only 1 marker?
if( map.markers.length == 1 )
{
    // set center of map
    map.setCenter( bounds.getCenter() );
}
// no markers?
else if( map.markers.length == 0 )
{
    // set center of map
    map.setCenter( 37.096, -113.568 ); 
}
else
{
    // fit to bounds
    map.fitBounds( bounds );
}

}

/*
*  document ready
*
*  This function will render each map when the document is ready (page has loaded)
*
*  @type    function
*  @date    8/11/2013
*  @since   5.0.0
*
*  @param   n/a
*  @return  n/a
*/

// global var
var map = null;
$(document).ready(function(){

    $('#map_container').each(function(){
        //render_map( $(this) );
        map = new_map( $(this) );
    });

});

})(jQuery);
1

1 Answer 1

1

The Overlapping Marker Spiderfier doesn't know what to do with $(this) (which is a JQuery thing). You need to pass it a google.maps.Marker object.

One option is to return the marker from the add_marker function.

function add_marker( $marker, map ) {

    // var
    var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
    var icon = $marker.attr('data-icon');

    // create marker
    var marker = new google.maps.Marker({
        position    : latlng,
        map         : map,
        icon        : icon
    });

    // add to array
    map.markers.push( marker );

    // if marker contains HTML, add it to an infoWindow
    if( $marker.html() )
    {
        // create info window
        var infowindow = new google.maps.InfoWindow({
            content     : $marker.html(),
        });
        // show info window when marker is clicked
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open( map, marker );
        });
    }
    return marker;
}

Then pass that value into the spiderfier:

// add markers
$markers.each(function(){

    // push to oms
    oms.addMarker(add_marker( $(this), map ));
});

proof of concept fiddle

code snippet:

(function($) {

  /*
   *  render_map
   *
   *  This function will render a Google Map onto the selected jQuery element
   *
   *  @type    function
   *  @date    8/11/2013
   *  @since   4.3.0
   *
   *  @param   $el (jQuery element)
   *  @return  n/a
   */

  function new_map($el) {

    // find markers
    var $markers = $('.marker');

    // vars
    var args = {
      zoom: 4,
      center: new google.maps.LatLng(37.096, -113.568),
      scrollwheel: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
      },
      navigationControl: true,
      scrollwheel: true,
      streetViewControl: true
    };

    // create map               
    var map = new google.maps.Map($el[0], args);

    // init Overlapping Marker Spiderfier and global listener (oms)
    var oms = new OverlappingMarkerSpiderfier(map, {
      markersWontMove: true,
      markersWontHide: true,
      keepSpiderfied: true,
      nearbyDistance: 10,
      legWeight: 5
    });
    var iw = new google.maps.InfoWindow();
    oms.addListener('click', function(marker, event) {
      iw.setContent(marker.desc);
      iw.setLatLng(marker.getLatLng());
      iw.open(map, marker);
    });
    oms.addListener('spiderfy', function(marker, event) {
      iw.close(map, marker);
    });

    // add a markers reference
    map.markers = [];

    // add markers
    $markers.each(function() {

      // push to oms
      oms.addMarker(add_marker($(this), map));
    });

    // center map
    center_map(map);
    // return
    return map;

  }

  /*
   *  add_marker
   *
   *  This function will add a marker to the selected Google Map
   *
   *  @type        function
   *  @date        8/11/2013
   *  @since       4.3.0
   *
   *  @param       $marker (jQuery element)
   *  @param       map (Google Map object)
   *  @return      n/a
   */

  function add_marker($marker, map) {

    // var
    var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng'));
    var icon = $marker.attr('data-icon');

    // create marker
    var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      icon: icon
    });

    // add to array
    map.markers.push(marker);

    // if marker contains HTML, add it to an infoWindow
    if ($marker.html()) {
      // create info window
      var infowindow = new google.maps.InfoWindow({
        content: $marker.html(),
      });
      // show info window when marker is clicked
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
      });
    }
    return marker;
  }

  /*
   *  center_map
   *
   *  This function will center the map, showing all markers attached to this map
   *
   *  @type    function
   *  @date    8/11/2013
   *  @since   4.3.0
   *
   *  @param   map (Google Map object)
   *  @return  n/a
   */

  function center_map(map) {

    // vars
    var bounds = new google.maps.LatLngBounds();

    // loop through all markers and create bounds
    $.each(map.markers, function(i, marker) {
      var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng());
      bounds.extend(latlng);
    });
    // only 1 marker?
    if (map.markers.length == 1) {
      // set center of map
      map.setCenter(bounds.getCenter());
    }
    // no markers?
    else if (map.markers.length == 0) {
      // set center of map
      map.setCenter(37.096, -113.568);
    } else {
      // fit to bounds
      map.fitBounds(bounds);
    }

  }

  /*
   *  document ready
   *
   *  This function will render each map when the document is ready (page has loaded)
   *
   *  @type    function
   *  @date    8/11/2013
   *  @since   5.0.0
   *
   *  @param   n/a
   *  @return  n/a
   */

  // global var
  var map = null;
  $(document).ready(function() {

    $('#map_container').each(function() {
      //render_map( $(this) );
      map = new_map($(this));
    });

  });

})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://eventida.com/assets/plugins/oms.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div id="map_container" class="gmap" style="height:250px; margin-bottom: 30px;">
</div>

<div class="marker" data-lat="37.096" data-lng="-113.568" data-icon="https://eventida.com/images/e2_map_marker.png">
  Location One
</div>

<div class="marker" data-lat="37.096" data-lng="-113.568" data-icon="https://eventida.com/images/e2_map_marker.png">
  Location Two
</div>

<div class="marker" data-lat="37.096" data-lng="-113.568" data-icon="https://eventida.com/images/e2_map_marker.png">
  Location Three
</div>

1
  • Awesome answer, thanks! With some help and further fiddling, the final solution is in this fiddle. It allows for infowindows and sets a better zoom level if there is only one marker. jsfiddle.net/LaurenceLee/779v0459 May 20, 2016 at 16:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.