sorenmt84 Novice
12. juni 2018 - 21:50

Google maps api - vis nuværende lokation og indsæt koordinater i form

Ved hjælp af disse 2 filer, får jeg vist et Google kort. Når der klikkes på kortes, indsættes der er marker på stedet og koordinaterne hertil kopierens ind i form (lat og lon) - Så langt så godt. Jeg vil dog gerne have det lavet så når siden loades er kortet centreret til hvor jeg befinder mig lige nu og der er allerede sat en marker der, samt sat koordinater i felterne.
Kan du hjælpe med det?

Kort.htm:
<!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=AIzaSyD5kMJIMqUjQ7VWVYY2ILUd78RF_PhXjt4"></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(52.357971, -6.516758);

    //Map options.
    var options = {
      center: centerOfMap, //Set center.
      zoom: 7 //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);
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
Test: Huaweis Matebook X er særlig laptop med en svaghed, som du skal være opmærksom på
Huawei beviser endnu en gang, at de sagtens kan mingle sig med de bedste pc-producenter. Men alligevel skyder selskabet lidt ved siden af, med sin nyeste maskine.
Computerworld
Bitcoinen nåede lige at kulminere igen – men så kom krakket
Der blev sat en ny rekord for bitcoinens værdi i år – men godt 24 timer efter blev der høvlet næsten 20.000 kroner af den.
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
Overser du muligheder for at optimere din Dynamics-investering?
Der er omfattende og ofte oversete muligheder for at understøtte centrale forretningsprocesser med Dynamics 365 Finance & Operations. For eksempel i form af fuld EDI-integration, som optimerer logistik og forsyning. Eller ved at automatisere håndteringen af konsignation eller centrale processer vedrørende elektronisk dokumentflow og dropshipping. Læs mere i dette whitepaper, der også går i dybden med fire konkrete cases.