Skip to content

Instantly share code, notes, and snippets.

@locii
Created June 7, 2016 12:00
Show Gist options
  • Save locii/3a2646b8abea9570438c03d49f1f97f7 to your computer and use it in GitHub Desktop.
Save locii/3a2646b8abea9570438c03d49f1f97f7 to your computer and use it in GitHub Desktop.
Loops through <address> tags on a page and renders a map with markers to the #map div
function initialise() {
var myLatlng = new google.maps.LatLng(5.376964, 100.399383); // Add the coordinates
var mapOptions = {
zoom: 5, // The initial zoom level when your map loads (0-20)
zoomControl:true, // Set to true if using zoomControlOptions below, or false to remove all zoom controls.
zoomControlOptions: {
style:google.maps.ZoomControlStyle.DEFAULT // Change to SMALL to force just the + and - buttons.
},
center: new google.maps.LatLng(48.2082, 16.3738),
mapTypeId: google.maps.MapTypeId.ROADMAP, // Set the type of Map
scrollwheel: false, // Disable Mouse Scroll zooming (Essential for responsive sites!)
// All of the below are set to true by default, so simply remove if set to true:
panControl:false, // Set to false to disable
mapTypeControl:false, // Disable Map/Satellite switch
scaleControl:false, // Set to false to hide scale
streetViewControl:false, // Set to disable to hide street view
overviewMapControl:false, // Set to false to remove overview control
rotateControl:false // Set to false to disable rotate control
}
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); // Render our map within the empty div
$('address').each(function(i) {
var text = $(this).attr('data-address');
var link = $(this).attr('data-link');
var title = $(this).attr('data-title');
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+text+'&sensor=false', null, function (data) {
var p = data.results[0].geometry.location;
var myLatlng = new google.maps.LatLng(p.lat, p.lng); // Add the coordinates
var marker = new google.maps.Marker({ // Set the marker
position: myLatlng, // Position marker to coordinates
map: map, // assign the market to our map variable
title: title// Marker ALT Text
});
// google.maps.event.addListener(marker, 'click', function() { // Add a Click Listener to our marker
// window.location='http://www.snowdonrailway.co.uk/shop_and_cafe.php'; // URL to Link Marker to (i.e Google Places Listing)
// });
var infowindow = new google.maps.InfoWindow({ // Create a new InfoWindow
content: '<a href="'+link+'">' + title + '</a><br /><p>'+text+'</p>' // HTML contents of the InfoWindow
});
google.maps.event.addListener(marker, 'click', function() { // Add a Click Listener to our marker
infowindow.open(map,marker); // Open our InfoWindow
});
google.maps.event.addDomListener(window, 'resize', function() { map.setCenter(myLatlng); }); // Keeps the Pin Central when resizing the browser on responsive sites
});
});
}
google.maps.event.addDomListener(window, 'load', initialise); // Execute our 'initialise' function once the page has loaded.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment