Introduction
The chapter demonstrates about the Google Maps JavaScript API and following are the concepts covered.
- Event.
- UI Events.
- Event Handler.
- Examples Demonstrating Different Events.
Description
The interaction between the user and JavaScript API in Google Maps are done by using Events. The following are the two types of events in JavaScript API.
property_changed convention is used to notify the changes reflect in Maps API by changing the MVC state.
The events like mouse click by users are distinct and separated from standard DOM events in Google Maps API.
The table below provides the complete list of events in JavaScript API for Google Maps.
| Events | Arguments |
|---|---|
| click: When the user click on the map the click event gets fired. | MouseEvent |
| dblclick: When the user double-click on the map the dblclick event gets fired. | MouseEvent |
| center_changed: The event gets fired by changing the Maps center property. | None |
| bounds_changed: The event gets fired by changing the viewport bounds. | None |
| drag: The event gets fired by dragging the map. | None |
| dragstart: The event gets fired by starting the map dragging. | None |
| dragend: The event gets fired by stoping the map dragging. | None |
| idel: The event gets fired by making the map ideal after zooming or dragging. | None |
| heading_changed: The event gets fired by changing the maps heading property. | None |
| mousemove: The event gets fired by moving the mouse over the map. | MouseEvent |
| mouseout: The event gets fired when the mouse exits the map. | MoseEvent |
| maptypeid_changed: The event gets fired by changing the property maptypeid. | None |
| mouseover: The event gets fired by entering the map. | MouseEvent |
| resize: This event should be trigger by the developers: google.maps.event.trigger(map, 'resize'). | None |
| projection_changed: The event gets fired by changing the projection. | None |
| rightclick: The event gets fired by opening the DOM contextmenu on the map. | MoseEvent |
| tilt_changed: The event gets fired by chaning the property tilt. | None |
| tilesloaded: The event gets fired after finishing the visible tiles loading. | None |
| zoom_changed: This event gets fired by changing the zoom property of the map. | None |
Description
The user events such as the keyboard or mouse are recognized by some of the objects designed in the Maps API. The following are some of the events given by the user for
These are generally some of the Maps API events, but which also look like standard DOM events. Because of the models of DOM events are implemented differently in different browsers.
google.maps.Marker.- mouseout
- mousedown
- mouseover
- dbclick
- click
- mouseup
Description
The method Event Handler uses the
addListner() event, which calls the function whenever the specified event occurs and takes the event for listening.
An event get fired by JavaScript API whenever the object property changed by the user.
For example, when the user changes the map’s zoom level then the JavaScript API fire the zoom_changed event. Generally the MVC object state changes and the events used by the users look similar. So it’s depends on the user to treat both the events differently in the code. Description
Following are some of the Events in Google Maps JavaScript API applications.
The below example demonstrate the Marker Events. Here in the maps application an event handler is attached to the marker which zooms the map when double clicked.
Also added a center property which pan back the map in to center after 4 seconds, which is done by the event
center_changed.
[c]
<!DOCTYPE html>
<html>
<head>
<title>Simple click event</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var myLatlng = {lat: 17.3700, lng: 78.4800};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatlng
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Click to zoom'
});
map.addListener('center_changed', function() {
// 4 seconds after the center of the map has changed, pan back to the
// marker.
window.setTimeout(function() {
map.panTo(marker.getPosition());
}, 3000);
});
marker.addListener('click', function() {
map.setZoom(8);
map.setCenter(marker.getPosition());
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=&signed_in=true&callback=initMap" async defer>
</script>
</body>
</html>
[/c]
The example below demonstrate adding event listener to a map application, which create a marker whenever the user click on different locations on the map.
Accessing UI events is as easy as accessing an object properties and the arguments can be accessed within an event listener.
[c]
<!DOCTYPE html>
<html>
<head>
<title>Accessing arguments in UI events</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {lat: 17.3700, lng: 78.4800}
});
map.addListener('click', function(e) {
placeMarkerAndPanTo(e.latLng, map);
});
}
function placeMarkerAndPanTo(latLng, map) {
var marker = new google.maps.Marker({
position: latLng,
map: map
});
map.panTo(latLng);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=&signed_in=true&callback=initMap" async defer></script>
</body>
</html>
[/c]
The example below demonstrate the event for displaying information on clicking the marker located on the map.
[c]
<!DOCTYPE html>
<html>
<head>
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=&signed_in=true"></script>
</body>
<script>
var myCenter = new google.maps.LatLng(17.433053, 78.412172);
function loadMap(){
var mapProp = {
center:myCenter,
zoom:6,
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:"metropolitan city"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:1500px; height:1000px;"></div>
</body>
</html>
</html>
[/c]
Key Points
- Events plays a main role between JavaScript API and users.
- The events should be given using google.maps.marker.
- The events get fired by the JavaScript only when the object property changed by the user.
Programming
Tips
- Use the specific bounds_changed event rather than the center_changed event and zoom_changed events for detecting chang in the viewport.
- Copy the API key obtained from Google Maps API and paste using the JavaScript tag in the code for loading Maps.
- Set the required Map Properties for better output.
- Make sure the latitude and longitudes of the required location mentioned to be correct.
- Don't give the API key in code exposed to public.