Localização geográfica: preenchimento de formulários com latitude e longitude. API do Google Maps

Question

Jun 26, 2015, 10:03 PM

google-maps-api-3 ajax geolocation javascript forms

Localização geográfica: preenchimento de formulários com latitude e longitude. API do Google Maps

Estou construindo um mapa do google onde os usuários compartilham informações e sua localização atual em um formulário. Desejo preencher automaticamente os campos lat, lng no meu formulário com a função Geolocalização. A única coisa que não posso fazer é esse último passo. Aqui está o meu código:

<script src="https://maps.googleapis.com/maps/api/js?V=3.exp&key=wootwootwootwoot"></script>

    <script
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script>

var map;

function initialize() {
var mapOptions = {
zoom: 12
};
map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);

if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
  var pos = new google.maps.LatLng(position.coords.latitude,
                                   position.coords.longitude);

  var marker = new google.maps.Marker({
    map: map,
    position: pos,
    title: 'GPS'
  });

  map.setCenter(pos);
}, function() {
  handleNoGeolocation(true);
});
} else {

handleNoGeolocation(false);
}
}

function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}

var options = {
map: map,
position: new google.maps.LatLng(19.043516, -98.198232),
content: content
};

var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);


google.maps.event.addListener(marker, 'GPS', function() {
                var lat = marker.getPosition().lat();
                var lng = marker.getPosition().lng();
                $('#lat').val(lat);
                $('#lng').val(lng);
            });

}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>
<div id="map-canvas"></div>

    <input id="lat"/>
    <input id="lng"/>

</body>
</html>