CGGoogleMaps2 Wont Display Maps

[CapereSpiritum]

I used to use the predecessor (CGGoogleMaps) in an old site.
I'm looking to utilise the maps function in a new website in the following temp domain.
http://teessiders.artworknetwork.co.uk. Just using the Simplex template for now, I'll switch once I've got the map working.

I've created a map 'Test' and tried calling it with {CGGoogleMaps2 map='Test'} and {CGGoogleMaps2 map='1'}

Have also added {cggm2_add_dynpoint name='Green Lane' address='17 Green Ln Middlesbrough TS5 7RT'} before {CGGoogleMaps2}

I have {cms_jquery} in the template also.

A Google API Key has been set up at Google and entered into the CGGM2 module. I've also tried calling this directly in the template.

There's something quite basic, I'm sure, that I've overlooked. I've read the Module Help File plus the cggm2 Plugin Reference but still no success.

Please, can anyone using this module point me in the right direction?
Thanks.

I'm using the following:
PHP V 5.6.30
CMSMS Version 2.1.6

Installed Modules
AdminSearch 1.0.2
Album 1.11
CGExtensions 1.55.5
CGGoogleMaps2 1.1.1
CGSimpleSmarty 2.1.6
CGSmartImage 1.21.9
CMSContentManager 1.1.4
CMSMailer 6.2.14
Captcha 0.5.5
CompanyDirectory 1.23.5
DesignManager 1.1.1
FileManager 1.5.2
FormBuilder 0.8.1.6
JQueryTools 1.4.0.1
MicroTiny 2.0.3
ModuleManager 2.0.5
Navigator 1.0.3
News 2.50.6
Search 1.50.2

[Rinker]

Mostly it is because there are multiple jquery calls, check your template or the page source code in the browser.

If not above then try to move your jquery calls from top to bottom or from bottom to top.....

[CapereSpiritum]

Hi Rinker
Thanks for the reply.

Reorganised and pruned jquery files. Tried various positions (top or bottom)

No result.
Have {get_template_vars} to see if I'm missing anything else.

I've used a {debug} tag in the past but cannot remember the correct tag. Do you know it?

[wmdvanzyl]

Found this in the source code:

Code: Select all

<__script__ type="text/javascript" src="//maps.google.com/maps/api/js?libraries=geometry&key={$apikey|default:''}"></__script>

That variable is not being evaluated. Maybe have a look at that.

[CapereSpiritum]

Hi wmdvanzyl

I'd seen that before and tried various options.
It now displays the API key.

Don't suppose you have any other suggestions?

[wmdvanzyl]

Code: Select all

<__script__ async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6HcMKptWtodCQ6_ITaH1z6VxP9u56XFQ&callback=initMap"  type="text/javascript"></__script>

Just to get to as simple a starting point as possible, drop the async's and defer's for now.

EDIT: And drop the duplicate line.

[rotezecke]

i get a bunch of errors in my JS console, the first one being

div is not defined.

Looking at the offending line, there's a dot instead of a semicolon.

Code: Select all

var div = document.getElementById('cggm_map_1').

[CapereSpiritum]

Hi wmdvanzyl and rotezecke

Dropped the drop the async's and defer's and the duplicate script.
There was no change there

After trying the first dot without change I tried the second

Code: Select all

getElementById('cggm_map_1').

After switching to a semiciolon, I now get an error message

Code: Select all

jQuery and jQuery UI Are Required

These are both called and can be seen in source code.

I was seriously considering installing an older version of CMSMS, Company Directory and CGGoogleMaps (1), which I've successfully used in another site. However, there is now a problem calling the maps, which I presume is down to the required API Key.

If I can't get this to work, I'll have to use a WP setup. I really don't like WP and have always used CMSMS.

Would admin access to one of you be any use?

[rotezecke]

you have this script TWICE in your source code (both contained the same typo, you only fixed up one). below is the corrected one.

Code: Select all

if( typeof(jQuery) == 'undefined' ) {
  var div = document.getElementById('cggm_map_1');
  div.innerHTML = '<h3 style="color: red;">jQuery and jQuery UI Are Required</h3>';
  throw new Error('jQuery and jQuery UI Are Required');
}

1) Why are you calling it twice?
2) Even when fixed, i think it will throw the error, as you test for jQuery before you load the library.

[CapereSpiritum]

Hi rotezecke and everyone else

Sorted now. Thanks for your help.

In the end, I loaded the HTML and scripts from a test file in the Docs/Tests folder.

That helped a bit.

You comment of doubling the script call was spot on. I didn't realise that the same error code was called in both the Map and the Directions templates.

I did some stripping out and now have a working map that just requires styling etc.

My knowledge of jquery and JS is not to good. I'm really a designer plus I'm hot on CSS. This is why I struggled.

It's a lot to learn whilst making a living