Basic Google Map Functions
View the page source for full source code. It's fun and simple.
The code to initialize the Google Map on your page.
var map; //MAKE SURE TO SET THIS AS GLOBAL TO USE IN ALL FUNCTIONS
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(41.88414,-87.632379),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
//Start up google map upon page load
google.maps.event.addDomListener(window, 'load', initialize);
Here's the code to zoom in & out on a map. Since the "map" variable is now global, we can use the setZoom method.
function zoomIn() {
num = map.getZoom() + 1;
map.setZoom(num)
}
function zoomOut() {
num = map.getZoom() - 1;
map.setZoom(num)
}
Finally, we can lock the map. This code makes sure a user cannot interact with the map via a mousewheel or clicking. I added a variable "mapAlive" to give the user the ability to unlock the map as well.
//Lock / unlock map
//Map alive means it's unlocked
mapAlive = 1;
function lock() {
if (mapAlive == 1) {
map.setOptions({draggable: false, zoomControl: false, scrollwheel: false, disableDoubleClickZoom: true});
mapAlive = 0;
} else if (mapAlive == 0) {
map.setOptions({draggable: true, zoomControl: true, scrollwheel: false, disableDoubleClickZoom: false});
mapAlive = 1;
}
}