Zh GoogleMap Troubleshooting: Difference between revisions

From Documentation
Jump to navigation Jump to search
mNo edit summary
 
(25 intermediate revisions by the same user not shown)
Line 1: Line 1:
__TOC__
== Error: Oops! Something went wrong ==
 
If you've got on site page error like
 
[[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 ==
== Error: link.hasClass is not a function ==


Line 5: Line 22:


See: [[Zh_GoogleMap_Description#CompatibilityModeAnchor|Compatibility Mode]]
See: [[Zh_GoogleMap_Description#CompatibilityModeAnchor|Compatibility Mode]]






== Placemark Title is too big ==
== Placemark Title is too big ==
This problem caused by template styles.


My template is working well, therefore I correct it to show this situation :)
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'''.


[[File:Bug-H1-1.JPG]]
Problem of big title caused by template styles.


To fix this problem we will be use Firebug for FireFox.  
Open your template CSS file and add into the end style overriding.


Install Firebug for Firefox, call Firefox and open your map on site.<br />
Define for both tags, for example, change styles like
Open your placemark infowin<br />
Press Ctrl+Shift+C<br />
You’ll see firebug window with styles<br />


Move your mouse to header of placemark (it highlight). If needed press again and select your header.
<pre>
h2.placemarkHead,
h3.placemarkHead {
  font-size: 1.4em;
}
</pre>


[[File:Bug-H1-2-1.JPG]]
Or you can define different size for h2 and h3


And you can see all styles in list with values on right
<pre>
h2.placemarkHead {
  font-size: 1.4em;
}


[[File:Bug-H1-2-2.JPG]]
h3.placemarkHead {
  font-size: 1em;
}
</pre>


Find the current style for h1
Or just for class, in this case it will work in any case of component option


For example, I’ve got this (for my template)
<pre>
<pre>
#jsn-master.jsn-textstyle-personal.jsn-specialfont h1
.placemarkHead {
  font-size: 1em;
}
</pre>
</pre>


== Infowin or Zoom control has bad shape ==
This problem caused by template styles.
[[File:Zoom_and_InfoWin_with_bad_shape.JPG]]
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%'''


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


<pre>
<pre>
#jsn-master.jsn-textstyle-personal.jsn-specialfont h1.placemarkHead {
 
   font-family: Arial, Helvetica, sans-serif;
img {
   font-size: 1.4em;
   border: none;
  max-width: 100%;
   height: auto;
}
}
</pre>
</pre>


[[File:Bug-H1-3.JPG]]


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


It is only example.
<pre>
 
img {
  border: none;
  height: auto;
}
 
</pre>
 
After that images for zoom control and for infowin will be displayed correctly


You can see, I’ve add class
<code>
.placemarkHead
</code>
to h1


And now placemark header is changed


[[File:Bug-H1-4.JPG]]




Line 76: Line 117:
== OVER_QUERY_LIMIT message when displaying map ==
== OVER_QUERY_LIMIT message when displaying map ==


When you show map, there is message about error OVER_QUERY_LIMIT appears, and not all placemarks is displayed.
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.
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 in map. Just move it a little, and you fill latitude and longitude fields.  
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.
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
[[File:JQuery_is_not_defined.png]]
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
<pre>
/media/jui/js/jquery.min.js
/media/jui/js/jquery-noconflict.js
</pre>


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)






{{Languages}}
{{Languages|Zh_GoogleMap_Troubleshooting}}


[[Category:Zh GoogleMap]]
[[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)

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.

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