Bing Maps Ajax Control v7 – Hello World Sample


We recently just announced the latest Bing Maps Ajax Control v7.  I wanted to start with some simple “Hello World” samples to help get you started developing with v7. 

First, you must go the Bing Maps Account Center and sign up for a free developer account and get a Bing Maps Key.  You will use this key as credentials for Bing Maps applications you develop.

Once you have a developer key, create a simple HTML file with the following content:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Bing Maps Ajax Control v7 – Hello World Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

<script type="text/javascript">
function createMap()
{
   var mapOptions = { credentials:"<Insert Your Bing Maps Key Here>" }
   var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions );
}
</script>
</head>

<body onload="createMap();">
<div id=’mapDiv’ style="position:absolute; width:800px; height:600px;"></div>
</body>
</html>

First you must include the source to the v7 map control by including a reference to the Bing Maps v7 source. 

<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

Then, create a div in the page to host the map.  For this sample, we set the map to 800 x 600 pixels by setting the style of the div.

<div id=’mapDiv’ style="position:absolute; width:800px; height:600px;"></div>

Then, instantiate the Map object in the div with the following script. Insert your Bing Maps Key from above for the credentials property of the map options.

   var mapOptions = { credentials:"<Insert Your Bing Maps Key Here>" }
   var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions );

When loading this page, you will see the following map.  Click the image or link below to load the sample:

Bing Maps Ajax Control v7 Hello World Sample 1

Bing Maps Ajax Control v7 – Hello World Sample 1

Notice by default the Map appears with the “Automatic “ map style.  You can change the initial map view by setting some additional properties in the map options.  For example, the following code will load the map in Road style zoomed in at a location by setting the mapTypeId, center, and zoom properties:

var mapOptions = 
{
      credentials:"<Insert Your Bing Maps Key Here>" ,
      mapTypeId:Microsoft.Maps.MapTypeId.road,
      center: new Microsoft.Maps.Location(37.77637, -122.42212),
      zoom: 13
}

var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions );

When loading the map with these options, you will see the following map.  Click the image or link below to load the sample:

Bing Maps Ajax Control v7 Hello World Sample 2

Bing Maps Ajax Control v7 – Hello World Sample 2

Here’s another sample, where the map is loaded in Birdseye at a particular location with the label overlay turned off:

var mapOptions = 
{
      credentials:"<Insert Your Bing Maps Key Here>",
      mapTypeId: Microsoft.Maps.MapTypeId.birdseye,
      center: new Microsoft.Maps.Location(37.794973,-122.393542),
      zoom: 17,
      labelOverlay: Microsoft.Maps.LabelOverlay.hidden
}
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions );

Bing Maps Ajax Control v7 Hello World Sample 3 

Bing Maps Ajax Control v7 – Hello World Sample 3

For more information on developing with v7 map control, see the Bing Maps Ajax Control v7 SDK.


Comments (8)

  1. DDaviesBrackett says:

    v7 is leaner and faster and prettier than v6, for sure.  But some of the feature loss hurts, like not having access to everything .Find() could do through the REST API – specifically, the Search service.

    Are there plans to expose the Search SOAP API to REST?

  2. Kumud says:

    I was working on v6 for quite some time and today I was looking at v7. Find() is a very useful feature for developer. Are there any plans to include this feature into v7?

  3. keithkin says:

    Thanks for the feedback!  Have you tried using the Bing Maps Geocode REST service with the v7 control? See msdn.microsoft.com/…/gg427601.aspx for more details. What parts of the Find call are you specifically interested in using?

  4. olekku says:

    Hi keithkin, I read the geocode article you mentioned. But how do I find "hotels near Bellevue, WA"? Find() method of previous control really made such tasks easy.

    Thanks.

  5. keithkin says:

    Thanks for the feedback. Yes, the Find method from v6 currently does not exist in v7. Currently you would have to use the search SOAP service msdn.microsoft.com/…/cc980849.aspx.  We are looking at ways to better provide this functionality for v7 users in the future.

  6. Nick Sadowy says:

    I just started playing with the V7 control today.  We've been using the previous AJAX controls since they first came out.  Isn't it a security risk to place your Bing Maps Key into a javascript file where anyone can see it?  If they have this key, can't they then access our metered map usage resulting in us getting charged if they put our key into their application?  If this is an issue, then what is the correct way to implement this?

  7. Hasan says:

    I am trying to use FindNearBy feature from V6.3 and the GeoLocation from V7. How do I combine them together so I can get the Current Location and then show the user any type of verticals, lets say Restaurant, within a certain radius of the user's current location? Really having a hard time and if someone can help would be really helpful!

    Thanks

  8. Sonali says:

    Excellent  example….thnks..

    Now I want to map the shape file with bing map.

    Can u please help???