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:

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.

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>

Embed a Bing Map into your web application.
```
<div id="divMap"></div>
```

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.

	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>Bing My Location</title>
	<style>
	#divmap {
	position:relative;
	width:400px;
	height:400px;
	border:1px solid blue;
	}
	</style>
	<script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"> </script>
	<script>
	window.addEventListener("load", function () {
	function getLocation() {
	if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(showPosition,
	errorFunction);
	} else {
	loc.innerHTML = "Geolocation is not supported by this browser.";
	}
	}
	function showPosition(position) {
	loc.innerHTML = "Latitude: " + position.coords.latitude +
	"<br>Longitude: " + position.coords.longitude;

	var curPos = new Microsoft.Maps.Location(position.coords.latitude,
	position.coords.longitude);
	var calloutOptions = {
	title: "Location Information",
	description: "This is your current location."
	};
	var callout = new Microsoft.Maps.Infobox(curPos, calloutOptions);
	var mapOptions = {
	//credentials: 'BingMapsAPIKey',
	center: curPos,
	mapTypeId: Microsoft.Maps.MapTypeId.road,
	zoom: 8
	};
	var map = new Microsoft.Maps.Map(divMap, mapOptions);
	map.entities.push(callout);

	}
	function errorFunction(error) {
	switch (error.code) {
	case error.PERMISSION_DENIED:
	loc.innerHTML = "User denied the request for Geolocation."
	break;
	case error.POSITION_UNAVAILABLE:
	loc.innerHTML = "Location information is unavailable."
	break;
	case error.TIMEOUT:
	loc.innerHTML = "The request to get user location timed out."
	break;
	case error.UNKNOWN_ERROR:
	loc.innerHTML = "An unknown error occurred."
	break;
	}
	}

	getLocation();
	}, false);
	</script>
	</head>
	<body>
	<p>Get the location.</p>
	<div id="loc"></div>
	<div id="divMap"></div>
	</body>
	</html>

view raw

maps-bing-sample.html

hosted with ❤ by GitHub

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.

	<!DOCTYPE html>
	<html>
	<head>
	<title>Map Your Location</title>

	<style type="text/css">
	html, body {
	width: 100%;
	height: 100%;
	}

	#map_canvas {
	height: 85%;
	width: 100%;
	}
	</style>
	</head>
	<body>
	<div id="map_canvas"></div>
	<div id="locationinfo"></div>

	<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript">
	// Determine support for Geolocation
	if (navigator.geolocation) {
	// Locate position
	navigator.geolocation.getCurrentPosition(displayPosition, errorFunction);
	} else {
	alert('Geolocation is not enabled in your browser.');
	}

	// Success callback function
	function displayPosition(pos) {
	var mylat = pos.coords.latitude;
	var mylong = pos.coords.longitude;
	var locDiv = document.getElementById('locationinfo');
	locDiv.innerHTML = '<p>Your longitude is :' +
	mylong + ' and your latitude is ' + mylat + '</p>';

	//Load Google Map
	var latlng = new google.maps.LatLng(mylat, mylong);
	var myOptions = {
	zoom: 15,
	center: latlng,
	mapTypeId: google.maps.MapTypeId.HYBRID
	};

	var map = new google.maps.Map(document.getElementById("map_canvas"),
	myOptions);

	//Add marker
	var marker = new google.maps.Marker({
	position: latlng,
	map: map,
	title: "You are here"
	});
	}

	// Error callback function
	function errorFunction(pos) {
	alert('Oops!');
	}
	</script>
	</body>
	</html>