Dec 012012
Article Javascript

This post continues the series started in our post on adding a map from Google Maps to a web page. Here we will explain how to work dynamically with the map, using javascript to modify its characteristics (center point, zoom level, etc…), and handling events generated in the map (when the user clicks on it, or pans/zooms the map).

As a practical example, let’s assume that we have a database of geographical points of interest (restaurants, schools, hospitals,museums,…). For each POI the database keeps its type, description, and latitude/longitude. The goal is to display these data on the map, and update the map when the user pans the viewport or changes the zoom level.

The first step is to retrieve the bounding box of the area currently displayed on the map

How to retrieve the bounding box of the area displayed on the map

The getBounds() function returns an object of the class LatLngBounds. Then, calling the getNorthEast() and getSouthWest() methods of this object we obtain two objects of the class LatLng. Calling the methods lat() and long() of these objects we get the maximum and minimum latitude and longitude of the visible area. For instance:
Warning: It may happen that the minimum longitude retrieved is a positive number, and the maximum longitude is a negative number. This means that the map is displaying a zone in the day-change area, where the longitude goes from +180 to -179 degrees. For instance, this map:
Returns the bounding box:
    Latitude. max: 79.37981699053185, min: -4.499973444975498
    Longitude. max: -63.94803161621098, min: 64.02071838378902

How to put on the map the icons representing the points of interest

Having retrieved the bounding box of the area displayed on the map, we will issue a query to the database to retrieve the POI inside this area. This can be implemented easily using JQuery, with an ajax call that returns the result as JSON-formatted data.

A CGI script “get_poi.php” returning a JSON structure should have been previously developed and put in production in our server. The details of the implementation of this script depend on the structure of the database, and is out of the scope of this post.

Again, the details of the code to display the points on the map will depend on the JSON structure retrieved, but in any case is will closely match the sample code in our previous post on “adding location markers to a Google map


How to process events generated in the map

User interactions with the map generate events. For instance, when the user is panning the map events of type “center_changed” are triggered. When the user stops panning the map, an event “dragend” is triggered.

Our javascript code must register an “Event Listener” for each type of event we want to handle. For instance:

The types of events that can be generated when the user interacts with the map are:

  • dragstart, drag, dragend –
    A dragstart event is generated when the user starts dragging the map, and a dragend event is generated when dragging stops. While the user is dragging the map, a “drag” event is generated every time the map content is refreshed.
  • center_changed, zoom_changed, bounds_changed –
    A center_changed event is generated every time the center point of the map changes as a result of dragging the map.
    A zoom_changed event is generated when the zoom level changes.
    A bounds_changed event is generated when the bounding box changes, because the map has been dragged of the zoom level has changed.
    Note: While the map is been dragged, these events are generated each time the map is refreshed.
  • mouseover, mousemove, mouseout
  • click, dblclick, rightclick

Finally, an event of type ‘idle’ is generated when the user stops interacting with the map.

If we want to retrieve data from the server to update the map when it has changed, we can use these events to avoid performing repeated requests to the server while the user is dragging the map or changing the zoom level.


1. Use a “dragging” variable to flag when the user is panning the map

2. Use a “mouseIsDown” variable to flag if the mouse button is pressed. Call the function “refresh_markers” when it is released:

3. Use a “bounds_modified” variable to flag that the map limits have changed, and save in a variable “new_bounds” the new bounding box:

4. Call the function “refresh_markers” when the map enters the “idle” state:

5. The function “refresh_markers” checks if the user is dragging the map, a mouse button is pressed, or the bounding box has not changed, to avoid making a request to the server in these cases:

 Posted by at 5:27 pm

 Leave a Reply