Wednesday, June 16, 2010

Part II: Getting your geo location and pointing the correct Bing Map

This is the easiest part, since modern HTML5 supports Geocoding identification in a native way. The javascript code is as easy as it follows:

function showMap(position) {
lat = position.coords.latitude;
lng = position.coords.longitude;

}

function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showMap);
} else {
error('not supported');
}
}
The showMap(position) is a callback function used as soon as the browser identifies your location. Please note that this approach is currently known to work in Chrome, Firefox and Safari for mobile (e.g. Ipad and Iphone). It seems that other browsers will support geolocalization in the near future.

Once you have the location in terms of latitude and longitude you can find that point on Bing Maps using the Javascript Bing Map SDK. Let's see how to make it:

<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2">
<script type="text/javascript">
var map = null; // the map object
var lat = null; // latitude
var lng = null; // longitude
var locationData = null; // string msg

function showMap(position) {
lat = position.coords.latitude;
lng = position.coords.longitude;
// load map
map = new VEMap('myMap');
map.LoadMap(new VELatLong(lat, lng, 0, VEAltitudeMode.RelativeToGround), 16,
VEMapStyle.Birdseye, false, VEMapMode.Mode2D, true, 1);
}
This will show yourself in a BingMap, in this particular case I used the pretty cool Birdseye style.

No comments:

Post a Comment