I would display Google maps markers on custom site temple with Google API maps. I do everything like this post: Integrating PHP into Javascript to display map markers with Google API

But a console gives me an error, I don't know where I can look for the error.

(index):774 Uncaught (in promise) ReferenceError: storeData is not defined
at initMap ((index):774)
at js?key=AIzaSyAg-GBNbwLWCxiN-UI-0COkr1bgAKpXjQU&callback=initMap:123
at js?key=AIzaSyAg-GBNbwLWCxiN-UI-0COkr1bgAKpXjQU&callback=initMap:123

I think the WordPress first try to use wp_localize, then load jquery. Or Wordpress don't know how to connect jquery-core with jquery CDN.

Code of my custom temple site:

<?php /* Template Name: Mapy */ ?>

<?php get_header(); ?>

<?php
    $storeData = [];
        $args = array( 'post_type' => 'product');
        $loop = new WP_Query( $args );

        foreach ($loop->posts as $post){
            $storeData[] = [
                'title' => apply_filters('the_title', $post->post_title),
                'lat'   => get_field('gps_dlugosc'),
                'long'  => get_field('szerokosc_gps')
            ];
        }
    wp_localize_script('jquery-core', 'storeData', $storeData);

?>

<section style="padding-top:70px;">
    <div id="map"></div>
</section>


<script>
    // Initialize and add the map
    function initMap() {
      // The location of Uluru
      var poznan = {lat: 52.402684, lng: 16.9213905};
      var j = storeData.length;
      //console.log(storeData.length);    
      // The map, centered at Uluru
      var map = new google.maps.Map(
          document.getElementById('map'), {
              zoom: 15,
              center: poznan,
              zoomControl: true,
              mapTypeControl: true,
              scaleControl: false,
              streetViewControl: false,
              rotateControl: false,
              fullscreenControl: true,
          }
      );

        for (var i=0; i<5; i++) {
            var marker=new google.maps.Marker({
                position: new google.maps.LatLng({lat: storeData[i].lat, lng: storeData[i].long}),
                map: map,
                title: storeData[i].title
            });
        }
    }

</script>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAg-GBNbwLWCxiN-UI-0COkr1bgAKpXjQU&callback=initMap"></script>


<?php get_footer(); ?>

Thank's for help, Sorry I am not good at English.

  • Hi Piotr :) And how is your jquery-core script enqueued? And second question: can you find storeData variable in your generated HTML code? PS. It's a very bad practice to do such things inside template file - it would be much nicer and safer to do them inside functions.php using proper hooks. – Krzysiek Dróżdż Dec 4 at 8:20
  • Hi @KrzysiekDróżdż I don't know, i thought the jquery-core is part of core jquery scripts. The storeData is visable but in <script> section. Website about which we are talking new.biggroup.pl/mapa-powierzchni I want to run this on temple site, next i would to move it to functions.php – Piotr Mucha Dec 4 at 8:30

OK, so there are few misconceptions in your code...

1. You should localize your own script and not some built-in one.

You can't be certain what scripts will be used on the site. In your case you localize jquery-core script, but you don't assure that this script is enqueued on the site.

This means that your localization variable may not be included in your page (and it is not in your case).

2. You should localize scripts before they are printed.

Your code localizes the script directly in the template. It would be much nicer, if you'd done this inside functions.php.

But there's even bigger problem - you localize that script after calling get_header(). It means that the script may already be printed, so it won't get localized...

So how to fix this?

1. Move your JS code:

function initMap() {
    ...  
}

to some external file like my-map-script.js.

2. Enqueue and localize it properly

function my_enqueue_map_scripts() {

    if ( is_page(123) ) { // you can enqueue it only for given page, just delete this if, if it should be available globally

        wp_enqueue_script( 'my-map-script', get_template_directory_uri() . '/js/ma-map-script.js', array(), '1.0.0', true );

        $storeData = [];
        $args = array( 'post_type' => 'product');
        $loop = new WP_Query( $args );

        foreach ($loop->posts as $post){
            $storeData[] = [
                'title' => apply_filters('the_title', $post->post_title),
                'lat'   => get_field('gps_dlugosc'),
                'long'  => get_field('szerokosc_gps')
            ];
        }
        wp_localize_script('my-map-script', 'storeData', $storeData);
    }
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_map_scripts' );
  • Thanks for advice, i understand that I should give the my_enqueue_map_scripts() in the functions.php file or in temple ? – Piotr Mucha Dec 4 at 9:01
  • @PiotrMucha in functions.php. Template should be just a template - no logic should be placed in there... – Krzysiek Dróżdż Dec 4 at 9:11
  • Ok, function my_enqueue_map_scripts() in functions.php function initMap() in my-map-script.js But how to then call a script on a specific page / in a specific temple? – Piotr Mucha Dec 4 at 9:24
  • Just check in that script if that's a proper page? If the given HTML node exists? Or perform a check in PHP, like I did in the code above (is_page())? – Krzysiek Dróżdż Dec 4 at 9:35
  • Sorry, but i don't understand or, i don't know how i must do this ;/ – Piotr Mucha Dec 4 at 9:39

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.