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?
You can take hidden field into your html form and set value by javascript. try as below.
HTML:
<input type='hidden' name='lat' id='lat'>
<input type='hidden' name='lng' id='lng'>
JS:
<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>
Note: As google provide many event listeners so you can use as per your need. Here is the reference link just check it out and use as per your requirements. Reference