0

I have a working JS Fiddle here:

http://jsfiddle.net/geocodezip/50g6vgns/1/

It is not displaying correctly when I paste all the code onto the text area of a WordPress page.

For the external resource to Google's map libary I added this to functions.php

add_action('wp_head','my_addition_js');

function my_addition_js() {
    echo '<script src="https://maps.googleapis.com/maps/api/js" type="text/javascript"/>';
}

Pasted the html, css, and javascript into the text/body of the WordPress page, in various orders with various taggings, different themes, which I won't bore you with, because I'm pretty convinced I'm just putting the code in the wrong place. Yes using text not visual.

Where would I paste the code in the fiddle, to make it work in WordPress?

Does what I added to functions.php look ok? Does it matter whether the javascript goes first or last or whether I put the styles in styles.css?

At most I was able to see the template sidebar but no map, but I've switched things around and now not even seeing the template.

Thank you for all help.

Improve this question

1 Answer 1

Reset to default
1

The JS in the fiddle should be saved to a file, for example, scripts.js. If this was in a folder in the theme root called js you could enqueue the scripts like so:

function add_wp_scripts() {
    wp_enqueue_script(
        'google-maps',
        'https://maps.googleapis.com/maps/api/js',
        array(),
        null,
        null
    );
    wp_enqueue_script(
        'script',
        get_template_directory_uri() . '/js/script.js',
        array(),
        null,
        true
    );
}
add_action( 'wp_enqueue_scripts', 'add_wp_scripts' );

The final parameter sets whether the script is loaded in the <head> or before the </body> tag. Null will place the script in the <head>, and obviously setting the parameter to true will put it by the </body>.

The script should be fine, as long as the codes good (!) and the Google Map script is loaded in the <head>.

See also: https://developer.wordpress.org/reference/functions/wp_enqueue_script/

Improve this answer
11
  • 2
    I have an addition: 'script' should be dependent on 'google-maps' so there is no reason to enqueue 'google-maps' in the header.
    – Max Yudin
    Commented Mar 29, 2016 at 7:23
  • True, as long as you enqueue it before script.js it will work.
    – Adam
    Commented Mar 29, 2016 at 11:04
  • If so, please correct or update your answer to help others too.
    – Max Yudin
    Commented Mar 29, 2016 at 12:30
  • Thanks @MaxYudin. Will try this and report back. Sorry for the delayed response. So it doesn't matter whether the last parameter is null or true for the Google Map Script?
    – javaandy
    Commented Mar 30, 2016 at 0:46
  • I tried the above and got a console warning for having no API key. I added my API like this: maps.googleapis.com/maps/api/… and got Google Maps API Error: js?key=AIzaSyBwRFMrx8py8-fTxdSrHQKRAU0Prg5mio4?callback=initMap:32 Google Maps API error: Google Maps API error: InvalidKeyMapError Without the callback it still throws an error. I'd been using that API key for google places service so not sure why it wouldn't work for this. In all cases map still not showing.
    – javaandy
    Commented Mar 30, 2016 at 1:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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