Skip to content

Instantly share code, notes, and snippets.

@tan3
Last active November 25, 2015 20:29
Show Gist options
  • Save tan3/a527a7f12433d77bc7dc to your computer and use it in GitHub Desktop.
Save tan3/a527a7f12433d77bc7dc to your computer and use it in GitHub Desktop.
Javascript: Custom GoogleMaps
jQuery(function($) {
var script = document.createElement('script');
script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&callback=initialize";
document.body.appendChild(script);
});
function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var image = 'images/Marker_Apfel.png';
// Multiple Markers
var markers = [
['Kaiserkeller', 53.551153,9.957888,17],
['The Gooseclub', 53.555298,9.987798,17]
];
// Info Window Content
var infoWindowContent = [
['<div class="info_content">' +
'<h3>Kaiserkeller</h3>' +
'<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim minima recusandae reiciendis officiis. Dignissimos illum repellat illo ullam, quisquam architecto iure deserunt, a amet cupiditate expedita quam esse debitis. Animi.</p>' + '</div>'],
['<div class="info_content">' +
'<h3>The Gooseclub</h3>' +
'<p>Info...</p>' +
'</div>']
];
// Display multiple markers on a map
var width = document.getElementById('map-canvas').offsetWidth / 2;
var infoWindow = new google.maps.InfoWindow({maxWidth: width}), marker, i;
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
icon: image,
title: markers[i][0]
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
// var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
// this.setZoom(14);
// google.maps.event.removeListener(boundsListener);
// });
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment