Online Map Services
To represent geographical data in a browser, you have several options: SVG is very well suited due to its flexible coordinate system, and data can be drawn as a raster image using canvas. The easiest solution is to use an existing JavaScript library. Of the free libraries available online, we will look closer at Google Maps and OpenStreetMap. Microsoft's map service Bing Maps can only be used after registering, so we will not discuss it here.
The two libraries introduced in this articles use a mixture of raster and vector data for display. To enable faster loading times, the raster images are subdivided into tiles and calculated in advance for all zoom levels, allowing for step-by-step image construction. Vector information is displayed, depending on the browser, in SVG or in the Microsoft specific VML format for Internet Explorer.
Google Maps
Google Maps is undoubtedly the most widely used map service on the Internet. Many companies use the free service to cartographically represent their location. But Google Maps can do much more than place position markers on a map. As you can see from the website, more than 150,000 websites use Google Maps, including large companies.
The library's current version, V3, is very different from earlier versions: To use it, you no longer need an API key (so registration with Google is not required), and the library was optimized for use on mobile devices. As is so often the case with Google products, programming is very straightforward. For a simple road map of Central Europe, you need only a few lines of HTML and JavaScript, as shown below:
Road map of Central Europe with Google Maps
<html> <br>
<head> <br>
<script type="text/javascript" <br>
src="http://maps.google.com/maps/api/js?sensor=true"> <br>
</script> <br>
<script type="text/javascript"> <br>
window.onload = function() { <br>
var map = <br>
new google.maps.Map(document.getElementById("map"), <br>
{ center: new google.maps.LatLng(47,11), <br>
zoom: 7, <br>
mapTypeId: google.maps.MapTypeId.ROADMAP <br>
} <br>
); <br>
} <br>
</script> <br>
<body> <br>
<div id="map" style="width:100%; height:100%"></div>
When loading the library, you must specify the sensors parameter. If it is set to true, the device can determine its position and inform the application. This is particularly useful for mobile devices (such as smartphones with GPS). Once the entire page is loaded (window.onload), a new object with the type google.maps.Map is created, whose constructor receives as its first parameter the HTML element provided for displaying the map. The second parameter determines a list of options of what is displayed on the map and how. In this case, the center of the map is set to 47 degrees north and 11 degrees east with a zoom level of 7 (zoom level 0 is equivalent to a view of the whole Earth), and the map type is specified as road map via the constant google.maps.MapTypeId.ROADMAP.
Note: Because the map object's constructor contains a reference to the content of the HTML page, it can only be called once the website is loaded; that is, at window.onload.