"initMap is not a function" error

I want to include a Google Map in my Plone 4.3.10rc1 site. I first installed collective.geo.bundle but was unable to get it working. When I removed it from buildout.cfg the ZODB was corrupted and I had to do a fresh install to bring the Plone back online.
Wanting a smaller, simpler solution I followed this recipe:
The page I am building to hold the map returns this error:
InvalidValueError: initMap is not a function
initMap is in the Google API script, which I have installed in the Site setup "Site" section where google analytics would go:

I googled this and found references to "initMap is not a function" for other CMSs but am unable to translate their instructions into Plone relevancy. I am hoping someone might be able to point the way forward. The page in question is located here:

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

"InvalidValueError" is not a typical Plone exception. Have you checked your "error_log" object (an object in your Plone site, accessed via the ZMI); it contains detailed information for most exceptions raised during request handling - among others where the exception was raised. In order to analyse exceptions causes, information found in "error_log" is important.

errors like that can be that you javascript code
....initMap ({do something)

runs before the script that declares 'initMap'

it might be enough to move some of the scripts to /portal_javascript or in a template

1 Like

Hello Deiter,
The error log is set up to keep 20 exceptions but it is empty.

Hello Espen,
googlemaps.js is the last script called in portal_javascripts. If I understand your suggestion I could move the maps api script into portal_javascripts and place it before googlemaps.js and that might solve the problem?
If I were to do that, I would place the script in portal_skins/custom and call whatever I name the file from portal_javascripts before googlemaps.js?

It looks like there are several 'related' javascripts' , so yes: try different orders of them

That said: it should be possible to do this with add-ons and no coding ( I have always managed to find a Maps product that works with (every) Plone (version).

This means that the error is not generated on the server (Plone) side.

My first assumption has been that the error comes from Google -- as a special means to indicate problems with the access to https://maps.googleapis.com/maps/api/js?key=BLAHBLAH&callback=initMap. The HowTo you reference in your initial post does not contain the callback=initMap. I would carefully check that you really follow the HowTo.

Thank you Deiter, I will have a closer look at the how to.

I eliminated everything except the Google scripts to see if I could get the map to display. I have a SyntaxError: Unexpected token '<' error that points to the greaterthan bracket. I split the script into two pieces, the initMap section and the async defer section separately, ran it, and then got the same error in the console on both scripts.
I thought maybe if I deleted the <script> tags it might work but am unsure if the code would run without them, and also the formatting of the async defer tag has the api key called inside the greaterthan bracket. Any help would be greatly appreciated.
Thank you.

This likely is an "XHTML" issue. In "HTML", "script" is declared to have "CDATA" content, i.e. it may contain an unescaped "<". XML (and this implies "XHTML") does not know "CDATA" content; therefore, an "<" must be escaped as "&lt;".

The easiest way to work around those HTML/XHTML incompatibilities is to avoid content in "script" tags altogether: but your javascript code into a resource and use its url in the "src" attribute of "script".