title: Google Maps + Overlapping Marker Spiderifier
body: <p>I am relatively new to jQuery and working with APIs in general. I am trying to make <a href="https://github.com/jawj/OverlappingMarkerSpiderfier" rel="nofollow">oms</a>Overlapping Marker Spiderifier work with Google Maps v3. I am using this to solve the issue of having multiple pointers in the exact same location.</p>
  
  <p>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.</p>
  
  <p>What's more, this code dates back to 2013. Is there a better, more user friendly way to approach the issue mentioned above?</p>
  
  <p>Here is my jsfiddle: <a href="https://jsfiddle.net/LaurenceLee/7p3mn92m/" rel="nofollow">https://jsfiddle.net/LaurenceLee/7p3mn92m/</a></p>
  
  <pre><code>(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);
  </code></pre>