2

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>
6
  • 1
    You should separate your PHP and keep it in a different file. That way, when you post to the function it will refresh and return your data. Commented Jun 14, 2018 at 9:25
  • 1
    1/ Create a file.php that will load markers. 2/ When you load the page, call this file.php to display your initial marker. 3/ When user submit a form, insert the new marker in database and call the file.php in the success part so you will load the new marker without reloading the page Commented Jun 14, 2018 at 9:27
  • @snack_overflow ah so my index page will still be .PHP , but i just requires another PHP page which contains my function getMarkers()? EDIT Actually wait this is what I already am doing! Commented Jun 14, 2018 at 9:28
  • Yep, that's essentially it. I'd follow the above comment by @Mickael Leger that shows you the process. Commented Jun 14, 2018 at 9:35
  • In your insertLocation.php file, return the current result of marker and show on result so after the alert you can add the code for show marker with the last one Commented Jun 14, 2018 at 9:37

1 Answer 1

2

Of corse PHP does have such function, but you need to change code a bit in such way:
1. Create somewhere in php

public function getMarkersJSON(){
  $markerArray = getMarkers();
  $allMarkers = array();

  foreach($markerArray as $value){
    $allMarkers[] = array_pop($markerArray)['json'];
  }  

  return json_encode($allMarkers, JSON_UNESCAPED_SLASHES);
}

2. In java script part wrap your init code into function

var allMarkers = <?= getMarkersJSON() ?>;

function initMap(allMarkers){
  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
    });
}

3. Next call this function on document ready

$(function(){
    initMap(allMarkers);
});

4. Now after you post location make ajax request to something on server side that returns result of function getMarkersJSON(). And then call your JS function initMap() with respond.

initMap([...your respose...])

This is the answer to your question, bat as for me, you don't need such things.
You already post your point to server and you don't need to worry about losing data on reload. So you don't need to update all map points from server and just need to add a new one, or refresh hole map with with the data that you already have on client side. Just after you made and AJAX post make an update of client map with recently post data. Just add sent location to your map or remove it if you need, depends on the client action.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.