Bing Maps API

Bing Maps is a web service created by Microsoft Corporation which allows end users to search and view maps from any part of the world. It has an API with allows to embed Maps in web pages. This post is an starting point to develop Bing Maps.

In the website http://www.bingmapsportal.com/isdk/ajaxv7 there is all the information about this API and live examples. This library is highly configurable to adjust your website look requirements.

The JavaScript library to include is the following:

http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0

To create a map there are a couple of required elements: the target DIV of the map and a JSON with the Map settings. This JSON at least has to have a property called "credentials" with the developer/company credentials to use the library on any website. There are other properties that may be useful to setup the map. For example:

var mapOptions = {
      credentials: "your credentials",
      width: 490,
      height: 370,
      zoom: 10,
      showMapTypeSelector: false,
      disableBirdseye: true,
      enableSearchLogo: false
}

To create the map, and put it in a <div> with id="mapContentDiv" the code could be:

var _map = new Microsoft.Maps.Map(document.getElementById(mapContentDiv), mapOptions);

To set a pin on a map (also called "Pushpin") you must create a Pushpin object. Example:

var _mapCenter = new Microsoft.Maps.Location(47.5, -122.33), // Latitude, Longitude
    _pushpinOptions = { draggable: false }, // optional setting. Just as an example
    _pushpin = new Microsoft.Maps.Pushpin(_mapCenter, _pushpinOptions);

_map.entities.push(_pushpin); // To set it on the previously created map

You may include all the Pushpins you need.

There's a particularly interesting point at inserting several Pushpins not too far from each other and set a zoom level which permits to view them all. To do this, the code may be:

var _mapLocation1 = new Microsoft.Maps.Location(47.5, -122.33), 
    _mapLocation2 = new Microsoft.Maps.Location(47.51, -122.33);
    _pushpinOptions = { draggable: false }, // optional setting. Just as an example
    _pushpin = new Microsoft.Maps.Pushpin(_mapLocation1 , _pushpinOptions);
_map.entities.push(_pushpin); 
_pushpin = new Microsoft.Maps.Pushpin(_mapLocation2 , _pushpinOptions);
_map.entities.push(_pushpin); 

_map.setView({ bounds: Microsoft.Maps.LocationRect.fromLocations(_mapLocation1, _mapLocation2) }); // As many locations as needed

The next code produces a map like the one below.

var _mapLocation1 = new Microsoft.Maps.Location(47.5, -122.33),
      _mapLocation2 = new Microsoft.Maps.Location(47.51, -122.33),
      _pushpinOptions = { draggable: false },
      _pushpin = new Microsoft.Maps.Pushpin(_mapLocation1, _pushpinOptions);
 map.entities.push(_pushpin);
_pushpin = new Microsoft.Maps.Pushpin(_mapLocation2, _pushpinOptions);
 map.entities.push(_pushpin);

map.setView({ bounds: Microsoft.Maps.LocationRect.fromLocations(_mapLocation1 , _mapLocation2) });

For more information I encourage you to look up on the mentioned API website.