i'm making my final project my project similiar to Salman's Latitude Longitude Finder Tool, but instead of showing the coordinate, i'll store the coordinate in SQL database using simple query. because my lack of coding skill, i unable to do that, so anyone can help me?
what should i do next? and what variable that i must make?
here is the code straight from Salman's source
<form id="mapform" action="#">
<input id="mapinput" type="text" style="width: 80%;" value="Institut Teknologi Telkom, Sukapura, Dayeuhkolot, Bandung 40257, Indonesia" maxlength="100">
<input type="submit" style="width: 10%;" value="Find">
</form>
<div id="mapdiv" style="height: 400px; width:90%"></div>
<div id="mapoutput" style="width:90%;background-color: #FFDD22; font-weight: bold;">Latitude:<br>Longitude:</div>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js? v=3&sensor=true&key=AIzaSyAUQHXuw8OR1CzCPpo7bLMt_H_nauUHXKw"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, "load", function() {
//
// initialize map
//
var map = new google.maps.Map(document.getElementById("mapdiv"), {
center: new google.maps.LatLng( -6.976801, 107.630835),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
//
// initialize marker
//
var marker = new google.maps.Marker({
position: map.getCenter(),
draggable: true,
map: map
});
//
// intercept map and marker movements
//
google.maps.event.addListener(map, "idle", function() {
marker.setPosition(map.getCenter());
document.getElementById("mapoutput").innerHTML = "<a href=\"https://maps.google.com/maps?q=" + encodeURIComponent(map.getCenter().toUrlValue()) + "\" target=\"_blank\" style=\"float: right;\">Go to maps.google.com</a>Latitude: " + map.getCenter().lat().toFixed(6) + "<br>Longitude: " + map.getCenter().lng().toFixed(6);
});
google.maps.event.addListener(marker, "dragend", function(mapEvent) {
map.panTo(mapEvent.latLng);
});
//
// initialize geocoder
//
var geocoder = new google.maps.Geocoder();
google.maps.event.addDomListener(document.getElementById("mapform"), "submit", function(domEvent) {
if (domEvent.preventDefault){
domEvent.preventDefault();
} else {
domEvent.returnValue = false;
}
geocoder.geocode({
address: document.getElementById("mapinput").value
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var result = results[0];
document.getElementById("mapinput").value = result.formatted_address;
if (result.geometry.viewport) {
map.fitBounds(result.geometry.viewport);
}
else {
map.setCenter(result.geometry.location);
}
} else if (status == google.maps.GeocoderStatus.ZERO_RESULTS) {
alert("Sorry, the geocoder failed to locate the specified address.");
} else {
alert("Sorry, the geocoder failed with an internal error.");
}
});
});
});
</script>
Just edit dragend
event of marker as
google.maps.event.addListener(marker, 'dragend', function (event) {
var lat = this.getPosition().lat();
var lng = this.getPosition().lng();
//use an AJAX function to save the lat/lng to the data base
$.ajax({
type:'POST',
data:{latitude:lat, longitude:lng},
url:"savecoords.php",
success:function(response){
if(reponse=="success"){
alert('Location marked');
}
else{
alert('Cant mark location');
}
},
error:function(){
alert('An error occured');
}
});
});
In the AJAX function lat
and lng
are passed to the file savecoords.php
thrugh variables latitude
and longitude
in POST
method. In that file you can access the values as $_POST['latitude']
and $_POST['longitude']
. Then you need to create the savecoords.php
file and the content must be like:
savecoords.php
<?php
$latitude = $_POST['latitude'];
$longitude = $_POST['longitude'];
//establish mysqli connection
$query = 'Your save query with $latitude and $longitude';
if(mysqli_query($query)){
echo "success";
}
else{
echo "failed";
}
?>