Google Maps With OMS

A native Google Maps instance with Overlapping Marker Spiderfier.

HTML

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.jsdelivr.net/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://eventida.com/assets/plugins/oms.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>

<div class="marker" data-lat="40.096" data-lng="-100.568" data-icon="https://eventida.com/images/e2_map_marker.png">
Location Four
</div>

<div class="marker" data-lat="40.096" data-lng="-100.568" data-icon="https://eventida.com/images/e2_map_marker.png">
Location Five
</div>

<div class="marker" data-lat="40.096" data-lng="-100.568" data-icon="https://eventida.com/images/e2_map_marker.png">
Location Six
</div>

JavaScript

(function($) {

  /*
   *  new_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');
    var bounds = new google.maps.LatLngBounds();

    // vars
    var args = {
      zoom: 4,
      center: new google.maps.LatLng(60.096, -120.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);
    });
    oms.addListener('spiderfy', function(markers) {
      for (var i = 0; i < $markers.length; i++) {
        //markers[i].setIcon(iconWithColor(spiderfiedColor));
        //markers[i].setShadow(null);
      }
      iw.close();
    });
    oms.addListener('unspiderfy', function(markers) {
      for (var i = 0; i < $markers.length; i++) {
        //markers[i].setIcon(iconWithColor(usualColor));
        //markers[i].setShadow(shadow);
      }
    });

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

    // add markers
    $markers.each(function() {
      //add_marker( $(this), map );
      // push to oms
      var _marker = Marker($(this), map, bounds);
      oms.addMarker(_marker);
      
      // only 1 marker?
 ...