Introduction to Mapping with HTML5 Geolocation

You can use maps with HTML5 Geolocation.

In this post, you will see how to use Bing Maps and Google Maps in your HTML5 Geolocation application.

Map APIs allow you to go deeper. For example, you can:

  • Create pushpins
  • Provide infoboxes
  • Tile layers
  • Show a traffic layer
  • Provide turn-by-turn directions
  • Search
  • and much more.

Let’s get started.

Bing Maps

Bing Maps gives you a rich set of tools to help you create amazing map experiences. You can choose from an AJAX Control 7.0, REST Services API, Bing Map App SDK for mash-ups hosted on Bing.com/maps, and Windows Phone SDK.

The control available on bing.com/maps is freely available to any web developers; you can find all the APIs and the documentation in the Ajax SDK for Bing Maps. Preview live here.

To integrate Geolocation API with Bing maps you will need to:

  1. Obtain a Bing Maps API key.
    An API key is allotted for an account. You can obtain the API key from the Bing Maps web site.
  2. Refer the Bing Maps API library that allows you to program the Bing Maps in your web page.
    <script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0">
     </script>
    
  3. Embed a Bing Map into your web application.
    <div id="divMap"></div>
  4. Integrate the Bing Maps API with Geolocation API to customize the map as per your need.
    Without credentials you can call the map without options:
    var map = new Microsoft.Maps.Map(divMap, mapOptions);

    With credentials, you can be more specific about the look and feel of your map:

    var mapOptions = {
        credentials: 'YourBingMapsAPIKey',
        center: curPos,
        mapTypeId: Microsoft.Maps.MapTypeId.road,
        zoom: 8
    };
    var map = new Microsoft.Maps.Map(divMap, mapOptions);
    

Bing Maps Code Sample

Here’s a code sample showing how you can use Geolocation with Bing Maps. All you add to the Geolocation app is what you do in the showPosition function and a div to display the map.

Bing Maps API

You can create pushpins, callouts, layers, directions, get the locations of addresses, and much more. See Bing Maps AJAX Control for more information.

Google Maps

You can use Google Maps to display the map where the user is currently located.

To build more custom applications, you register for an Google Maps API key at their JavaScript Tutorial.

Here is a sample that shows how you can integrate Google Maps into your Web app.

Google Maps API

You can use the Google Maps API to customize your application by embedding an interactive Google Map in your webpage using JavaScript.

For more information, see Google Maps API.

References

Sample Code

Sample code is available in the DevDays GitHub repository. See https://github.com/devdays/html5-tutorials

Advertisements