Geolocation: Filling forms with latitude and longitude. Google Maps API
Question
I've been building a google map where users share information plus their current location in a form. I want to automatically fill the lat, lng fields in my form with the Geolocation function. The only thing I cannot do is that last step. Here is my code:
<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>
2 answers
solution1
0 2015-06-26 20:16:38
You only have the code to put the values in your form in the error path, put code in the success path instead (I'm not sure what you expect the 'GPS' event you have on the marker to do):
function initialize() {
var mapOptions = {
zoom: 12
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
$('#lat').val(position.coords.latitude);
$('#lng').val(position.coords.longitude);
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);
}
}
solution2
0 ACCPTED 2015-06-26 20:21:15
You can try this code instead :
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
document.getElementById('lat').value = position.coords.latitude;
document.getElementById('lng').value = position.coords.longitude;
var marker = new google.maps.Marker({
map: map,
position: pos,
title: 'GPS'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
it's better to put your javascript code before the </body> tag
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.