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&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>
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.
A detail blog :http://goo.gl/pDD6Q8
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
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
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