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)

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.

Open your template CSS file and add into the end style overriding.

Define for both tags, for example, change styles like

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

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:	English • русский