Zh GoogleMap Troubleshooting

Error: Oops! Something went wrong

If you've got on site page error like

And in browser console you can see messages:

Google Maps API error: MissingKeyMapError

Google Maps API warning: NoApiKeys

It caused by: Google started require Google Maps JS API Key for new sites (after June 22, 2016)

Read more

You have to get API key and enter it into component options.

Error: link.hasClass is not a function

See: Compatibility Mode

Placemark Title is too big

For placemark title created h2 or h3 tag.

What tag use - it is component option. Press "Options" button (for example, in map list), scroll down to find HTML tag for InfoWin Title.

Problem of big title caused by template styles.

My template is working well, therefore I correct it to show this situation :)

To fix this problem we will be use Firebug for FireFox.

Install Firebug for Firefox, call Firefox and open your map on site.
Open your placemark infowin
Press Ctrl+Shift+C
You’ll see firebug window with styles

Move your mouse to header of placemark (it highlight). If needed press again and select your header.

And you can see all styles in list with values on right

Find the current style for h1

For example, I’ve got this (for my template)

#jsn-master.jsn-textstyle-personal.jsn-specialfont h1

Now add into template css file new line, that override this style

#jsn-master.jsn-textstyle-personal.jsn-specialfont h1.placemarkHead {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.4em;
}

It is only example.

You can see, I’ve add class .placemarkHead to h1

And now placemark header is changed

You can also define not for special template section, for example, change styles like

h2.placemarkHead, 
h3.placemarkHead {
   font-size: 1.4em;
}

Open your template CSS file and add into the end. Or you can define different size for h2 and h3

h2.placemarkHead {
   font-size: 1.4em;
}

h3.placemarkHead {
   font-size: 1em;
}

Or just for class, in this case it will work in any case of component option

.placemarkHead {
   font-size: 1em;
}

Infowin or Zoom control has bad shape

This problem caused by template styles.

To fix this problem we have to change template css-file.

If you check infowin you'll find, that attribute value for your img-tag is set to max-width: 100%

For example this way

img {
  border: none;
  max-width: 100%;
  height: auto;
}

And if there is not any restriction, you just remove or comment this line

img {
  border: none;
  height: auto;
}

After that images for zoom control and for infowin will be displayed correctly

Login screen when map is displaying

When you show map, unexpected appears login screen.

See: Compatibility Mode for Resource Files

OVER_QUERY_LIMIT message when displaying map

When you show map, there is message about error OVER_QUERY_LIMIT appears, and not all placemarks are displayed.

It is caused by google restriction for geocoding. Ie you define placemarks by text address. When map is creating, all this addresses need to geocode into latitude and longitude. And for decrease geocoding service loading google restrict query count in one time.

To fix this problem in component you should go to placemark details. When you open detail page you'll see your placemark on map. Just move it a little, and you fill latitude and longitude fields.

After that there is no need to use geocoder, placemarks will be created immediately without any restriction. And more quickly, because there is no time to geocoding address.

JQuery is not defined error message

When you display map you can't see any map object, and in browser's console you can see error like

It means your template doesn't load JQuery library.

To fix this problem you should

1 - check whether or not you can load this library by your template

2 - if template can't load it, you can do it:

2.1 - go to map details, open Advanced options

2.2 - in field Additional JavaScript files for loading enter links to JQuery

2.3 - check that all OK

For example, by default joomla has JQuery library, just try to enter this two lines

/media/jui/js/jquery.min.js
/media/jui/js/jquery-noconflict.js

3 - if you use my template for full screen, it doesn't load this library, but you can enter URL to load it too in template properties (not in map)

Language:	[[::Zh GoogleMap Troubleshooting|English]]  • [[::Zh GoogleMap Troubleshooting/ru|русский]]