Skip to content

Instantly share code, notes, and snippets.

@archfizz
Last active December 14, 2015 12:58
Show Gist options
  • Save archfizz/5089626 to your computer and use it in GitHub Desktop.
Save archfizz/5089626 to your computer and use it in GitHub Desktop.
Just an example of adding Google Maps to webpage with markers (no jQuery required)
function initializeMaps() {
var GOOGLE_API_KEY = "";
var location = "Bristol";
var country = "UK";
var geocoder = new google.maps.Geocoder();
var markerBounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById( "map_canvas" ), {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
geocoder.geocode({
'address': location + ", " + country
}, function ( results, status ) {
if ( status == google.maps.GeocoderStatus.OK ) {
console.log( "centering map on given location" );
console.log( results[0].geometry.location );
map.setCenter( results[0].geometry.location );
} else {
map.setCenter( new google.maps.LatLng( 51.5137379,-0.1390374 ));
map.setZoom(5);
}
});
var addressArray = new Array(
'BS8+1TH', // university
'BS48+3DY', // airport
'BS1+5TJ' // cathedral
);
for ( var i = addressArray.length; i > 0; i-- ) {
geocoder.geocode({
'address': addressArray[i]
}, function ( results, status ) {
if ( status == google.maps.GeocoderStatus.OK ) {
console.log( "adding markers" );
console.log( results[0].geometry.location );
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: 'http://maps.google.com/mapfiles/ms/icons/purple-dot.png',
animation: google.maps.Animation.DROP
});
markerBounds.extend( results[0].geometry.location );
map.fitBounds( markerBounds );
}
});
}
}
function loadGoogleMaps() {
var script = document.createElement( "script" );
script.type = "text/javascript";
script.src = "//maps.googleapis.com/maps/api/js?key=" + GOOGLE_API_KEY + "&sensor=true&callback=initializeMaps";
document.body.appendChild( script );
}
if ( window.addEventListener ) {
window.addEventListener( 'load', loadGoogleMaps, false );
} else if ( window.attachEvent ) {
window.attachEvent( 'onload', loadGoogleMaps );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment