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>

12 Points 4 Comments Share

Roy 8 years ago

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

Blake Loizides 8 years ago

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?

Roy 8 years ago

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

Suresh Kamrushi 5 years ago

A detail blog :http://goo.gl/pDD6Q8

EZMapdesign Turn off AdBlock to see the correct answer
8 years ago
I have put together a simple function for you: function markerCoords(markerobject){ google ..

This site survives thanks to advertising. Disable AdBlock to see the whole correct answer at no cost!
We promise you will not find boring advertisements. Find out how to disable Adblock by clicking on this link.
Remember to update the page once you have disabled it.
9 Points 0 Comments

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!

9 Points 0 Comments Share Donate

License under CC-BY-SA with attribution

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