Google Maps erbjuder gratis kartor till hemsidor. Det finns ett otal antal variationer på kartor och funktioner man kan välja mellan. Jag har valt en enkel karta där adressen pekas ut och med ett informationsfönster där adressen står skriven. Adressen i mitt exempel är till Sveriges Television i Stockholm.
Skapa en html-sida och lägg till följande kod:
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Min karta</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=nyckel" type="text/javascript"></script>
<script type="text/javascript"> function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
var point = new GLatLng(latitud, longitud); //ersätt latitud och longitud med adressens koordinater
map.setCenter(point, 15);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml("Sveriges Television<br>Oxenstiernsgatan 26-34<br>105 10 STOCKHOLM<br>Sweden"); }
} </script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
Nu behöver du ändra lite i koden. Gå först till sidan http://perso.orange.fr/universimmedia/geo/loc.htm för att få de exakta geografiska koordinaterna för adressen du vill ska visas på kartan. Fyll i adressen för att få fram longituden och latituden.
Ersätt i din kod "latitud" och "longitud" med siffrona du fick fram.
Byt ut adressen i koden.
Gå in på http://www.google.com/apis/maps/ och signa upp för Google Maps genom att klicka på "Sign up for a Google Maps API key". Längst ner på sidan skriver du in adressen till din hemsida, klickar i "have read and agree with the terms and conditions" och klickar på "Generate API Key". Nu får du en nyckel som du ska sätta in i din kod: ersätt ordet "nyckel" i koden med din nyckel.
Klart! Nu har du en snygg och funktionell karta på din hemsida!
14 kommentarer:
Mycket smidigt.
Hej! Får inte riktigt till ngn karta. Den enda som syns när jag är klar med alla ändringar är:
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
Vad gör jag för fel tro?
/Åsa
Hej Åsa!
Det är svårt att svara på men förmodligen har du glömt att lägga in en del av koden eller skrivit någon tagg felaktigt.
Jag hoppas du får rätt på det!
Tackar.
Hejsan! Det här varju en väldigt användbar kod måste jag säga, men hur fungerar det om man skulle vilja lägga in två kartor på samma sida? Jag har ändrat div id:et så att det är två olika men sen misstänker jag att det är fler ställen man skulle behöva ändra på, men vilka?
Hej pok!
Du får lägga till nya variabler i koden fast med nya namn, t ex var map2, var point2 och var marker2 och sedan använda dessa också i funktionerna, t ex map2.setCenter(point2, 15); osv. Och som du skriver, en ny div-tagg såklart! Lycka till!
Funkar inte för mig heller,får samma fel som Åsa.
Jag kan bara rekommendera att du kollar koden väldigt noga efter stavfel osv. Du kan också se Googles egna exempel på sidan http://code.google.com/intl/sv-SE/apis/maps/documentation/examples/index.html. Lycka till!
Tusen tack. Fantastiskt att det funka. Jag som inte är någon supervass programerar lyckas lös detta.
Jag har lagt in min karta genom att kopiera html koden som kommer upp via googles hemsdia när man skapar kartan. har nu ett problem att den öppnar inte upp bifogade länkar i nytt fönster utan i den inbäddade kartan. Det fungerade ett tag men sen börjar den så här!?
kolla in http://www.golfjoytravel.se/SPCBvalledel.htm
Någon som har ett tips?
Hej GJT! Jag kan inte se din kod - men har du möjlighet att lägga in target="_top" i a-taggen för >>läs mer så ska det fungera. Lycka till!
Hälsningar Liza
Hej Lisa!
Jag försökte följa dina steg och gjorde de ändringar du nämnt. Dock stod det att det inte behövdes en API Key på Googles hemsida. Försökte också leta upp lösenord i koden men kunde inte hitta denna.
Funkar det bra även utan sista steget?
Stort tack!//PJ
Hej PJ!
Det är ganska längesedan jag skrev inlägget och Google verkar ha ändrat en del. Bästa är att läsa mer på deras sidor om kartor.
Lycka till!
Hälsningar
Toppen, tack för tipset!
Skicka en kommentar