How do you click on a map and have latitude and longitude fields in a form populated?

Question

I have a form that a user needs to fill out where the location needs to be identified. I have latitude and longitude input fields on the form. I am also looking for the de

Answer 1

The code is for google map api version 3. v2 has been depreciated so better to stick with v3.

Have a div with id mapdiv in which the map is loaded

Use an input element with id latlng to display the lat and lng when you click on the map. so that people can copy that value into another application. you can modify the opts variable according to your need.

Add an event handler for click event like in the code. So that when you click on the map the input element is populated with lat and lng values.

var map;
function mapa()
{
    var opts = {'center': new google.maps.LatLng(26.12295, -80.17122), 'zoom':11, 'mapTypeId': google.maps.MapTypeId.ROADMAP }
    map = new google.maps.Map(document.getElementById('mapdiv'),opts);

    google.maps.event.addListener(map,'click',function(event) {
        document.getElementById('latlng').value = event.latLng.lat() + ', ' + event.latLng.lng()
    })      
}

The above is all that you need.

---

if you want to see the values of lat and lng when you move the mouse over the map then add a mouse move event listener like in the following code. you can use a span or even an input element to see the values. I had used span in my code.

google.maps.event.addListener(map,'mousemove',function(event) {
    document.getElementById('latspan').innerHTML = event.latLng.lat()
    document.getElementById('lngspan').innerHTML = event.latLng.lng()
});