页面不刷新数据

Question

I am loading a Google Map using JS with the following code.

$(document).ready(function(){
  $('.acf-map').each(function(){
    map = new_map( $(this) );
  });
  var geocoder = new google.maps.Geocoder();
  document.getElementById('submit').addEventListener('click', function() {
    geocodeAddress(geocoder, map);
    location.reload();
  });

});

I'm creating the map and the markers using PHP

<div class="acf-map">
    <?php $custom = new WP_Query(array(
        'post_type'         => 'centre',
        'posts_per_page'    => -1

    )); ?>
    <?php
    if ($custom->have_posts()) {
        while ($custom->have_posts()) {
            $custom->the_post(); ?>
            <?php $location = get_field('centre_location'); ?>

            <div class="marker" data-lat="<?php echo $location['lat'] ?>" data-lng="<?php echo $location['lng']; ?>" style="border: 5px solid grey;">
                <a href="<?= the_permalink() ?>"><h5 class="orange"><?= get_field('centre_name'); ?></h5></a>
                <p class="address"><?php echo get_field('centre_address') ?></p>
                <p class="orange">Call us at <a href="tel: <?= get_field('centre_telephone_number'); ?>"><?= get_field('centre_telephone_number'); ?></a></p>

            </div>

            <?php
        }
        wp_reset_postdata();
    }
    ?>
</div>

Then I'm taking input from the user and decode it to be pushed to a database.

<input type="text" placeholder="Enter your postcode" class="orange find input" id="address">
<button id="submit" class="find sub orange">Search</button>

function geocodeAddress(geocoder, resultsMap) {
  var address = document.getElementById('address').value;
  geocoder.geocode({'address': address}, function(results, status) {
    if (status === 'OK') {
      resultsMap.setCenter(results[0].geometry.location);
      var lat = results[0].geometry.location.lat();
      var lng = results[0].geometry.location.lng();
      $.ajax({
        url: "../link/to/post.php",
        type: "POST",
        data : {
          lat: lat,
          lng: lng
        }
      });
      var marker = new google.maps.Marker({
        map: resultsMap,
        position: results[0].geometry.location,
        title: 'Your location'
      });
    }
  });
}

The data gets pushed into the database as it should, additional code required and the marker gets added. However, when the page refreshes, it requires another refresh to get the new data even though the data in the database gets inserted straight away.

I have tried different refreshes but none of them fixed the problem.

One of my solutions was to find a way to refresh the page twice but that would not be efficient enough since I have to load in hundreds of markers.

Answer 1

I answered my question.

The problem was, from what I'm guessing, the SQL query was being run slower than the page was being refreshed.

To fix it, I added a delay.