Google Maps Tutorial - Part 2

Posted by Himadri
November 12, 2008

Next installment of the Google Maps tutorial series.

First we start with the starting point google map implementation, from the last post.

Feel free to peek ahead to the final google map implementation after this interation. Make sure you left click on the map, and drag and drop the resulting markers.

In this iteration I will add map overlays, actualy two kinds of overlays: markers (GMarker) and lines (GPolyline), that are provided by the Google Maps API.

Also I'll add event handler to handle mouse click events using the GEvent API.

First, I added a function to draw a line and store it in a array called lines. Drawing lines is as simple as creating a GPolyline object and adding it to the map using the addOverlay method.

PLAIN TEXT
JavaScript:
  1. function plotLine(pt1, pt2) {
  2.     var polyline = new GPolyline([
  3.             pt1, pt2
  4.             ], "#0000ff", 5, 0.5);
  5.     map.addOverlay(polyline);
  6.     lines.push(polyline);
  7. }

Next I added a plot function to plot the entire boundary, which is stored in the boundary array. In the plot function I first delete all the lines so far, useful if the user changes the boundary by dragging and dropping the markers, and calling the above plotLine function with the array of points in the current boundary variable.

Note how I can remove existing overlays by invoking the removeOverlay method of map.

PLAIN TEXT
JavaScript:
  1. function plot() {
  2.     if (lines.length> 0) {
  3.         for (var idx in lines) {
  4.             map.removeOverlay(lines[idx]);
  5.         }
  6.         lines = new Array();
  7.     }
  8.  
  9.     for (var i=0; i+1<boundary.length; i++) {
  10.         plotLine(boundary[i].getLatLng(),
  11.                         boundary[i+1].getLatLng());
  12.     }
  13. }

Finally I tie everything together by adding event handlers for a click event and a dragend event. The click event will place a new marker, which can then be subsequently moved by dragging and dropping it. The Google Maps API comes with a default marker icon when a new marker (GMarker object) is created. This can be overwridden with whatever icon you want by creating a GIcon object which I did here for the first placed marker.

Note how the addListener method is given a callback function which gets a pointer to the overlay and the point itself on a click event. The overlay is checked to see whether we clicked on an already existing overlay (if so do nothing), and the point is used to create a GMarker object and add it to the map using map.addOverlay.

PLAIN TEXT
JavaScript:
  1. GEvent.addListener(map, "click", function(overlay,point) {
  2.     if (overlay != null) {
  3.     } else {
  4.         var n = boundary.length;
  5.         if (first_point) {
  6.             var func_icon = new GIcon();
  7.             func_icon.image =
  8.               "http://gsacs1.enterprisedemo-google.com/googleMaps/green.png";
  9.             func_icon.iconSize = new GSize(26, 26);
  10.             func_icon.shadowSize = new GSize(20, 20);
  11.             func_icon.iconAnchor = new GPoint(14, 24);
  12.             func_icon.infoWindowAnchor = new GPoint(15, 1);
  13.             boundary.push(new GMarker(point,
  14.                 {icon: func_icon, draggable: true, clickable : true}));
  15.             first_point = false;
  16.         } else  {
  17.             boundary.push(new GMarker(point,
  18.                 {draggable: true, clickable : true}));
  19.         }
  20.         map.addOverlay(boundary[n]);
  21.         GEvent.addListener(boundary[n], "dragend",
  22.             function() {
  23.                 plot();
  24.             });
  25.  
  26.         plot();
  27.     }
  28. });

And that's it, for this iteration. Check out the final product, and stay tuned for the next iteration. Also, you might want to check out the plan for the entire Google Maps Taxi application.

Software Engineering

Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically to your feed reader.

Comments

No comments yet.

Leave a comment

(required)

(required)