将带有短代码的Google Maps JavaScript API排入Wordpress

Question

I have spent countless hours trying to figure this out. I do not understand what I am doing wrong.

I have this code in my functions.php:

add_shortcode('custom-map-shortcode', 'custom_map_shortcode_callback');

function custom_map_shortcode_callback() {
    return '<div id="map" style="height: 100%; margin: 0;padding: 0;"></div>';
 }

 add_action('wp_enqueue_scripts', 'enqueue_map_script' );
 add_action('wp_head', function(){
     echo '<script src="https://maps.googleapis.com/maps/api/js?key=APIKEY&signed_in=true&callback=initMap"></script>';
 });

function enqueue_map_script(){
    global $post;

    if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'custom-map-shortcode') ) {
        wp_enqueue_script( 'map-script', get_template_directory_uri() . '/js/map_script.js');
    }
}

When I place [custom-map-shortcode] into the body of my page, the map doesn't load. The [custom-map-shortcode] doesn't show up either, so I know something is doing something right. But something is missing. Now I know my google map works, its been tested. The javascript code is not wrong. The source shows up in my page source and when I click it, it is linked to my map_script.js. The API Key shows up in my page source too.

You can check for yourself at http://www.tothenationsworldwide.com

Any help would be greatly appreciated!

Answer 1

I have a feeling it is because your <script src=" line has a line break in it after the js?. You can only see it when you view source in the browser:

add_action('wp_head', function(){
     // Here you have an invisible line break. Look at your code,
     // you will see your key=...etc is on a new line. That may invalidate it
     //---------------------------------------------------------v
     echo '<script src="https://maps.googleapis.com/maps/api/js?key=APIKEY&signed_in=true&callback=initMap"></script>';
 });

When I view the source, html color-coding looks invalid after that point, so I think that is a big part of it.