Getting coordinates from click or drag event in Google Maps API?

  • I have made a Google Version 3 Geocoder , I want to be able to pick up the coordinates of the marker when it is dragged or clicked. Below is my code:

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
    <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
    <script src="http://maps.google.com/maps/api/js?v=3.5&amp;sensor=false"></script>
    <script type="text/javascript">
    var geocoder;
    var map;
    function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }
    
    
    function codeAddress() {
    var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            draggable: true,
            position: results[0].geometry.location
    
        });
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
    }
    </script>
    
    <style type="text/css">
    #controls {
    position: absolute;
    bottom: 1em;
    left: 100px;
    width: 400px;
    z-index: 20000;
    padding: 0 0.5em 0.5em 0.5em;
    }
     html, body, #map_canvas {
                margin: 0;
                width: 100%;
                height: 100%;
            }
    </style>
    </head>
    <body onload="initialize()">
    <div id="controls">
    <input id="address" type="textbox" value="Sydney, NSW">
    
    <input type="button" value="Geocode" onclick="codeAddress()">
    </div>
    <div id="map_canvas"></div>
    </body>
    </html>
    

    I have tried to use the following code to do this but it does not seem to work.

           // Javascript//
           google.maps.event.addListener(marker, 'dragend', function(evt){
           document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
           });
    
           google.maps.event.addListener(marker, 'dragstart', function(evt){
           document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';
           });
    
     map.setCenter(marker.position);
     marker.setMap(map);
    
     //HTML//
     <div id='map_canvas'></div>
     <div id="current">Nothing yet...</div>
    

    Sort of fuzzy on what you're trying to do, but within an event handler function you can use `evt.latLng` to grab coordinates

    Hey @Roy I,m wanting to input an address then get the coordinates in a popup, Like my example. In my example you can go to an address via the text input then drag the point , I want to popup coordinates when I drag the point. The example below is good but I want to input an address? Please could you help me?

    Mapperz example looks pretty good. I haven't used the GM API in a while, you might get a quicker answer on StackOverflow.

  • EZMapdesign

    EZMapdesign Correct answer

    8 years ago

    I have put together a simple function for you:

    function markerCoords(markerobject){
        google.maps.event.addListener(markerobject, 'dragend', function(evt){
            infoWindow.setOptions({
                content: '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>'
            });
            infoWindow.open(map, markerobject);
        });
    
        google.maps.event.addListener(markerobject, 'drag', function(evt){
            console.log("marker is being dragged");
        });     
    }
    

    And insert markerCoords(marker); under the marker declaration!

  • Drag Marker and Geocoder with Coordinates

    enter image description here

    https://gmaps-samples-v3.googlecode.com/svn-history/r49/trunk/draggable-markers/draggable-markers.html

    Entire code:

        <html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    var geocoder = new google.maps.Geocoder();
    
    function geocodePosition(pos) {
      geocoder.geocode({
        latLng: pos
      }, function(responses) {
        if (responses && responses.length > 0) {
          updateMarkerAddress(responses[0].formatted_address);
        } else {
          updateMarkerAddress('Cannot determine address at this location.');
        }
      });
    }
    
    function updateMarkerStatus(str) {
      document.getElementById('markerStatus').innerHTML = str;
    }
    
    function updateMarkerPosition(latLng) {
      document.getElementById('info').innerHTML = [
        latLng.lat(),
        latLng.lng()
      ].join(', ');
    }
    
    function updateMarkerAddress(str) {
      document.getElementById('address').innerHTML = str;
    }
    
    function initialize() {
      var latLng = new google.maps.LatLng(-34.397, 150.644);
      var map = new google.maps.Map(document.getElementById('mapCanvas'), {
        zoom: 8,
        center: latLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
      var marker = new google.maps.Marker({
        position: latLng,
        title: 'Point A',
        map: map,
        draggable: true
      });
    
      // Update current position info.
      updateMarkerPosition(latLng);
      geocodePosition(latLng);
    
      // Add dragging event listeners.
      google.maps.event.addListener(marker, 'dragstart', function() {
        updateMarkerAddress('Dragging...');
      });
    
      google.maps.event.addListener(marker, 'drag', function() {
        updateMarkerStatus('Dragging...');
        updateMarkerPosition(marker.getPosition());
      });
    
      google.maps.event.addListener(marker, 'dragend', function() {
        updateMarkerStatus('Drag ended');
        geocodePosition(marker.getPosition());
      });
    }
    
    // Onload handler to fire off the app.
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    </head>
    <body>
      <style>
      #mapCanvas {
        width: 500px;
        height: 400px;
        float: left;
      }
      #infoPanel {
        float: left;
        margin-left: 10px;
      }
      #infoPanel div {
        margin-bottom: 5px;
      }
      </style>
    
      <div id="mapCanvas"></div>
      <div id="infoPanel">
        <b>Marker status:</b>
        <div id="markerStatus"><i>Click and drag the marker.</i></div>
        <b>Current position:</b>
        <div id="info"></div>
        <b>Closest matching address:</b>
        <div id="address"></div>
      </div>
    </body>
    </html>
    

    The above link is no longer valid -- you can find other examples at https://developers.google.com/maps/documentation/javascript/tutorial

License under CC-BY-SA with attribution


Content dated before 6/26/2020 9:53 AM