I am a newbie and I am trying to embed google maps in an HTML form. This link helped me http://www.w3schools.com/googleapi/google_maps_basic.asp but it had no provision for saving user selected location in database. Is that possible? If so, how can I implement it? I really appreciate help from you guys.
Here is the html
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
document.getElementById('lat').value= 51.508742
document.getElementById('lng').value= -0.120850
// marker drag event
google.maps.event.addListener(marker,'drag',function(event) {
document.getElementById('lat').value = event.latLng.lat();
document.getElementById('lng').value = event.latLng.lng();
});
//marker drag event end
google.maps.event.addListener(marker,'dragend',function(event) {
document.getElementById('lat').value = event.latLng.lat();
document.getElementById('lng').value = event.latLng.lng();
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<form action="maps.php" method="post">
Select your location
<input type='hidden' name='lat' id='lat'>
<input type='hidden' name='lng' id='lng'>
<input type="submit" value="Submit">
</form>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
and here is the maps.php file which is used to retrieve the variables "lat" and"lng"
<?php
$lat = $_POST['lat'];
$lng = $_POST['lng'];
echo "Latitude is" .$lat. "and longitude is" .$lng;
?>
I am getting a fixed value of longitude and latitude every time in maps.html. Why doesn't it update?