Placer un marqueur sur google maps javascript api

Question

J'ai codé une carte Google dans JS Apis. Ce que j'essaye de réaliser est que partout où l'utilisateur clique, il place le marqueur là et sort ses Lat et Lng. Ce que j'ai réussi à faire c'est de cliquer sur le bouton et de sortir le Lat et le Lng sans y glisser le marqueur.

Voici le Fiddle - http://jsfiddle.net/sarthakbatra1991/87v0obb4/#&togetherjs=3aTj11AiwO

google.maps.event.addListener(map, 'click', function (event) { 


     document.getElementById("lat").value = event.latLng.lat(); 
     document.getElementById("long").value = event.latLng.lng(); 
     marker.setPosition(lat, lng); 
     marker.setMap(map); 

    }); 

S'il vous plaît regarder et aidez-moi ici.

À la votre!

Answer 1

lat et lng ne sont pas définis dans l'écouteur de clic. Cela devrait fonctionner:

google.maps.event.addListener(map, 'click', function (event) { 
    document.getElementById("lat").value = event.latLng.lat(); 
    document.getElementById("long").value = event.latLng.lng(); 
    marker.setPosition(event.latLng); 
}); 

updated fiddle

extrait de code:

function initialize() { 
 
    var myLatlng = new google.maps.LatLng(40.713956, -74.006653); 
 

 
    var myOptions = { 
 
    zoom: 8, 
 
    center: myLatlng, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
 

 
    var marker = new google.maps.Marker({ 
 
    draggable: true, 
 
    position: myLatlng, 
 
    map: map, 
 
    title: "Your location" 
 
    }); 
 

 
    google.maps.event.addListener(marker, 'dragend', function(event) { 
 
    document.getElementById("lat").value = event.latLng.lat(); 
 
    document.getElementById("long").value = event.latLng.lng(); 
 
    }); 
 

 
    google.maps.event.addListener(map, 'click', function(event) { 
 
    document.getElementById("lat").value = event.latLng.lat(); 
 
    document.getElementById("long").value = event.latLng.lng(); 
 
    marker.setPosition(event.latLng); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize());

<style> html, 
 
body, 
 
#map_canvas { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100% 
 
} 
 
</style>

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
Lat: 
 
<input id="lat" name="lat" val="40.713956" />Long: 
 
<input id="long" name="long" val="74.006653" /> 
 
<br /> 
 
<br /> 
 
<div id="map_canvas" style="width: 500px; height: 250px;"></div>