-
Google Maps API – kartor, kartor, kartor
Med Google Maps APIet är det förvånadsvärt snabbt och enkelt att lägga till en väl fungerande karta till en applikation eller sajt. Användbarheten och det imponerande resultatet gör att väldigt vanligt med mashups som visar information på Google Maps, det har gått så långt att många tänker direkt på Google Maps när de hör ordet mashup. För att dra en finkänslig parallell så kan man säga att precis som porren drev på populariteten av Video och av Internet så driver Google Maps på populariteten av mashups.
VARNING: Google Maps API är en inkörsport som lätt kan leda till tyngre mashups. Använd på egen risk.
Det finns många möjligheter med att använda kartor. Om du har en butik så är det ett enkelt sätt att visa folk var den ligger så att de lätt kan hitta dit. Har du en köp-sälj sajt så kan du visa köparna var säljarna finns. Genom att använda kartor kan man också snabbt få en överblick av komplex information som det är omöjligt att få genom att bara läsa text, ett bra exempel är om man kunde ha en karta som visar skillnader i huspriser mellan olika områden i en stad. Då kan man lätt se var man har råd att leta efter ett nytt hus. Kunde man dessutom lägga till information om dagis, skolor, brottslighet, joggingslingor etc så har man genast en väldigt värdefull tjänst.
Google Maps API är helt byggt på Javascript. APIet använder avancerad AJAX, dvs att javascript koden som körs i din webbläsare kallar Googles kartservrar i backgrunden utan att du behöver ladda om sidan. Om du inte kommer att ha väldigt många användare av din Google Maps applikation så är det helt gratis att använda (läs mer om begränsningarna här), men tänk på att Google kommer att visa annonser på kartorna i framtiden. För tillfället så experimenterar de med detta i vissa delar av USA, så i Sverige finns inga annonser än, men det kommer garanterat i framtiden.
En enkelt karta
Det allra lättaste sättet att börja experimentera med Google Maps är att kopiera exempelkod från deras dokumentation. Genom att kopiera det enklaste exemplet (med en liten ändring vad gäller API nyckeln, se nedan) så får vi följande karta:
Eftersom det är ett Google exempel så är givetvis kartan centrerad på deras huvudkontor i Mountain View utanför San Fransisco. Detta är redan en rätt avancerad karta. Man kan zooma genom att dubbelklicka i kartan, man kan flytta sig i kartbilden genom att dra kartan åt olika håll.
Så här ser koden ut som genererar kartan:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Maps JavaScript API Example: Simple Map</title> <script src="http://maps.google.com/maps?file=api&v=2&key=MIN_NYCKEL type="text/javascript"></script> <script type="text/javascript"> function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); } } </script> </head> <body onload="initialize()" onunload="GUnload()"> <div id="map_canvas" style="width: 500px; height: 300px"></div> </body> </html>Låt oss gå igenom de viktiga delarna av koden:
- Importera javascript från
http://maps.google.com/maps. Som parameter till denna javascriptimport måste man ange sin egen “key”, dvs Google Map API Key. Denna nyckel används för att identifiera dig som användare. Du kan lätt skaffa en egen nyckel för dina egna kartor. En nyckel är bunden till en speciell domän och fungerar inte på andra domäner, tex den nyckel jag använder för exemplet ovan fungerar endast från domänen mashup.se. Det finns vissa begränsningar vad man kan använda sin nyckel till och hur mycket man får använda den, men om du inte ska använda Google Maps på massiv skala så är det inga problem. - Kör javascript funktionen
initializenär sidan har laddats. I den funktionen så kollas först om webbläsaren kan klara av Google Maps avancerade javascript (det kan alla moderna webbläsare) och om så är fallet så skapas ett GMap2 objekt, detta objekt är själva kartan. Kartan placeras i ett HTML element med id “map_canvas” och centreras på en viss latitude och longitude. - Sist, men inte minst, så måste vi ha en html
divmed id “map_canvas” (eftersom det är id som användes iinitialize. Storleken på dennadivbestämmer storleken på kartan.
Mer avancerade kartor
Med några rader javascript till så kan man lägga till zoomkontroller, söka på addresser och visa dem på kartan, visa satellitbilder, få anvisningar hur man tar sig från en address till en annan, få kartan och kontrollerna på svenska (använd parametern
hl=svnär du importerar Google Maps javascriptfilen) etc etc.Några bra resurser för att läsa mer om Google Maps är:
- Google Maps Demo Gallery – få inspiration och se möjligheterna genom att ta en titt på några coola demos.
- 17 Google Maps Mashups To Waste Away Your Day – inspirerande lista från Mashable
- Google Maps API Reference – alla detaljer om alla javascript classer som Google Maps APIet består av.
- Google Maps Mania – bra blog om Google Maps och intressanta användningar av Google Maps.
- Google Maps API Tutorial – en väldigt informativ sida med tutorials om Google Maps.
Relaterade inlägg
Om Andreas Krohn
Driver mashup.se och jobbar på Dopter AB med rådgivning, analys, utveckling och användandet av öppna APIer. Gillar att experimentera med nya teknologier och att bygga egna lösningar. Driver bla Twittoppen och APIHQ. Kontakta mig på @andreaskrohn, andreas@dopter.se eller 0709-780794 om ni vill ha hjälp med ett API eller om ni vill diskutera affärs- och marknadsföringspotentialen med öppna APIer.
- Importera javascript från
Pingback: API Måndag – Handelsbanken, Länsförsäkringar och Google Maps « API – Mashup.se