My website loads the user's current location using GEO location and displays it on a google map when they then click a button, I want it to store the coordinates in the database.
I have already done the GEO location and displaying the coordinates on the map, I just need to take the values from JS and store them in the database inside the if(isset($_POST['newPost'])) statement
javascript
<script>
var map, infoWindow;
function initMap()
{
map = new google.maps.Map(document.getElementById('map'),
{
center: {lat: -34.397, lng: 150.644},
zoom: 10
});
infoWindow = new google.maps.InfoWindow;
// Try HTML5 geolocation.
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(function(position)
{
var pos =
{
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
infoWindow.open(map);
map.setCenter(pos);
}, function()
{
handleLocationError(true, infoWindow, map.getCenter());
});
}
else
{
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos)
{
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
infoWindow.open(map);
}
</script>
HTML
<form id="newPost" action="index.php" method="Post">
<textarea id="txtMessage" name="body"></textarea>
<hr/>
<br/>
<br/>
<div id="map" style="width:100%;height:400px;"></div>
<br/>
<button type="submit" id="postButton" name="newPost" class="Button">Post!
</button>
</form>
PHP
if(isset($_POST['newPost']))
{
DB::query('INSERT INTO heatmap(lon, lan) VALUES (:lon, :lan)',
array(':lon'=>$VAL, ':lan'=>$VAL));
}
Any help would be appreciated
Not having a way to test it, I had to make some guesses. I don't see any Markers created, so I assume you're using the map coordinates. Consider the following:
$(function() {
var map, infoWindow;
function initMap() {
map = new google.maps.Map($('#map')[0], {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 10
});
infoWindow = new google.maps.InfoWindow();
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
infoWindow.open(map);
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
infoWindow.open(map);
}
$("#newPost").submit(function(e) {
e.preventDefault();
var pData = {
body: $("#txtMessage").val(),
lng: map.coords.longitude,
lat: map.coords.latitude
};
$.post($(this).attr("action"), pData);
});
});
https://jsfiddle.net/Twisty/wzvpnmh6/21/
This would create POST Data like:
{
body: "Hello World",
lat: -34.397,
lng: 150.644
}
You could also Stringify it and send it as a combined string:
var coords = JSON.Stringify({ lat: c.lat(), lng: c.lng() });
You will then get a string like: {"lat":-34.397,"lng":150.644} that can be added direct to a DB. This is up to you and will be defined by what you need to do with the data. If you need to search for specific Lat or Long, then they will store in their own columns. If you just need the geolocation, then they can be in a single column.
Hope that helps.
References: