Enqueue Google Maps javascript API with shortcode into 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!

The source code suggests that somehow you are loading a ne HTML page into the existing document flow - fine for an iframe, not so good in a div. It's not even valid html being loaded...it just so happens to be before <div id="map"></div> — Professor Abronsius
I am a bit confused. I deleted the div id=map because as far as I am aware it is not needed when using a shortcode. What you are saying about the html page I don't quite understand. I am using the University theme in wordpress and in my page I am also writing a script with <!DOCTYPE html> <html> <head> </head> <body> [custom-map-shortcode] and so on... Is this the correct way of going about it? or are you suggesting my code in my question is incorrect? Or possibly my javascript code? My javascript code has no html in it. — plet9090
I fixed the code to not include the html tags on my page. This is now fixed, but my issue is not resolved. [custom-map-shortcode] is not appearing on my page so I assume my shortcode is correct — plet9090
One thing I would say - the page is very slow to load ( at least for me on a rubbish broadband connection ) due to the inclusion of so many, full size, hi-res photos. You ought to generate thumbnails of the images and link to the fullsize one perhaps. Anyway, just an observation - can offer no insights to Wordpress issues - never use it. — Professor Abronsius

Rasclatt Rasclatt · Accepted Answer · 2015-11-19T06:55:05

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.

Enqueue Google Maps javascript API with shortcode into Wordpress

1 Answers