Implementing Google Maps Spiderfier

Question

I'm trying to implement https://github.com/jawj/OverlappingMarkerSpiderfier to handle multiple map markers that can occur in the exact same location. I'm using the below javascript to grab the map data from divs of class .marker and create the map. It's functioning and works great.

function initialize() {

function render_map( $el ) {

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

    // vars
    var args = {
        zoom        : 8,
        center      : new google.maps.LatLng(42.7086815, -84.559032),
        scrollwheel : false,
        mapTypeId   : google.maps.MapTypeId.ROADMAP
    };

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

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

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

        add_marker( $(this), map );

    });
    var padder = document.createElement('div');
    padder.style.height = '100px';
    padder.style.width = '100%';
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(padder);
    // center map
    center_map( map );

}

function add_marker( $marker, map ) {

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

    // create marker

    var marker = new google.maps.Marker({
        position    : latlng,
        map         : map

    });

    // 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 );
            map.setCenter(marker.getPosition());

        });
    }

}    

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() );

    }
    else if( map.markers.length == 0 )
    {
        // set center of map
        map.setCenter( 42.7086815, -84.559032 );


    }
    else
    {
        // fit to bounds
        map.fitBounds( bounds );

    }
    google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
      if (this.getZoom() > 8) {
        this.setZoom(8);
      }
});
}

$(document).ready(function(){

    $('#acf-map').each(function(){

        render_map( $(this) );

    });

});

}

However, when I try to integrate what I have with Spiderfier js, the map markers are not showing up. This is my sorry attempt at merging the js. Any idea of how I can use Spiderfier but still grab the content from the .marker divs?

function initialize() {

function render_map( $el ) {

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

    // vars
    var args = {
        zoom        : 8,
        center      : new google.maps.LatLng(42.7086815, -84.559032),
        scrollwheel : false,
        mapTypeId   : google.maps.MapTypeId.ROADMAP
    };

    // create map               
    var map = new google.maps.Map( $el[0], args);
    var oms = new OverlappingMarkerSpiderfier(map);
    var iw = new google.maps.InfoWindow();
        oms.addListener('click', function(marker, event) {
          iw.setContent(marker.desc);
          iw.open(map, marker);
        });
    oms.addListener('spiderfy', function(markers) {
      iw.close();
    });

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

    // create marker

    var marker = new google.maps.Marker({
        position    : latlng,
        map         : map

    });
    marker.desc = $marker.html();
    oms.addMarker(marker);


    var padder = document.createElement('div');
    padder.style.height = '100px';
    padder.style.width = '100%';
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(padder);
    // center map
    center_map( map );

}


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() );

    }
    else if( map.markers.length == 0 )
    {
        // set center of map
        map.setCenter( 42.7086815, -84.559032 );


    }
    else
    {
        // fit to bounds
        map.fitBounds( bounds );

    }
    google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
      if (this.getZoom() > 8) {
        this.setZoom(8);
      }
});
}


$(document).ready(function(){

    $('#acf-map').each(function(){

        render_map( $(this) );

    });

});

}

Answer 1

Below is the correctly integrated javascript in case it's helpful to anyone else.

function initialize() {

/*
*  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 render_map( $el ) {

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

    // vars
    var args = {
        zoom        : 8,
        center      : new google.maps.LatLng(42.7086815, -84.559032),
        scrollwheel : false,
        mapTypeId   : google.maps.MapTypeId.ROADMAP
    };

    // create map               
    var map = new google.maps.Map( $el[0], args);
    var oms = new OverlappingMarkerSpiderfier(map);
    var iw = new google.maps.InfoWindow();
    oms.addListener('click', function(marker, event) {
        iw.setContent(marker.desc);
        iw.open(map, marker);
    });
    oms.addListener('spiderfy', function(markers) {
        iw.close();
    });

    $markers.each(function(index, item) {
        // create latlng
        var latlng = new google.maps.LatLng( $(item).attr('data-lat'), $(item).attr('data-lng') );
        // create marker
        var iconBase = '/images/';
        var marker = new google.maps.Marker({
            position    : latlng,
            map         : map,
            icon: iconBase + 'marker.png'
        });
        marker.desc = $(item).html();
        oms.addMarker(marker);
    });

    var padder = document.createElement('div');
    padder.style.height = '100px';
    padder.style.width = '100%';
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(padder);

    // center map
    center_map(map);
}



/*
*  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() );

    }
    else if( map.markers.length == 0 )
    {
        // set center of map
        map.setCenter( 42.7086815, -84.559032 );


    }
    else
    {
        // fit to bounds
        map.fitBounds( bounds );

    }
    google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
      if (this.getZoom() > 8) {
        this.setZoom(8);
      }
    });


}

/*
*  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
*/

$(document).ready(function(){

    $('#acf-map').each(function(){

        render_map( $(this) );

    });

});

}