Bing Maps – Embedded Maps

Developing with Bing Maps is great fun but not everybody wants to fire up his Visual Studio to get a map on his website. With the latest launch – Chris Pendleton blogged about it here, here, here and here – we also introduced embedded maps. Embedded maps in it’s most simple form can just be generated from our consumer facing site http://bing.com/maps. Just navigate the map to the place that you want to show and then click on the “Share” button.

image

This will bring up a dialog where you can copy a link that will get you back to http://bing.com/maps and recreate the current map-view. That is not really new, it has been there before but there is now also another area where you can copy a piece of HTML-code that you can paste into your website in order to embed a static or interactive map.

image

The link “Customize and preview” brings up another dialog that allows you to further customize this piece of HTML-code:

image

As you can see this gives you plain maps with the roadmap or aerial images but in order to see the nice Bird’s Eye view you have to use the link underneath the map that get’s you back to http://bing.com/maps.

In our Bing Maps AJAX SDK we have however now also a couple of changes and one of these allows you to create more comprehensive embedded maps by using additional URL-parameters.

Parameter Name Description

mapMode

The style of the map. Valid values are: Road, Aerial, AerialWithLabels, Birdseye, BirdseyeWithLabels

zoomLevel

An int indicating a valid zoom level for the map style.

center

Two doubles separated by an underscore that are the latitude and longitude values of the coordinate of the center of the map.

heading

A double specifying the orientation of the map in degrees.

pushpins

Two doubles separated by an underscore that are the latitude and longitude values of the coordinate of the pushpin. Multiple pushpin locations are separated by a ~.

culture

A valid culture string. The default value is “en-us”.

So this iFrame for example…

<iframe height="400" 
marginheight="0"
src="http://dev.virtualearth.net/embeddedMap/v1/ajax/Birdseye?
zoomLevel=19&amp;
center=51.46130379870268_-0.9260680852445592&amp;
heading=180"
frameborder="0"
width="100%"
marginwidth="0"
scrolling="no">
</
iframe>

…gives as a nice Birds Eye view of the Microsoft office in Reading facing south:

image

Since we also launched a Bing Maps Silverlight control we have the same approach for embedded maps available for Silverlight too. Here is the iFrame:

<iframe height="400" 
marginheight="0"
src="http://dev.virtualearth.net/embeddedMap/v1/silverlight/Aerial?
zoomLevel=17&amp;
center=51.461600455334924_-0.9259327501058578&amp;
pushpins=51.461550321682765_-0.9256913512945175"
frameborder="0"
width="100%"
marginwidth="0"
scrolling="no">
</
iframe>

and here is the result:
image

Advertisements
This entry was posted in Bing Maps. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

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