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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
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
- Integrating HTML5 Geolocation API with Bing Maps on developer.com
- How to use the W3C Geolocation API from dev.opera
Sample Code
Sample code is available in the DevDays GitHub repository. See https://github.com/devdays/html5-tutorials