Utvecklingstips

Skapa en snygg karta i din blogg med Bing Maps

Numera har Bing ett Javascript API som väldigt mycket påminner om Google Maps. Jag tycker att kartorna på Bing är snyggare än Google Maps och de växlar automatiskt mellan visningslägen på ett sätt som gör att man förstår vad som händer utan att ha massor av reglage. Däremot är de flesta exemplen ganska fula och innehåller för mycket extrafunktioner som inte behövs, dessutom är alla exempel med amerikanska exempel vilket gör det svårt att se hur det kan se ut i Stockholm.

Länk till dokumentationen: http://msdn.microsoft.com/en-us/library/gg427610.aspx

Api key skapar du så här: http://msdn.microsoft.com/en-us/library/ff428642.aspx

Tyvärr är dokumentationen väldigt svårnavigerad vilket gör det svårt att hitta bra exempel, därför kommer här ett litet exempel för att komma igång. Exemplet sätter ut en kartnål centrerad på en gata i Stockholm med lagom stor zoomnivå och gömmer så mycket verktygsfält och logotyper som möjligt.

Men, när man kommit över dessa hinder blir resultatet väldigt fint tycker jag.



<div id='mapDiv' style="position:relative;float:right; width: 400px; height:320px;"></div>      

     <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=sv-SE"></script>

     <script type="text/javascript">

         function GetMap() {

             // Initialize the map

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

                         { showDashboard:false, showScalebar : false, showLogo:false, credentials: "yourapikey" });// get your api key

              // Retrieve the location of the map center

              var center =new Microsoft.Maps.Location(59.3404564801125, 18.049845556217);

             // Add a pin to the center of the map

             var pin = new Microsoft.Maps.Pushpin(center, { text:'1' });

              map.entities.push(pin);

              map.setView({ center: center, zoom: 15 });

          }

         // we have jquery loaded, otherwise just attach this to onload or run it directly

          $(this).ready(function () {

              GetMap();

          });

     </script>
Andra bloggar om: 
 
Christian Landgren

2010-12-01 kl. 13:13

Web Analytics