Google Maps Tutorial
Google Maps Resources
Selected Reading
- Google Maps - Events
- Google Maps - Symbols
- Google Maps - Info Window
- Google Maps - Shapes
- Google Maps - Markers
- Google Maps - UI Controls
- Google Maps - Localization
- Google Maps - Zoom
- Google Maps - Types
- Google Maps - Getting Started
- Google Maps - Home
Google Maps Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Google Maps - Events
Google Maps - Events
The Google Maps JavaScript program can respond to various events generated by the user. This chapter provides examples demonstrating how to perform event handpng while working with Google Maps.
Adding an Event Listener
You can add an event pstener using the method addListener(). It accepts parameters such as object name on which we want to add the pstener, name of the event, and the handler event.
Example
The following example shows how to add an event pstener to a marker object. The program raises the zoom value of the map by 5 each time we double-cpck on the marker.
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(17.433053, 78.412172);
function loadMap(){
var mapProp = {
center: myCenter,
zoom:5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position: myCenter,
title: Cpck to zoom
});
marker.setMap(map);
//Zoom to 7 when cpcked on marker
google.maps.event.addListener(marker, cpck ,function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
}
</script>
</head>
<body onload = "loadMap()">
<span id = "googleMap" style = "width:580px; height:400px;"></span>
</body>
</html>
It produces the following output −
Opening an Info Window on Cpck
The following code opens an info window on cpcking the marker −
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(17.433053, 78.412172);
function loadMap(){
var mapProp = {
center:myCenter,
zoom:4,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"Hi"
});
google.maps.event.addListener(marker, cpck , function() {
infowindow.open(map,marker);
});
}
</script>
</head>
<body onload = "loadMap()">
<span id = "googleMap" style = "width:580px; height:400px;"></span>
</body>
</html>
It produces the following output −
Removing the Listener
You can remove an existing pstener using the method removeListener(). This method accepts the pstener object, therefore we have to assign the pstener to a variable and pass it to this method.
Example
The following code shows how to remove a pstener −
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(17.433053, 78.412172);
function loadMap(){
var mapProp = {
center:myCenter,
zoom:4,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"Hi"
});
var myListener = google.maps.event.addListener(marker, cpck , function() {
infowindow.open(map,marker);
});
google.maps.event.removeListener(myListener);
}
</script>
</head>
<body onload = "loadMap()">
<span id = "googleMap" style = "width:580px; height:400px;"></span>
</body>
</html>
It produces the following output −
Advertisements