Search code examples
javascriptgoogle-mapsgoogle-maps-markersjsfiddle

save coordinates from Google Map in Javascript

Hello i have a simple question!I would like to have a marker with google maps which i will move it and the coordinates (lan,lon) will be saved in two varriables with Jsfiddle (Javascript). I found a code (with HTML and CSS) but itsn't what i need beacause it has two markers and its different...Thank you so much in advance!

https://jsfiddle.net/irinikonsta/ryvpo5ux/

<!DOCTYPE html>
<title>Street View side-by-side</title>

<body>
  <div id="map"></div>
  <div id="pano"></div>
  <div id="floating-panel">
    Origin:
    <input type="text" readonly id="origin"> Destination:
    <input type="text" readonly id="destination">
    <br> Heading:
    <input type="text" readonly id="heading"> degrees
  </div>
  <script>
    var marker1, marker2;
    var poly, geodesicPoly;

    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: {
          lat: 37.983810,
          lng: 23.727539
        }
      });
      map.controls[google.maps.ControlPosition.TOP_CENTER].push(
        document.getElementById('info'));
      marker1 = new google.maps.Marker({
        map: map,
        draggable: true,
        position: {
          lat: 38.017973,
          lng: 23.694077
        }
      });
      marker2 = new google.maps.Marker({
        map: map,
        draggable: true,
        position: {
          lat: 37.990920,
          lng: 23.751755
        }
      });
      var bounds = new google.maps.LatLngBounds(
        marker1.getPosition(), marker2.getPosition());
      map.fitBounds(bounds);
      google.maps.event.addListener(marker1, 'position_changed', update);
      google.maps.event.addListener(marker2, 'position_changed', update);
      poly = new google.maps.Polyline({
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 3,
        map: map,
      });
      geodesicPoly = new google.maps.Polyline({
        strokeColor: '#CC0099',
        strokeOpacity: 1.0,
        strokeWeight: 3,
        geodesic: true,
        map: map
      });
      update();
    }

    function update() {
      var path = [marker1.getPosition(), marker2.getPosition()];
      poly.setPath(path);
      geodesicPoly.setPath(path);
      var heading = google.maps.geometry.spherical.computeHeading(path[0],
        path[1]);
      document.getElementById('heading').value = heading;
      document.getElementById('origin').value = path[0].toString();
      document.getElementById('destination').value = path[1].toString();
    }

  </script>
  <script src="https://maps.googleapis.com/maps/api/jskey=AIzaSyBojvE89boyOqT01eKQd-UV_Dc4dpLRpzw&libraries=geometry&callback=initMap" async defer></script>
</body>
Solution

  • Your questions is not so clear...... Buuuut...... What you need is something like this http://jsfiddle.net/yorch/z67mxhbu/1/ ?

    Just keep marker, lat and lng as global variables and store them when necessary (in this case I've choosen dragend event, but you can check all events here)

    google.maps.event.addListener(marker, 'dragend', update);

    and then in the update method do your magic, in my case:

    function update() {
  var path = marker.getPosition();
  lat = path.lat();
  lng = path.lng()
  alert("Lat: " + lat + "\nLon: " + lng);
}

    NOTE: jsfiddle based on example from http://thinkingstiff.com/ in this answer