Why am I getting a Google Map JavaScript error in my WordPress theme?

Question

I'm missing something when trying to add a Google Map to a WordPress theme. When I use the plugin Debug Bar for WordPress development it throws a JavaScript error of:

Script error.
line 0

I'm unsure where the issue falls and at the beginning after doing research I thought my issue was when I didn't have async defer when calling the Map's API:

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

after reading:

Step 2: Add a map with a marker

I researched to resolve what I thought was the issue and I ran across:

The code for functions.php:

function call_the_js_files() {  
    if (is_page_template('page-foo.php')) :
        wp_enqueue_script( 'google_api', 'https://maps.googleapis.com/maps/api/js?key=AP_KEY&callback=initMap', array( 'jquery' ), '', true );
        add_filter( 'script_loader_tag', function ( $tag, $handle ) {
            if ( 'google_api' !== $handle )
                return $tag;
            return str_replace( ' src', ' async defer src', $tag );
        }, 10, 2 );
        wp_enqueue_script( 'google_map', get_template_directory() . '/js/google.js', array( 'jquery' ), '', true );
    endif;
add_action( 'wp_enqueue_scripts', 'call_the_js_files' );

The code for google.js:

( function( $ ) {
    $(function initMap() {
        var uluru = {
            lat: 11111111, 
            lng: 222222222
        };
        var map = new google.maps.Map(document.getElementById('googleMap'), {
          zoom: 15,
          center: uluru
        });
        var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
        var marker = new google.maps.Marker({
          position: uluru,
          map: map,
          icon: iconBase + 'parking_lot_maps.png'
        });
        google.maps.event.addDomListener(window, "resize", function() {
           var center = map.getCenter();
           google.maps.event.trigger(map, "resize");
           map.setCenter(center); 
        });
    });
} )( jQuery );

When I view the source I get:

<script type='text/javascript' async defer src='https://maps.googleapis.com/maps/api/js?key=API_KEY;callback=initMap'></script>
<script type='text/javascript' src='site/location/for/js/google.js'></script>

but I'm still thrown an error with Debug Bar. Is there something I am missing or doing incorrectly? I have no issues with rendering the map the only issue I'm experiencing is the JavaScript error. While in dev my current API settings on Google are set to None under restrictions.

When I researched further under google map script error line 0 I ran across Google Maps Script error in Onion.js but I am already running <meta http-equiv="X-UA-Compatible" content="IE=edge"> in my header.php.

I think the issue here is your second script runs before google api loads into the page. if you add async, other resources will keep loading concurrently. Also it would be a stupid question but are you adding your scripts in between head and do you have an element with googleMap id? — serdar.sanri
– serdar.sanri, Commented Nov 11, 2016 at 21:29
Its loaded in the footer and yes im calling the element. As stated it renders fine but it throws an error — GʀᴜᴍᴘʏCᴀᴛ
– GʀᴜᴍᴘʏCᴀᴛ, Commented Nov 11, 2016 at 21:32

Stephen Strickland · Accepted Answer · 2016-11-12 05:16:29Z

1

change your functions.php to include something like the below. The google map api has a dependency to your script.

<?php

function theme_js() {

    wp_enqueue_script( 'gmap', '//maps.googleapis.com/maps/api/js?key=YOuR_KEY&callback=initMap', array ('theme_js'), '1.0', true );

    wp_register_script( 'theme_js', get_stylesheet_directory_uri() . '/js/hotelloc.js', array(), '1.0', true );



}

add_action('wp_footer', 'theme_js');


?>

answered Nov 12, 2016 at 5:16

Stephen Strickland

133 bronze badges

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

Comments

serdar.sanri · Accepted Answer · 2016-11-11 21:35:23Z

0

ok I think the issue is at

( function( $ ) {
$(function initMap() {

this is throwing an error because you can't define a function like that. Replace it as

( function( $ ) {
    function  initMap(){
    .....
    }
} )( jQuery );

answered Nov 11, 2016 at 21:35

serdar.sanri

2,2281 gold badge18 silver badges21 bronze badges

1 Comment

GʀᴜᴍᴘʏCᴀᴛ Over a year ago

No that is not the issue, reference How do I add a simple jQuery script to WordPress?. The issue seems to appear in the call the map API.

Community · Accepted Answer · 2017-05-23 12:32:23Z

With Stephen's answer I ended up targeting the wp_footer and included the JavaScript instead of calling it from an external file as that is what is in Google's example.

Here is the code, I hope it can help someone else:

function call_the_js_files() {  
    if (is_page_template('page-foo.php')) :
    ?>
    <script type='text/javascript'>
    function initMap() {
        var uluru = {
            lat: 11111111, 
            lng: 222222222
        };
        var map = new google.maps.Map(document.getElementById('googleMap'), {
          zoom: 15,
          center: uluru
        });
        var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
        var marker = new google.maps.Marker({
          position: uluru,
          map: map,
          icon: iconBase + 'parking_lot_maps.png'
        });
        google.maps.event.addDomListener(window, "resize", function() {
           var center = map.getCenter();
           google.maps.event.trigger(map, "resize");
           map.setCenter(center); 
        }
    </script>
    <?php
        wp_enqueue_script( 'google_api', 'https://maps.googleapis.com/maps/api/js?key=AP_KEY&callback=initMap', array( 'jquery' ), '', true );
        add_filter( 'script_loader_tag', function ( $tag, $handle ) {
            if ( 'google_api' !== $handle )
                return $tag;
            return str_replace( ' src', ' async defer src', $tag );
        }, 10, 2 );
    endif;
add_action( 'wp_footer', 'call_the_js_files' );

Collectives™ on Stack Overflow

Why am I getting a Google Map JavaScript error in my WordPress theme?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related