Das Einbinden von Bing Maps auf der Webseite gestaltet sich sehr ähnlich wie Google Maps. Die freie jährliche Nutzung liegt bei 10Millionen Requests im Jahr, danach muss gezahlt werden
Als erstes benötigt man einen Key, den man kostenlos mit Hilfe eines Windows-ID Kontos (z.B. per Hotmail Account) anfordern kann und automatisch bekommt hier.
Microsoft bietet 5 verschiedene Bibliotheken mit kombinierbaren Funktionalitäten an, wobei die Map Control Bibliothek die wichtigste für Web Developer mit Javascript ist. U.a. gibt es eine Bibiliothek für Windows Store Apps und auch interessant einen Rest Service für Geocoding Anfragen (auch Reverse Geocoding) sowie Routenberechnung. Einen Überblick über alle Bibliotheken gibt es hier.
Für den Anfang kann man ein Karte schnell mit dem folgenden Code und seinem Key testen:
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=de-DE"></script>
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
<script type="text/javascript">
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
{credentials: "key_here",
center: new Microsoft.Maps.Location(45.5, -122.5),
mapTypeId: Microsoft.Maps.MapTypeId.road,
zoom: 7});
</script>
oder sauberer als Javascript Klasse:
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=de-DE"></script>
<script type="text/javascript" src="bing.js"></script>
<div id='bingmapsDiv' style="position:relative; width:400px; height:400px;"></div>
<script type="text/javascript">
var bingMaps = new BingMaps("bingmapsDiv");
</script>
und mit der bing.js Klasse:
function BingMaps(mapId){
this.mapId = mapId;
this.key = "my_key";
this.initMap = function(){
var map = new Microsoft.Maps.Map(document.getElementById(this.mapId),
{credentials: this.key,
center: new Microsoft.Maps.Location(45.5, -122.5),
mapTypeId: Microsoft.Maps.MapTypeId.road,
zoom: 7});
}
this.initMap();
}