Php: Map

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.google-map {
height: 300px;
width: 100%;
border: 1px solid lightgray;
}
</style>
</head>
<body>

<div class="row">

<input type="text" name="latitude" id="latitude" value="13.0839" />
<input type="text" name="longitude" id="longitude" value="80.2700" />

<div class="google-map" id="map"></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){

//var defaultLatLng = new google.maps.LatLng(13.0839, 80.2700);

var defaultLatLng = new google.maps.LatLng(document.getElementById("latitude").value, document.getElementById("longitude").value);
// Get the map container element
var mapContainer = document.getElementById("map");

// Set the default options for the map
var myOptions = {
zoom: 8,
center: defaultLatLng
};

var map = new google.maps.Map(mapContainer, myOptions);

var marker = new google.maps.Marker({
draggable: true, // Boolean, to set the draggable action to true.
position: defaultLatLng, // The default latitude and longitude object.
map: map, // The Map Object that we created.
title: "Drag to your Location"
});
google.maps.event.addListener(marker, 'dragend', function(event) {
document.getElementById("latitude").value = this.getPosition().lat();
document.getElementById("longitude").value = this.getPosition().lng();

$("#latitude").trigger("change");
//$("#longitude").trigger("change");
});
});

$("#latitude , #longitude").change(function(){
jQuery.ajax({
url: 'save.php',
type: 'post',
data: 'latitude=' + $("#latitude").val() + '&longitude=' + $("#longitude").val(),
success: function(results){
alert(results);
}
});
});

</script>

</body>
</html>

Php

Friday, February 12, 2016

Map

No comments:

Post a Comment