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 2

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




Working with Markers
The most-used feature of GM is its ability to show markers on a map. For example, you might show a marker to indicate a point of sale, a company address, or a location related to your business or application. You can refer to Parts 1 and 2 of this article to see other scenarios.

You create a marker using the GMarker object. The constructor requires a coordinate (a GLatLng instance); you can add the new GMarker object to your map object as an overlay. In fact, every object you add to a map is an overlay. To extend the previous example:

   map.addOverlay(new GMarker(new GLatLng(myLatitude, myLongitude)));

The preceding code does several things. Reading from the inside parentheses outward, it first creates a GLatLng coordinate object using two decimal variables (myLatitude and myLongitude—the input parameter values were declared earlier), then it creates a new GMarker positioned at this coordinate, and finally adds the marker as an overlay to the previously created map.

You can repeat this operation as many times as you wish to create additional markers on your map.

By default, markers are relatively plain, but you can define your own marker icon if you don't want to use the standard GM one. To do that, you create a GIcon object, and then create a marker using that object:

   var myIcon = new GIcon();
   myIcon.shadow = 
   myIcon.iconSize = new GSize(20, 34);
   myIcon.shadowSize = new GSize(37, 34);
   myIcon.iconAnchor = new GPoint(9, 34);
   myIcon.infoWindowAnchor = new GPoint(9, 2);
   myIcon.infoShadowAnchor = new GPoint(18, 25);
   myIcon.image = 
   markerOptions = { icon:myIcon };
   map.addOverlay(new GMarker(
      point, markerOptions));

In the preceding code, iconAnchor, shadowSize, and so on, are attributes that control how GM shows visual effects related to your icon. This can get quite complex, so I suggest you start from this simple example and make changes as needed, or refer to the complete GM API documentation.

Working with Lines
To show a line, you simply use an array of points defined with GLatLng objects. The points define a connected set of line segments. GM will connect every pair of points with a direct line segment, so anything except a straight line will always require a sequence of linear segments. GM has no concept of curves—in other words, GM (like Google Earth) doesn't provide a way to draw a "real" curved line, but you can approximate curved lines with close-set points. The more points you provide, the better the approximation to a true curve.

Here's an example showing the JS code required to draw a line (termed a "PolyLine" in GM parlance):

var map = new GMap2(
   map.enableScrollWheelZoom() ;
   map.setCenter(new GLatLng(
      45.629865, 9.576918333333341), 13);
Figure 1. Drawing Polylines: Using an array of GLatLng objects, you can draw lines to outline or overlay an area.

   var polyline = new GPolyline([
   new GLatLng(45.629865, 9.576918333333341),
   new GLatLng(45.6320033333333, 
      9.581189999999999)], "#ff0000", 10);

In the preceding code, the PolyLine constructor takes an array of GLatLng objects, and draws a set of line segments connecting those coordinates. The PolyLine constructor also requires a line color and width (in pixels).

The code example above creates the map shown in Figure 1.

The PolyLine object exposes its own set of properties and methods. The most important are getLength(), which returns the length (in meters) of the line along the Earth's surface, and the hide() and show() methods that hide or show the line.

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