Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JavaScript to display our map. Loop through list items, add markers to map.
( function( $ ) {
$( document ).ready( function() {
var myMapOptions = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map( document.getElementById( 'store-locations-map' ), myMapOptions );
var markerBounds = new google.maps.LatLngBounds();
// Loop though each list item and add marker to map
$( '#stores li' ).each( function() {
var location = {
latLng: new google.maps.LatLng(
$( this ).data( 'latitude' ),
$( this ).data( 'longitude' )
),
title: $( this ).find( 'h2' ).html()
};
new google.maps.Marker( {
map: map,
position: location.latLng,
title: location.title
} );
markerBounds.extend( location.latLng );
} );
// Set the viewport to contain our markers
map.fitBounds( markerBounds );
} );
} )( jQuery );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment