CODEWITHSUNDEEP
javascriptgoogle-maps-api-3
Hai Truong IT
Hai Truong IT

Reputation: 4187

Error when get lat and lng on click event in google map api?

JavaScript: 

    var myLatlng = new google.maps.LatLng(10.786599576864381,106.69340372085571);  
    var myOptions = {
        zoom: 16,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    map = new google.maps.Map(document.getElementById("gmap"), myOptions);

    marker = new google.maps.Marker({
        position: myLatlng, 
        map: map
    });
google.maps.event.addListener(map, 'click', function() {
            var location = map.getCenter();
            document.getElementById("lat").innerHTML = location.lat();
            document.getElementById("lon").innerHTML = location.lng();
            placeMarker(location);
          });
    function placeMarker(location) {
        var clickedLocation = new google.maps.LatLng(location);
        marker.setPosition(location);
    }

HTML:

    <center>
   <div id="bd">
    <div id="gmap"></div>
     lat:<span id="lat"></span> lon:<span id="lon"></span><br/>
     </div>
    </center>

I using map.getCenter to get lat and lng, but result not found, how to fix

Upvotes: 0

Views: 268

Answers (1)

Shane Best
Shane Best

Reputation: 515

The location you are getting is center of the map.

You need to capture the event with the click so you can get the latLng like this:

google.maps.event.addListener(map, 'click', function(event) {
//var location = map.getCenter();
//document.getElementById("lat").innerHTML = location.lat();
//document.getElementById("lon").innerHTML = location.lng();
placeMarker(event.latLng);
})

Upvotes: 1

Related Questions