October 23, 2016
Hot Topics:

Creating Custom Overlays with the Google Maps API

  • March 12, 2010
  • By Jason Gilmore
  • Send Email »
  • More Articles »

Creating Irregularly Shaped Overlays

Of course, circles are just one of innumerable shapes you can create using the Google Maps API. For instance, you can create a triangle-shaped overlay that bounds three cities simply by identifying a set of four coordinates and then passing that set to the GPolyline class, as demonstrated here:

var polyline = new GPolyline([
  new GLatLng(39.144972, -84.476623),
  new GLatLng(41.498806, -81.707382),
  new GLatLng(39.766325, -86.187744),
  new GLatLng(39.144972, -84.476623)
], "#000000", 3);

Executing this code creates the map depicted in Figure 3.

Figure 3. Bounding the Area Between Cities:
You can create a triangle-shaped overlay that bounds three major cities.


My occasional Google Maps API series has covered quite a bit of ground during the past five years, introducing topics ranging from plotting markers to more advanced features such as calculating road distances and trip duration between two points.

The Google Maps API's powerful overlay capabilities, however, go far beyond the simple addition of markers and routes that I've discussed in the past. You can create any conceivable shape, offering new ways to visually describe your spatial data. If you do anything interesting with what you've learned in this tutorial, I'd love to hear about it!

About the Author

Jason Gilmore is founder of EasyPHPWebsites.com. He is the author of several popular books, including "Easy PHP Websites with the Zend Framework," "Easy PayPal with PHP," and ""Beginning PHP and MySQL, Third Edition."

Page 2 of 2

Comment and Contribute


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



Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Sitemap | Contact Us

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