Google Maps og geolocation

Geolocation

Geolocation er bestemmelse af hvor et eller andet befinder sig. Sædvanligvis er det der hvor brugeren selv er, i forbindelse med at finde f.eks. butikker eller seværdigheder i nærheden af hvor man befinder sig. Sammen med kort som Google Maps bruger man det også til at markere hvor f.eks. butikkerne i en bestemt kæde er placeret, så kunderne kan finde den nærmeste butik.

JavaScriptet for at få geolocation til at fungere, består af tre dele:

Bestem koordinaterne
Vis koordinaterne
Håndtering af fejl

For at få JavaScriptet til at fungere på en side, skal der være et felt at skrive i. Her bruger vi en DIV med ID="VisPosition". Af hensyn til at skulle demonstrere funktionen, laver vi her en knap der starter funktionen FindKoordinater. Det ser således ud:

<BUTTON ONCLICK="FindKoordinater()">Find koordinater</BUTTON>

<DIV ID="VisPosition"> </DIV>

Vær opmærksom på, at BUTTON og DIV skal være før JavaScriptet når man skal skrive i DIV'en. Vil man have scriptet i headeren eller som et eksternt script, se denne side.

For at forbinde den DIV vi skal skrive i og de fundne koordinater, skal vi først bruge en variabel, der har fat i feltet. Her bruger vi en getElementById():

<SCRIPT>
var Koordinater = document.getElementById("VisPosition");
</SCRIPT>

Funktionen FindKoordinater() starter med at se om browseren understøtter geolocation. Hvis den gør, afvikles de to næste funktioner VisPosition og VisFejl. I modsat fald, bliver der skrevet en meddelelse om at browseren ikke understøtter geolocation. Så ser koden således ud:

Nu har vi koordinaterne, eller en besked om at der er sket en fejl mens koordinaterne blev fundet. JavaScriptet med funktionen VisKoordinater() ser således ud:

Hvis der er sket en fejl, så der ikke er et sæt koordinater at vise, f.eks. hvis brugeren trykker "Tillad ikke" på browserens forespørgsel om adgang til geolocation-data, er det god latin at have en fejlmeddelelse, at brugeren kan se hvorfor der ikke dukker noget op på skærmen. JavaScriptet med funktionen VisFejl() ser således ud:

<SCRIPT>
var Koordinater = document.getElementById("VisPosition");

function FindKoordinater() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(VisKoordinater, VisFejl);
    } else {
        Koordinater.innerHTML = "Denne browser understøtter ikke Geolocation.";
    }
}

function VisKoordinater(position) {
    Koordinater.innerHTML = "Breddegrad: " + position.coords.latitude + "<BR>Længdegrad: " + position.coords.longitude;
}

function VisFejl(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            Koordinater.innerHTML = "Brugeren afviste forespørgslen på Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            Koordinater.innerHTML = "Information om lokation er ikke tilgængelig."
            break;
        case error.TIMEOUT:
            Koordinater.innerHTML = "Forespørgslen på brugerens lokation er stoppet (time out)."
            break;
        case error.UNKNOWN_ERROR:
            Koordinater.innerHTML = "En ukendt fejl er opstået."
            break;
    }
}
</SCRIPT>

På skærmen kommer det til at se således ud:

Til det viste eksempel har vi blot bedt om længde- og breddegrad, men har man brug for det, returnerer getCurrentPosition() en del andre data, som man kan trække ud, hvis man synes, f.eks. højde over havets overflade. Dette forudsætter naturligvis, at informationerne om lokationen er tilgængelige. De returnerede værdier man kan trække ud er:

Property	Returnerer
coords.latitude	Breddegraden som decimaltal (returneres altid)
coords.longitude	Længdegraden som decimaltal (returneres altid)
coords.accuracy	Positionens nøjagtighed (returneres altid)
coords.altitude	Højde over havets gennemsnitlige overflade i meter (returneres hvis tilgængelig)
coords.altitudeAccuracy	Nøjagtigheden af positionens højdeangivelse (returneres hvis tilgængelig)
coords.heading	Retningen som grader i urets retning fra nord (returneres hvis tilgængelig)
coords.speed	Hastigheden i meter pr. sekund (returneres hvis tilgængelig)
timestamp	Dato/tid for respons (returneres hvis tilgængelig)

Geolocation ved bevægelse

Skal man bruge fortløbende opdatering af geolocation fordi man er i bevægelse, f.eks. en GPS, har man i stedet for getCurrentPosition() funktionen watchPosition(). Fordi hele tiden vil stå og opdatere, dvs. bruge båndbredde og mobildata, skal man kunne slukke for den, hvis man vil. Dette gøre med clearWatch().

Google Maps

En praktisk ting: Google Chrome fra ver. 50 og frem kræver en sikker linje, dvs. HTTPS i stedet for HTTP, for at kunne afvikle Geolocation API'en, dvs. vise et kort med lokationen. For de andre browsere, hvor noget tilsvarende ikke allerede er sket, kan man forvente, at det kun er et spørgsmål om tid, inden de indfører de samme krav.

For at få adgang til at kunne bruge Google Maps til fulde, skal man bruge en Key, dvs. man skal oprette et projekt i Google APIs. Det gør man her, og det er gratis. Det er en lidt omstændig proces at få startet op, så her skal man være lidt tålmodig.Det man især skal være opmærksom på, er, at der til maps er ret mange forskellige API'er, og hvilken der skal vælges for at det fungerer, er ikke helt indlysende når man starter op. Her kan jeg kun anbefale at prøve at aktivere API'erne til det fungerer. Man kan bruge dele af Google Maps uden en Key, og det der bliver gennemgået her, er eksempler med og uden Key.

I sin simpleste form, ser JavaScriptet, som viser et kort, således ud:

Da vi imidlertid skal bruge kortet til at vise specifikke områder, skal vi have en del mere end denne ene linje.

Hvis vi nu starter med et helt almindeligt udsnit af et kort, hvor vi kender koordinaterne. Det kunne f.eks. være Rådhuspladsen i København. Løsningen består af tre dele:

Et felt til at have kortet i. Her bruger vi en DIV med ID="GoogleMap1", og i dette tilfælde specificerer vi størrelsen på kortet her.
Et JavaScript hvor vi specificerer koordinater og hvor meget der skal zoomes ind.
Et JavaScript som er et API-kald med ens Key (vær opmærksom på, at den indsatte Key kun fungerer for dette site)

Så ser koden spledes ud:

<DIV ID="GoogleMap1" STYLE="width:600px; height:400px;"></DIV>

<SCRIPT>
function myMap() {
    var mapProp= {
        center:new google.maps.LatLng(55.67591419999999,12.569128399999954), zoom:17,
    };
    var map=new google.maps.Map(document.getElementById("GoogleMap1"),mapProp);
}
</SCRIPT>

<SCRIPT SRC="https://maps.googleapis.com/maps/api/js?key=IndsætKeyHer&callback=myMap"></SCRIPT>

Resultatet på skærmen ser således ud:

Hvis man i stedet for et specifikt sted på kortet vil have kortet til at vise området hvor man befinder sig, dvs. en GPS-funktion, skal vi have kombineret vis kort og geolocation. Vi laver nu en funktion, som vi kalder LocalMap, som er en omskrivning af MyMap, som erstatter funktionen VisKoordinater, og i stedet for de faste koordinater, indsætter vi koordinaterne der bliver fundet med funktionen FindKoordinater(). Så ser koden således ud (ændringer fremhævet med fed skrift):

<BUTTON ONCLICK="FindKoordinater()">Find koordinater</BUTTON>

<DIV ID="GoogleMap2" STYLE="width:600px; height:400px;"></DIV>

<SCRIPT>
var Koordinater = document.getElementById("GoogleMap2");

function FindKoordinater() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(LocalMap, VisFejl);
    } else {
        Koordinater.innerHTML = "Denne browser understøtter ikke Geolocation.";
    }
}

function LocalMap(position) {
    var LocalMapProp= {
        center:new google.maps.LatLng(position.coords.latitude,position.coords.longitude), zoom:17,
    };
    var map=new google.maps.Map(document.getElementById("GoogleMap2"),LocalMapProp);
}

function VisFejl(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            Koordinater.innerHTML = "Brugeren afviste forespørgslen på Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            Koordinater.innerHTML = "Information om lokation er ikke tilgængelig."
            break;
        case error.TIMEOUT:
            Koordinater.innerHTML = "Forespørgslen på brugerens lokation er stoppet (time out)."
            break;
        case error.UNKNOWN_ERROR:
            Koordinater.innerHTML = "En ukendt fejl er opstået."
            break;
    }
}

<SCRIPT SRC="https://maps.googleapis.com/maps/api/js?key=IndsætKeyHer&callback=myMap"></SCRIPT>
</SCRIPT>

På skærmen kommer det til at se således ud: