Google maps api get lat and lng dynamically
Question
When I run my code, the map doesn't display. I am working on my localhost. I want to put lat and lng to inputs. Then when I change the lat and lng the inputs will change dynamically. How can I solve this problem?
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div id="googleMap" style="width:500px;height:500px;"></div>
Lat: <input type="text" id="lat"><br>
Lng: <input type="text" id="lng">
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(41,28);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
addMarker(myLatlng, 'Default Marker', map);
map.addListener('click',function(event) {
addMarker(event.latLng, 'Click Generated Marker', map);
);
}}
function addMarker(latlng,title,map) {
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: title,
draggable:true
});
marker.addListener('drag',function(event) {
$('#lat').val() = event.latLng.lat();
$('#lng').val() = event.latLng.lng();
});
marker.addListener('dragend',function(event) {
$('#lat').val() = event.latLng.lat();
$('#lng').val() = event.latLng.lng();
});}
</script>
</body></html>
2 answers
solution1
4 ACCPTED 2016-04-29 07:26:10
You have some bugs in your code.. and you are not calling the function
initialize(). Try this updated code
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div id="googleMap" style="width:500px;height:500px;"></div>
Lat: <input type="text" id="lat"><br>
Lng: <input type="text" id="lng">
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(41,28);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
addMarker(myLatlng, 'Default Marker', map);
map.addListener('click',function(event) {
addMarker(event.latLng, 'Click Generated Marker', map);
});
}
function addMarker(latlng,title,map) {
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: title,
draggable:true
});
marker.addListener('drag',function(event) {
$('#lat').val(event.latLng.lat()) ;
$('#lng').val(event.latLng.lng()) ;
});
marker.addListener('dragend',function(event) {
$('#lat').val(event.latLng.lat()) ;
$('#lng').val(event.latLng.lng()) ;
});
}
initialize();
</script>
</body></html>
solution2
2 2016-04-29 08:26:00
Here I can save selected coordinates. İt may help someone.
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div id="googleMap" style="width:500px;height:500px;"></div>
Lat: <input type="text" id="lat"><br>
Lng: <input type="text" id="lng">
<p id="results">result</p>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(41.015137,28.979530);
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
addMarker(myLatlng, 'Default Marker', map);
map.addListener('click',function(event) {
addMarker(event.latLng, 'Click Generated Marker', map);
});
}
function addMarker(latlng,title,map) {
var coords = [];
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: title,
draggable:true
});
marker.addListener('drag',function(event) {
$('#lat').val(event.latLng.lat()) ;
$('#lng').val(event.latLng.lng()) ;
});
marker.addListener('dragend',function(event) {
$('#lat').val(event.latLng.lat()) ;
$('#lng').val(event.latLng.lng()) ;
coords.push(event.latLng.lat());
coords.push(event.latLng.lng());
$("#results").append('<div>'+JSON.stringify(coords)+'</div>');
coords = [];
});
}
initialize();
</script>
</body></html>
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.
Related Question
google maps api get lat and lng and replace marker?
Get Lat Lng From Marker Google Maps API
Google Maps API Geolocation + Lat / Lng
Get lat and lng from a place with google maps
Google Maps V3 API — I would like to get the county based off lat/lng when a marker is dynamically created
Google Maps JavaScript API Get Lat/Lng from another function and push to Street View Image API
Generate new Lat/Lng between existing Lat/Lng provided by Google Maps Directions API
Saving data lat/lng into db from google maps api?
Loop Over Array of Lat Lng for Google Maps API
Google Maps: get lat/lng from geocoded postcode
Related Tags