As part of the new web specifications, the W3C have outlined new specifications for browsers to access geographical location information. Getting the exact location of where a person is not 100% accurate. However, with geolocation information, developers can develop applications based on their geographical locaiton. For example, tourism companies could provide information to the user about a specific location.
This example would demonstrates the use of Geolocation with an open source map software to locate an approximate the user’s position.
We will be using both Google Maps and Bing Maps for this demonstration. The final result would look like this:
Google Maps
Bing Maps
Both Google and Bing require developers to import their library.
Google:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
Bing:
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>
Note with Bing, the default map size is 600px by 400px and requires an extra two lines to adjust the width and height. More about this later.
Both maps require a container where the maps would be loaded into.
<div id="mapContainer"></div>
We now have an empty <div> container to load in our map. From here on end we will primarily focus on Javascript. We need to first determine if we can grab the user’s geolocation. We can do this by calling a property of the navigator object – more specifally the geolocation property. This is a boolean that would return if the user has provided access for the browser to collect the user’s geographical location or not. If the user grants the browser access, we can call the getCurrentPosition method to grab the latitude and longitude of the user.
<script type="text/javascript">
function success(position) {
}
function error(msg) {
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
error('not supported');
}
</script>
The getCurrentPosition() method requires two functions – a success function and an error function. If the getCurrentPosition() method is able to provide the user’s latitude and longitude it would call the success function otherwise it would call the error function. Inside each function I am requesting an object being passed in. This object is important as it contains the information that we want – the latitude and longitude or an error message. If we write an alert( position.coords.latiude ) or alert( position.coords.longitude ) inside the success function we should get the latitude and longitude coordinates of where we are.
We want to pass this information along to our maps.
With Bing maps, we need to initialize their map. I normally stored this initalization inside a variable so I can call other methods down the road. As part of the initalization requirements, we need to provide Bing with the <div> container created earlier.
var myMap = null;
... more code ...
myMap = new VEMap( "mapContainer" );
Google Maps works a bit differently. We need to set the properties – such as latitude and longitude and any other map options, first before initializing Google Maps.
For both Bing and Google Maps, we need to pass in the latitude and longitude the browser was able to retreive in the success() function.
Google:
var mapContainer = document.getElementById('mapContainer');
mapContainer.style.width = '1024px';
mapContainer.style.height = '768px';
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map( mapContainer, myOptions );
What this code does is set the mapContainer <div> to 1024px by 768px. We created a Latitude and Longitude object – in that order, and passed in the coordinates. I wanted to set the zoom to relatively close, used the small navigation control style used Google’s roadmap, and have google center to my location. The last part is optional, it is not necessary to use the options, but for this demonstration we are using it to show where we are. Finally we initialize Google Maps with the mapContainer <div> and the options that we want.
Bing:
Bing works a bit differently but has the same concept. We need to create a Latitude and Longitude object using the VELatLong() class with the proper altitude and pass that into the LoadMap() function to load the map onto the browser. As stated earlier, Bing maps loads 800px by 600px and if you want to change the dimensions we need to call the Resize() method. The Resize() method only tells Bing to load in more information to fill the size required. If the Resize() method is not called, Bing presumes that you are using the default 800px x 600px, which would not properly center your location and load in the incorrect data displaying some grey gaps on the map.
var mapContainer = document.getElementById('mapContainer');
var altitude = 1;
var latLongInfo = new VELatLong(position.coords.latitude, position.coords.longitude, altitude, VELatLong.RelativeToGround);
myMap.LoadMap(latLongInfo, 14, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1);
myMap.Resize(1024, 768);
mapContainer.style.width = '1024px';
mapContainer.style.height = '768px';
var pinPoint = myMap.GetCenter();
For Bing we are using the same options as Google Maps – using road maps on a 2d surface and centering the map. Again this is optional and can be adjusted to fit your needs. The pinPoint object is the center of the map, which we will need to add the marker on the Bing map – see below.
Finally we can add a marker to indicate where we are.
Google:
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"This is where you are"
});
Bing:
var pin = myMap.AddPushpin(pinPoint);
pin.SetTitle("You are located <span style=color:red>Here");
pin.SetDescription("This is a demonstration of the HTML geolocation spec in use.");
pin.SetCustomIcon("<img src='logo.png' />");
pin.SetMoreInfoURL("http://www.josh-ho.com/blog/");
Google adds markers differently than Bing, but the concept is the same. We have to provide Google with the latitude and longitude – from the Latitude and Longitude object, the map and a description of what we want to say.
Bing maps require developers to call the AddPushpin() method and pass in the pinPoint object from before. The AddPushPin allows us to set the title, description, a custom icon and a URL for more information. I added some text to illustrate this, and this can be changed accordingly.
And there we have it, we now can show an accurate location of where the user is using the new W3C geolocation standard.
See the final result here:
Google Maps
Bing Maps