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

By submitting your information, you agree that devx.com may send you DevX offers via email, phone and text message, as well as email offers about other products and services that DevX believes may be of interest to you. DevX will process your information in accordance with the Quinstreet Privacy Policy.


Give Your Applications Mapping Capabilities, Part 3 : Page 3

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




Application Security Testing: An Integral Part of DevOps

Working with Polygons
Defining a polygon is similar to defining a line, except that you use the GPolygon object. In GM polygons in fact are filled GPolyLines. For example, here's the JS code required to create a simple polygon around a center point as shown in Figure 2:

Figure 2. Drawing Polygons: A polygon consists of a set of GLatLng objects that define its vertices relative to a center point, drawn with a specified stroke width, fill color, and opacity.

   var map = new GMap2(
   map.enableScrollWheelZoom() ;
   center = new GLatLng(
      45.6320033333333, 9.581189999999999);
   map.setCenter(center, 13);
   var latOffset = 0.01;
   var lonOffset = 0.01;
   var polygon = new GPolygon([
     new GLatLng(center.lat(), 
         center.lng() - lonOffset),
     new GLatLng(center.lat() + 
         latOffset, center.lng()),
     new GLatLng(center.lat(), 
         center.lng() + lonOffset),
     new GLatLng(center.lat() - 
         latOffset, center.lng()),
     new GLatLng(center.lat(), 
         center.lng() - lonOffset)
   ], "#f33f00", 5, 1, "#ff0000", 0.2);

The parameters to the GPolygon constructor method shown in the preceding code are points, strokeColor, strokeWeight, strokeOpacity, fillColor, fillOpacity, opts, and—except for the points themselves—all are optional.

Editor's Note: Part 2 of this article discusses differences between GM and the more powerful Google Earth environment, which offers more features for drawing polygons.

Creating GM Files Programmatically
Although the simplest way to create a JS application that works with your server application and data is to render JS or parameters from a server-side technology, such as ASP.NET, I suggest you create your GM application by placing all your JS code in separate and static JS files, as functions. By doing that you can emit only the required values in your main HTML code, such as positioning data and so on. You'll find that—while it's harder to begin with—you'll end up with cleaner and more reusable code. You can also create your own server-side framework to use GM in your application without having to write a lot of JS in every page. Again, this requires a serious commitment up front, but you'll have a powerful resource when you want to create other GM applications.

One of GM's most interesting features is Geocoding. Geocoding a point involves using a description of that point (which could be anything from a full address to just a city name) to retrieve that point's coordinates on Earth. You can use this powerful feature whenever you need the latitude and longitude for a known location.

Author's Note: Geocoding is not magic; it relies on a huge Google database that contains everything from city names to full address details. Unfortunately, geocoded data can be inaccurate, or may not exist. For accuracy in "real" GIS applications you should instead get positional data "on the road," as explained in Part 1.

You can geocode a point either by calling the GM API from JS or by calling a Google web service. The web service takes the address as an input parameter, and returns an XML document containing all available geocoded information of that address. This means that you can work from a server-side application and use the returned data however you like, from any language. The web page environment is not involved. Here's an example that creates a map and then shows a specific point on the map, using data it retrieves from the web service:

   <SCRIPT type="text/javascript">
   var map;
   function go(){
    map = new GMap2(document.getElementById("myMap"));
    map.enableScrollWheelZoom() ;
    center = new GLatLng(45.6320033333333, 9.581189999999999);
    map.setCenter(center, 13);
   function showAddress(address) {
      geocoder = new GClientGeocoder();
    if (geocoder) {
      function(point) {
       if (!point) {
        alert(address + " not found");
       } else {
        map.setCenter(point, 13);
        map.addOverlay(new GMarker(point));

You need to define form fields to display the data and interact with JS:

   <body onunload="GUnload()">
    <form action="#" onsubmit="showAddress(
       this.address.value); return false">
    <input type="text" size="60" name="address" 
       value="Bergamo, Italy" />
    <input type="submit" value="Go!" />
    <div id="map" style="width: 500px; height: 300px"></div>
Figure 3. Geocoding in Action: This simple form lets you search for and display a map given a city or specific address.

The preceding code creates a web page with a form and a map, as in Figure 3. You can enter a location into the text box, then click the Go button, and the map will find and display that place.

The most interesting part of that code is the GClientGeocoder class. This class exposes a GetLatLng (address) method that retrieves coordinates from a Google web service. The web service requires a string value—in this case the address (full or partial)—that you want to geocode. It also requires a second parameter—a callback function pointer. The callback function is necessary because geocoding requires a round trip to a Google web service, which can take a long time. Making the request synchronously would block the browser interface until the operation completes, thus freezing the application for the user. With the asynchronous implementation, you start the request, which the browser executes on a secondary thread, and the main thread remains free to handle the UI. When the Google web service has responded, the browser calls the callback function. You place the code that manages the retrieved coordinates and reports them to the user in the callback function body. For example, the preceding code defines a function that checks whether the geocoding request returned a value, and if so, creates a marker to pinpoint the returned location on the map.

Google Maps is a powerful and customizable interactive, 2D, online framework for rendering maps. Using its JavaScript API, you can create exciting web applications that show maps, locations, and other geographical views. Your users can interact with these maps and get useful information from your application in a powerful and intuitive way.

Bruno A. Zambetti is founder of Huge! srl, an Italy-based company specializing in Internet and distributed solutions. He is a .NET Architect, a Fortinet-certified network specialist, and has authored several articles on .NET and web infrastructures.
Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



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