RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Give Your Applications Mapping Capabilities, Part 3

Discover how to render online, interactive, 2D data from your application using Google Maps.


oogle Maps (GM) provides a powerful online environment that you can use to provide your web application with rich interactive 2D mapping features. You can render points, lines, or areas located at any point on Earth; you need only attach your specific application data to the page.

Understanding Google Maps Technology
GM works within a JavaScript framework that interacts with Google's web services from the user's browser. You can insert GM's framework in your web pages, and you can display maps by calling functions that the framework exposes. So your applications have no server-side requirements, and require adding only some "plain" JavaScript (JS) code to your HTML.

To access GM's framework, the "Google Maps API," you must obtain an API key—a free license key that you use to gain access to GM APIs from your pages.

One tough challenge when developing rich interactive web applications that make heavy use of JavaScript (as GM-centric applications do), is maintaining browser compatibility. The GM API simplifies this problem, because Google maintains and tests all the core JS for full compatibility with all the latest browsers. You need only take browser compatibility into account in your own JS code, the code you write that calls the GM APIs and interacts with the page's controls.

The starting point for every Geographic Information System (GIS) application is defining and managing geographical coordinates. GM uses the standard absolute latitude/longitude coordinates system (see Parts 1 and 2 of this article series). That system defines every coordinate as a pair of decimal values: latitude and longitude. GM uses a fully object-oriented approach, so it defines a pair of location coordinates using a class named "GLatLng." For example, to define a variable and create a new instance that defines a pair of coordinates:

   var coord = new GLatLng(myLatitude, myLongitude)
Authors Note: please note that Google Earth and Google Maps work with different notations. GE works with the <longitude, latitude> convention, but GM works with the reverse (<latitude, longitude>) convention. I think this is related to Keynote's standard used by Google Earth, which was originally a Keynote product before Google bought it.

Whenever you need to reference a geographical position (for example to render a placemark, define a line, a polygon, and so on) you will need to create one or more GLatLng instances and pass them as parameters. The GLatLng class exposes methods you can call; the two most important are "lat()" and "lng()," which return the latitude and longitude of that coordinate, respectively. So, using the variable defined in the previous code example, you can access the individual values using:

   Var lat1 = coord.lat();
   Var lng1 = coord.lng();

Two other interesting methods are distanceFrom(other) and toUrlValue(precision). DistanceFrom(other) requires you to provide a second GLatLng object, and returns the distance (in meters) between the two points (with an average error of 0.3 percent). ToUrlValue(precision)returns a string that represents the point in a format you can use as a URL parameter value. You use this method when you want to create a URL to redirect users to a page that needs to receive a coordinate as a parameter.

Getting Starting with GM
GM is a JS framework, so you need to write some JS code, but you can link your web page to Google's JS core code using the following script:

   <script src=http://maps.google.com/maps?
      file=api&v=2&key=abcdefg type="text/javascript">
Author's Note: You must obtain your own key parameter value, substituting that for the key=abcdefg value in the code below and wherever it appears in the rest of this article.

After referencing the GM framework, you add your own JS code to create a map. GM requires a reference to a page DOM object in which to insert the map. The simplest and most common method is to define a named <div> tag (you can place it wherever you want) and tell GM to use that <div> as the visual container. You're free to define a style attribute to render the map; for example, you can define a border, or set the div's width and height:

   <div id="myMap" style="width: 500px; height: 300px"></div>

Next, you create an instance of the GMap2 class, which is the basic GM object that defines a map, and you bind it to the

you defined:

   var map = new GMap2(document.getElementById("myMap"));
Table 1 lists the most common and important GMap2 methods and properties; you can find a complete list in the GM API documentation. Argument names followed by a question mark are optional.

Method/Property Description
enableDragging() and disableDragging() These methods enable or disable the ability for users to drag the displayed map.
enableScrollWheelZoom() and disableScrollWheelZoom() These two methods enable or prevent users from zooming in and out on the map using the mouse scroll wheel (an interesting feature that is disabled by default).
addControl(control, position?) and removeControl(control) Call these methods to add or remove a control (for example a placemark) to a map.
setCenter(center, zoom?, type?) This method sets the map view to a given center point, zoom level, and map type.
zoomIn() and zoomOut() These methods change the map viewpoint, zooming the view closer or further away, respectively. Note that you can call these independently of the user scrolling capability applied by the two "ScrollWheelZoom" methods listed earlier.
point, node, opts?)

point, html, opts?)

point, tabs, opts?)

point, tabs, opts?)

These four methods let you control the informational popup windows that can appear when users hover over or click a point on the map (you can handle events and then call these methods to open an info windows).

After creating a GMap2 instance, you use it to show your data and create an interactive online application based on a map. The first thing you'll probably want to do is call the setCenter method, to center the map view where you want it on Earth.

Authors note: To prevent memory leaks, Google recommends that you call the GUnload() function in the body onunload event in your pages, using the code: <body onunload="GUnload()">.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date