sorenmt84 Novice
21. januar 2017 - 10:34 Der er 2 kommentarer

Google maps api - opdater til visning af nuværende lokation

Jeg har fundet dette api script til google maps, der viser et kort og hvor man så kan klikke på det og indsætte en markør og koordinaterne vises i en form neden for.
Jeg kunne godt tænke mig at få det opdateret, så det ved load tager den nuværende lokation for den der loader siden og indsætter en markør der. Efterfølgende kan brugeren så flytte på den, hvis den ikke er helt korrekt.

Kan du hjælpe?

html fil:
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
          #map{ width:700px; height: 500px; }
        </style>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=123"></script>
        <title>Save Marker Example</title>
    </head>
    <body>
        <h1>Select a location!</h1>
        <p>Click on a location on the map to select it. Drag the marker to change location.</p>
       
        <!--map div-->
        <div id="map"></div>
       
        <!--our form-->
        <h2>Chosen Location</h2>
        <form method="post">
            <input type="text" id="lat" readonly="yes"><br>
            <input type="text" id="lng" readonly="yes">
        </form>
       
        <script type="text/javascript" src="map.js"></script>
    </body>
</html>


map.js:
//map.js

//Set up some of our variables.
var map; //Will contain map object.
var marker = false; ////Has the user plotted their location marker?
       
//Function called to initialize / create the map.
//This is called when the page has loaded.
function initMap() {

    //The center location of our map.
    var centerOfMap = new google.maps.LatLng(56.169536, 9.549851);

    //Map options.
    var options = {
      center: centerOfMap, //Set center.
      zoom: 17 //The zoom value.
    };

    //Create the map object.
    map = new google.maps.Map(document.getElementById('map'), options);

    //Listen for any clicks on the map.
    google.maps.event.addListener(map, 'click', function(event) {               
        //Get the location that the user clicked.
        var clickedLocation = event.latLng;
        //If the marker hasn't been added.
        if(marker === false){
            //Create the marker.
            marker = new google.maps.Marker({
                position: clickedLocation,
                map: map,
                draggable: true //make it draggable
            });
            //Listen for drag events!
            google.maps.event.addListener(marker, 'dragend', function(event){
                markerLocation();
            });
        } else{
            //Marker has already been added, so just change its location.
            marker.setPosition(clickedLocation);
        }
        //Get the marker's location.
        markerLocation();
    });
}
       
//This function will get the marker's current location and then add the lat/long
//values to our textfields so that we can save the location.
function markerLocation(){
    //Get location.
    var currentLocation = marker.getPosition();
    //Add lat and lng values to a field that we can save.
    document.getElementById('lat').value = currentLocation.lat(); //latitude
    document.getElementById('lng').value = currentLocation.lng(); //longitude
}
       
       
//Load the map when the page has finished loading.
google.maps.event.addDomListener(window, 'load', initMap);
olsensweb.dk Ekspert
22. januar 2017 - 14:32 #2
>Jeg har fundet dette api script til google maps,
hvor ?? et link kunne give os mere information.

det ville være forholdsvis nemt at lave hvis du anvendte navigator.geolocation.getCurrentPosition, som du anvendte i http://www.computerworld.dk/eksperten/spm/1012984 , så er det bare at skrive de 2 script sammen.
men det kræver en sikker forbindelse.

hvis du ikke anvender en sikker forbindelse får du denne besked i consolen

getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.

og scriptet virker ikke. der er ikke noget problem når man tester localt
Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links

Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester





Premium
ERP-virksomhed har indført ubegrænset ferie for alle medarbejdere - og resultatet er en succes: "Medarbejderne knokler og har et smil på læben"
ERP-virksomheden Unit4 har indført ubegrænset betalt ferie for samtlige medarbejdere verden over, hvor man som ansat nu selv kan bestemme. "Som direktør har jeg det rigtig godt med det", siger dansk landechef Anders Holm Jørgensen. Ifølge ham kan medarbejderne sagtens administrere ordningen.
Computerworld
Stein Bagger gør comeback i ny branche: "De lignede et mafiahold, førte sig frem som nyrige og plaprede løs om urealistiske drømme"
Stein Bagger har skiftet navn og fører sig nu frem i store biler i en helt ny branche, skriver en dansk avis.
CIO
Podcast: Her er seks gode råd om ledelse og digitalisering fra danske top-CIO'er
The Digital Edge: Vi har talt med 17 af Danmarks dygtigste digitale ledere - og samlet deres seks bedste råd om digitalisering og ledelse. Få alle rådene på 26 minutter i denne episode af podcasten The Digital Edge.
Job & Karriere
Se Waoos forklaring: Derfor har selskabet fyret topchef Jørgen Stensgaard med omgående virkning
Waaos bestyrelse opsiger fiberselskabets topchef, Jørgen Stensgaard, der fratræder med omgående virkning. Se hele forklaringen fra Waao her.
White paper
Kan Microsoft 365 styrke sikkerheden på hjemmearbejdspladsen?
Microsoft 365 er både Officeapplikationer og produktivitet – men også meget mere end det! Med Microsoft 365 får du faktisk adgang til en lang række sikkerhedsydelser, der kan øge modstandsdygtigheden i tilfælde af cyberangreb. Mange af tjenesterne er særligt velegnede til at styrke sikkerheden, når medarbejderne arbejder hjemmefra. Samtidig gør Microsoft 365 det lettere at sikre adgangen til virksomhedens systemer, beskytte kundedata og forebygger, opsporer og automatiserer reaktioner på avancerede trusler. Microsoft 365 tilbyder over 50 forskellige sikkerhedsydelser, og denne guide er skrevet med henblik på at øge forståelsen for, hvordan de fungerer og kan være med til at optimere sikkerheden i din virksomhed.