Zh GoogleMap Troubleshooting: Difference between revisions
(10 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
== Error: | == Error: Oops! Something went wrong == | ||
If you've got on site page error like | |||
[[File: | [[File:Error-Oops-Key.png]] | ||
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) | |||
[https://cloud.google.com/maps-platform/pricing Read more] | |||
You have to get API key and enter it into component [[Zh_GoogleMap_Description#OptionsAnchor|options]]. | |||
== Error: link.hasClass is not a function == | |||
[[File: | [[File:Bug_-_linkHasClass.JPG]] | ||
See: [[Zh_GoogleMap_Description#CompatibilityModeAnchor|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 | |||
<pre> | <pre> | ||
h2.placemarkHead, | |||
h3.placemarkHead { | |||
font-size: 1.4em; | |||
} | } | ||
</pre> | </pre> | ||
Or you can define different size for h2 and h3 | |||
<pre> | |||
h2.placemarkHead { | |||
font-size: 1.4em; | |||
} | |||
h3.placemarkHead { | |||
font-size: 1em; | |||
} | |||
</pre> | |||
</ | |||
Or just for class, in this case it will work in any case of component option | |||
<pre> | |||
.placemarkHead { | |||
font-size: 1em; | |||
} | |||
</pre> | |||
== Infowin or Zoom control has bad shape == | == Infowin or Zoom control has bad shape == | ||
Line 131: | Line 130: | ||
When you display map you can't see any map object, and in browser's console you can see error like | When you display map you can't see any map object, and in browser's console you can see error like | ||
[File:JQuery_is_not_defined.png] | [[File:JQuery_is_not_defined.png]] | ||
It means your template doesn't load JQuery library. | It means your template doesn't load JQuery library. | ||
Line 158: | Line 157: | ||
{{Languages}} | {{Languages|Zh_GoogleMap_Troubleshooting}} | ||
[[Category:Zh GoogleMap|Troubleshooting]] | [[Category:Zh GoogleMap|Troubleshooting]] |
Latest revision as of 12:04, 12 May 2020
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)
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.
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 • русский |
---|