Created
June 7, 2016 12:00
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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