Hands on: Geolocation using HTML5

Learn how to use HTML5 to plot points on a map and determine current position

1 2 3 4 5 6 7 8 9 Page 2
Page 2 of 9

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.

1 2 3 4 5 6 7 8 9 Page 2
Page 2 of 9
7 inconvenient truths about the hybrid work trend
Shop Tech Products at Amazon