I have a function in PHP , which gets all "markers" from my database, these markers are loaded onto a google map.
I also have a AJAX form on the same page, which allows the user to add more "markers" to the database.
I would like it so that when the AJAX form is submitted, the marker shows up instantly on the map.
The problem at the moment is that the PHP is only rendered once on page load, so if I want to see my updated markers then I have to manually reload the page.
Is there a function I can assign to my AJAX submit button that will refresh the PHP in my page?
<?php $markerArray = getMarkers();
$allMarkers = array();
for($x=0; $x<sizeof($markerArray); $x++)
{
array_push($allMarkers,$markerArray[$x]['json']);
}
$allMarkersJson = json_encode($allMarkers, JSON_UNESCAPED_SLASHES); ?>
<script>
var allMarkers = <?php echo $allMarkersJson ?>;
var markerMap = allMarkers.map(function(e) {
return JSON.parse(e);
});
for(x=0;x<markerMap.length;x++){
var thisMarker = markerMap[x];
var marker = new google.maps.Marker({
position: thisMarker.geometry.location,
title:"this is marker " + x
});
$("#saveToDatabase").click(function(){
var bounds = new google.maps.LatLngBounds();
var place = searchBox.getPlaces();
var locationJson = JSON.stringify(place[0]);
$.ajax({
type: "POST",
url: "insertLocation.php",
dataType:"json",
data: {
locationJson : locationJson
},
cache: false,
success: function(result){
window.alert("successful upload!");
}});
});
</script>
file.phpthat will load markers. 2/ When you load the page, call thisfile.phpto display your initial marker. 3/ When user submit a form, insert the new marker in database and call thefile.phpin the success part so you will load the new marker without reloading the page