Should I add in the CSS
#map{
height: 100%
}
And a <div id=”map”></div> onto my page?
enqueue script fixed to add uri so the map_script.js shows in the page source when you click on it, but still no map…
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
The order is wrong:
<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCoy32ewrrQZ4cLSfQxd1u3vtL-4gFpTR0&signed_in=true&callback=initMap&ver=4.3.1'></script>
<script type='text/javascript' src='http://www.tothenationsworldwide.com/wp-content/themes/university/js/map_script.js?ver=4.3.1'></script>
See, the first script uses a callback that is only defined in the second script. So it is never going to be available. Also Google recommends you use the async attribute on the map api.
Thanks for the input. Okay I have the order like this on my page:
<script async defer src=”https://maps.googleapis.com/maps/api/js?key=AIzaSyCoy32ewrrQZ4cLSfQxd1u3vtL-4gFpTR0&signed_in=true&callback=initMap”></script>
<script type=”text/javascript” src=”http://www.tothenationsworldwide.com/wp-content/themes/university/js/map_script.js?ver=4.3.1″></script>
<div id=”map”></div>
and in my CSS
#map{
height: 80%;
}
and the code on my first post in my functions.php plus the revision with the uri
But still not showing the map. There is an extra space after the page’s title though.
Any advice?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
To absolutely make sure that it not an issue with the order, reverse the order of the two scripts.
The script that calls this:
callback=initMap
Should be loaded _after_ the script that defines it.
Reverse the order of the scripts on the page? So the API key comes after the .js file with my javascript code? I tried, but still not showing.
Thanks for the help so far, this has taken me too long.
Any other suggestions?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
So the API key comes after the .js file with my javascript code?
Yes, like this:
<script type='text/javascript' src='http://www.tothenationsworldwide.com/wp-content/themes/university/js/map_script.js?ver=4.3.1'></script>
<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCoy32ewrrQZ4cLSfQxd1u3vtL-4gFpTR0&signed_in=true&callback=initMap&ver=4.3.1'></script>
Thanks for the help so far, this has taken me too long.
Are you using the browser’s console to debug JS? That can help understand issues better when developing with JavaScript.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Check in the source code for “callback=initmap” to see if your reverse changes have worked.
If I rearrange the scripts on the page, they are rearranged in the page content. They also show up before they show up in the page content because I used the enqueue code in my functions.php and it has the API key first and map_script.js afterwards. If this makes sense…In my page source, the API key shows twice and the javascript file shows twice because I am enqueueing them and adding them to my page.
I finally got it by changing the CSS
thanks for your help!
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
I used the enqueue code in my functions.php and it has the API key first and map_script.js afterwards.
They don’t necessarily enqueue in the order they appear in the functions.php file. A more consistent and accurate way to order them is by using making one a dependency of the other, see the $deps parameter documentation: https://codex.ww.wp.xz.cn/Function_Reference/wp_enqueue_script#Parameters
For example, you have this maps API script:
wp_enqueue_script( 'google-maps-api', 'path-to-file', array(), '1.0.0', true );
And you want to then enqueue your ‘map_script’ file that depends on the ‘google-maps-api’ file, you’d use this:
wp_enqueue_script( 'maps-script', 'path-to-file', array('google-maps-api'), '1.0.0', true );
The duplicated Map API scripts also might cause problems for you. I’m not sure you need to call the Google Maps API library script more than once.
Oh okay, I see. Thanks for the heads up!
