Last active
November 25, 2015 20:29
-
-
Save tan3/a527a7f12433d77bc7dc to your computer and use it in GitHub Desktop.
Javascript: Custom GoogleMaps
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
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