Google Maps API - SPLessons
boy2 Chapter 6

Google Maps Events

Google Maps API - SPLessons

Google Maps Events

shape 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.

Event

shape 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

UI events

shape 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 google.maps.Marker.
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.

Event Handler

shape Description

The method Event Handler uses the addListner() event, which calls the function whenever the specified event occurs and takes the event for listening.

MVC object state changes.

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.

Examples demonstrating different Events.

shape Description

Following are some of the Events in Google Maps JavaScript API applications.

Mark Event

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.

<!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>

UI Events argument accessing

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.

<!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>

Event for Info Window

The example below demonstrate the event for displaying information on clicking the marker located on the map.

<!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>

Summary

shape 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.

shape 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.