mercredi 17 février 2010
J'ai découvert récemment comment intégrer sur un site web une carte du service Bing de Microsoft. Pas nécessairement pour un besoin particulier mais surtout dans le but de comparer l'approche avec celle de Google Maps. Et le résultat n'est pas si désastreux. D'ailleurs, j'aime bien la qualité des images en mode "bird's eye".
Pour vous démontrer comment faire, rien de mieux qu'un snippet de code.
1. Attachez la librairie JavaScript
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>2. Créez un conteneur où afficher la carte
<div id="bingMap" style="position:relative; width:600px; height:500px;"></div>3. Attachez la fonction d'initialisation au chargement de la page
Par JavaScript inline ou par Prototype, jQuery, etc.
<body onload="GetMap();">4. La fonction JavaScript d'initialisation et la configuration
var map = null;Voilà, vous avez une carte de base centrée sur la ville de Montréal (et plus particulièrement le parc Jarry).
function GetMap(){
map = new VEMap('bingMap');
// Normal, Small, etc.
map.SetDashboardSize(VEDashboardSize.Normal);
map.LoadMap();
map.SetCenterAndZoom(new VELatLong(45.534852,-73.628998), 10);
// Road, Hybrid, etc.
map.SetMapStyle(VEMapStyle.Road);
}
Pour connaître la latitude et la longitude exactes, j'ai utilisé le service iTouchMap (hehe, ça utilise Google Maps!) qui permet de positionner le curseur rouge à l'endroit exact où on veut centrer le point (drag & drop). En cliquant sur le marqueur, la bulle indique les coordonnées.
Vous pourrez trouver de la documentation supplémentaire sur les sites suivants :
- Bing Maps Developer Resources
- Bing Maps Portal
- Bing Maps Platform
- SDK Bing Maps (avec exemples et code source)
Merci pour ces infos. Ça m'a bien aidé à démarrer pour intégrer une carte bing.
Je connaissais l'api google map mais pas celle de bing.
Je me trompe ou il n'y a pas de possibilité de récupérer le code d'intégration directement sur le site bing comme on peut le faire sur google map ?