Dr. Dobb's is part of the Informa Tech Division of Informa PLC

This site is operated by a business or businesses owned by Informa PLC and all copyright resides with them. Informa PLC's registered office is 5 Howick Place, London SW1P 1WG. Registered in England and Wales. Number 8860726.


Channels ▼
RSS

Web Development

Web Maps with the Google Map API

Source Code Accompanies This Article. Download It Now.


Getting the Right Coordinates

To get the precise geographical location for specific sites, you could use some kind of a geocoder tool. There are several free ones (the Perl module Geo::Coder::US, for instance), but most work only with U.S. addresses. For our purposes, we used Google Earth (earth.google.com), which in its latest version combines satellite imagery, maps, terrain, and 3D buildings. This tool gives a simple interface to navigate over a global satellite map and manually assign points of interest with markers, polylines, and polygons. This software was so straightforward that we could give it to our team of rural engineers and, after a few minutes of training, they were able to represent a large amount of information that was scattered in a variety of files in different engineering software formats. The original file was converted to KML, short for "Keyhole Markup Language" (code.google.com/apis/kml/documentation), an XML-based language for managing three-dimensional geospatial data. This file contained coordinates, labels, and even HTML descriptions, in a format that was human readable and easy to process using XSLT. Listing One, for instance, is the location of my office in KML.

<Placemark>
  <name>My Office</name>
  <LookAt>
    <longitude>23.78266482649396</longitude>
    <latitude>37.97757782541832</latitude>
    <altitude>0</altitude>
    <range>155.5744724827026</range>
    <tilt>1.639002638135242e-012</tilt>
    <heading>0.001088456620806448</heading>
  </LookAt>
  <Point>
    <coordinates>
      23.78277996313077,37.97773328821575,0
    </coordinates>
  </Point>
</Placemark>
Listing One

Initializing the Map

Although the Map API is free, to embed a map in a web pages you first have to sign up for an API key. A single key is valid for a single "directory" on your web server, so if you sign up for the URL "www.mycompany.com/mysite," the key you get will be good for all URLs in the "www.mygooglemapssite.com/mysite/" directory. You must have a Google Account to get a Maps API key, and your API key is connected to your Google Account. These keys are generated in real time and are required to import the core library in your JavaScript code:

<script
src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=YOUR_KEY"
type="text/javascript">
</script>

For a basic map to appear, the API requires that the construction be made while the body of the page loads with a function similar to Listing Two. In this way, you first check if the browser is compatible with your JavaScript API (most are), then construct a new map object. For our purposes, we added some controls on the map to help us zoom in/out, and change modes between satellite imagery and geopolitical view. Also, we defined the initial center of the map and provided a welcome message window that contains HTML code. Our API also gave us a built-in function GUnload() for cleanup purposes on exiting the map page.

function load() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map"));
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.addControl(new GOverviewMapControl());
map.addControl(new GScaleControl());
map.setCenter(new GLatLng(37.97775399999999, 23.782611), 16);
    map.openInfoWindow(map.getCenter(),"Welcome message");
map.setMapType(map.getMapTypes()[1]);
var pos = new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(250,0));
pos.apply(document.getElementById("control"));
map.getContainer().appendChild(document.getElementById("control"));
  }
}
Listing Two


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.