brianbak.dk

brianbak.dk

profile-pic
Maps
Lav din egen løberuteplanlægger

Guide til at lave din egen løberuteplanlægger med JavaScript og Google Maps API

August 2, 2019

Hvad kan denne guide?


Dette er ikke en komplet guide, til hvordan du laver hele siden. Jeg går ud fra, at du kender noget til JavaScript og HTML og ved lidt om hvad Google APIer er for nogle. Jeg vil prøve, at gøre det så klart som muligt.


Først skal du bruge en key til Maps


Du skal have en Google konto og oprette dit projekt. Gå til https://console.developers.google.com for at se din konto. Hvis du ikke har en, skal du oprette en. Link: https://developers.google.com/maps/documentation/javascript/get-api-key. Det er gratis, også selv om du skal lave en billing account, med dit betalingskort.

Before you can start using the Google Maps Platform APIs and SDKs, you must sign up and create a billing account. To learn more, see Get Started with Google Maps Platform.

Du får flere tusind gratis requests om dagen gratis, og Google trækker ikke noget på dit kort, før du har accepteret det. Du får også noget i stil med 2.000 kr. gratis, til at bruge til Google Cloud i et år. Det kan virke skræmmende at oprette en "Google billing account", men du bliver altså ikke bonget for noget. Hvis der skulle være misbrug på din side, eller du får en masse trafik, så får du en mail fra Google, hvor du skal acceptere, at de trækker penge, ellers lukker de bare for flere requests. Jeg har prøvet begge dele og er aldrig blevet trukket uden min accept. Hvis du forventer at få meget trafik, kan du nemt lave grænser og alarmer på din billing account.


Når du har en key, så går vi videre til CSS og HTML


Godt. Nu har du en maps key, så kan vi gå videre. Du skal lave et HTML element med id "map" og det skal styles med en højde. Det er de eneste krav, men du selvfølgelig style alt det du vil. I mit eksempel bruger jeg også 100% width. Vi skal også bruge et sted, til at skrive hvor mange meter ruten er og i mit eksempel bruger jeg id=total.


<style>
#map {
    height: 600px;
    width: 100%;
}
</style>

<body>
    <p>Afstand: <strong><span id="total">0</span></strong> meter</p>
    <div id="map"></div>
</body>

Og så til JavaScript


Lad os starte med slutningen. Vi skal lave et kald til Google Maps med vores key. Vi har brug for polygoner, som er i Maps Library "geometry". Den er ikke inkluderet som default, så det er vigtig, at vi inkluderer den. Og vi skal selvfølgelig også skrive vores key. Så efter vores JavaScript, som kommer snart, skal vi skrive:

<script async defer src="https://maps.googleapis.com/maps/api/js?key=DIN_MAPS_KEY&libraries=geometry&callback=init" type="text/javascript"></script>

HUSK at udskifte DIN_MAPS_KEY med din egen key. Det andet du skal lægge mærke til, er at callback er init. Det er den function vi skriver om lidt. Du kan kalde den hvad som helst, bare du også kalder din function det samme.

Det første jeg gør er at fjerne alle POI fra kortet. Det er 100% valgfrit at style dit kort, men hvis du har lyst til det, kan du finde en guide her: https://mapstyle.withgoogle.com/

Det næste er at lave en variabel "step". Den skal tælle hvor mange gange, man har trykket på kortet.

Derefter opretter vi kortet, med centrum et sted. Du kan finde kordinater på Google Maps. Resten af variablerne giver sig selv, og du kan lege med dem, alt det du vil.

function init() {
    var step = 0;
    var styledMapType = new google.maps.StyledMapType(
        [
            {
                "featureType": "administrative",
                "elementType": "geometry",
                "stylers": [
                    {
                        "visibility": "off"
                    }
                ]
            },
            {
                "featureType": "poi",
                "stylers": [
                    {
                        "visibility": "off"
                    }
                ]
            },
            {
                "featureType": "road",
                "elementType": "labels.icon",
                "stylers": [
                    {
                        "visibility": "off"
                    }
                ]
            },
            {
                "featureType": "transit",
                "stylers": [
                    {
                        "visibility": "off"
                    }
                ]
            }
        ],
        {name: 'Styled Map'});

    var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 55.937, lng: 9.125},
        zoom: 7,
        mapTypeControlOptions: {
            mapTypeIds: []
        },
        draggableCursor:'crosshair',
    });
    var poly = new google.maps.Polyline({
        strokeColor: '#000000',
        strokeOpacity: 1,
        strokeWeight: 3,
        map: map
    });
                                

Så laver vi et klik-event som kalder funktionen, der tegner linjen. Derefter laver vi et array ( path2 ), som holder øje med, hvor mange gange vi har trykket. Til sidst bruger vi funktionen computeDistanceBetween, til at udregne afstanden mellem punkterne og lægger dem til "total". Og det er sådan set det :)


    google.maps.event.addListener(map, 'click', function(event) {
        addLatLngToPoly(event.latLng, poly);
    });

    map.mapTypes.set('styled_map', styledMapType);
    map.setMapTypeId('styled_map');

    let path2 = [];
    let total = 0;

    function addLatLngToPoly(latLng, poly) {
        step++;
        path2[step] = latLng;
        if (step > 1) {
            let distance = google.maps.geometry.spherical.computeDistanceBetween (path2[step], path2[step - 1]);
            total += distance;
            document.getElementById('total').innerHTML = Intl.NumberFormat().format(Math.round(total));
        }
        let path = poly.getPath();
        path.push(latLng);
    }
}
                        

Det var det hele. Du kan gemme ruten med Googles encoded sting: let encodeString = google.maps.geometry.encoding.encodePath(path);


Det var det. Hvis du har spørgsmål er du meget velkommen til at skrive til mig.

Kommentar

  • mig
    06/08 - 2019

    jeg har lige fået det som opgave og har fået en uge. Nu har jeg fri i 5 dage. tak

  • jQuery lover!
    03/08 - 2019

    Ingen jQuery? Hvad fan' Brian! Du kunne godt lige have lavet bare lidt jQ. Ej, fed tut.

  • blabla
    02/08 - 2019

    blabla lafksj alfkjs kja fe

  • Signe
    02/08 - 2019

    Så dit link på uni. Fedt at se hvor simpelt det kan gøres. Meget inspirerende. Tak for det.

  • Pssss
    02/08 - 2019

    Nice hjemmeside

  • Nicolai
    02/08 - 2019

    LOL! Du har altid en nemmere måde at gøre ting på Brian ;) Godt gået

  • Peter Sørensen
    02/08 - 2019

    Jeg har prøvet at efterligne loeberute.dk javascript, men kunne ikke få det til at virke. Denne måde er meget nemmere! :D Tak for det :) Jeg bliver riiig!

Skriv en kommentar