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>
    <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="" rel="stylesheet" type="text/css" />
    <script src=";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) {
        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);
    <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%;
    <body onload="initialize()">
    <div id="controls">
    <input id="address" type="textbox" value="Sydney, NSW">
    <input type="button" value="Geocode" onclick="codeAddress()">
    <div id="map_canvas"></div>

    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: ' + + ' 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>';
     <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){
                content: '<p>Marker dropped: Current Lat: ' + + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>'
  , markerobject);
        google.maps.event.addListener(markerobject, 'drag', function(evt){
            console.log("marker is being dragged");

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

License under CC-BY-SA with attribution

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