API / Geocoding / Map / Programmings

Adding Bing Interactive Maps to Your Website

You may need to add maps during website development to satisfy various customer needs. Some one needs to locate their shop and branches,some one else wants to locate their clients worldwide etc. You can use bing maps as Facebook and Nokia does. But the real problem you are going to face is the lack of local data as much as google maps providing you (In US and Canada,Bing provides good services). This problem can be overcome by using geocoding(obtaining geographical coordinates) from other maps with sufficient local data and reverse geocode with Bing Map.(Refer my previous post ‘Geocoding With Google Maps‘).

For Using Bing maps, first you have to obtain key from Microsoft according to your traffic and nature of the use as trial or basic or Enterprise.You need to Create a Bing map account using any microsoft mail ID.(hotmail,live or outlook.com) at https://www.bingmapsportal.com.(for more details refer ‘Getting a Bing Maps Key‘).

A simple example Demonstrating Bing Map Search Module.

Replace map option (credentials:) ‘Your Bing Maps Key’ in code with a valid bing map key obtained from bing account, otherwise a warning text will be shown in the middle of map.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Load map with Search Module</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;
var searchManager = null;
function getMap()
{
map = new Microsoft.Maps.Map(document.getElementById('myMap'),
           {credentials: 'Your Bing Maps Key'});
}
function createSearchManager()
{
map.addComponent('searchManager', new Microsoft.Maps.Search.SearchManager(map));
searchManager = map.getComponent('searchManager');
}
function LoadSearchModule()
{
Microsoft.Maps.loadModule('Microsoft.Maps.Search', { callback: geocodeRequest })
}
function geocodeRequest()
{
createSearchManager();
var where = document.getElementById('loc').value;
var userData = { name: 'Maps Test User', id: 'XYZ' };
var request =
{
where: where,
count: 5,
bounds: map.getBounds(),
callback: onGeocodeSuccess,
errorCallback: onGeocodeFailed,
userData: userData
};
searchManager.geocode(request);
}
function onGeocodeSuccess(result, userData)
{
if (result) {
map.entities.clear();
var topResult = result.results && result.results[0];
if (topResult) {
var pushpin = new Microsoft.Maps.Pushpin(topResult.location, null);
map.setView({ center: topResult.location, zoom: 10 });
map.entities.push(pushpin);
}
}
}
function onGeocodeFailed(result, userData) {
alert('Geocode failed');
}
function check_enterkey(e)
{
if(e.which==13){
LoadSearchModule();
}
}
</script>
</head>
<body onload="getMap();">
<div id='myMap' style="position:relative; width:400px; height:400px;"></div>
<div>
<input type="text" name="loc" id="loc" onkeypress="check_enterkey(event);" />
<input type="button" value="Find Address" onclick="LoadSearchModule();" />
</div>
</body>
</html>

Follow Mohammed Safeer On twitter.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s