Zh GoogleMap Troubleshooting: Difference between revisions

From Documentation
Jump to navigation Jump to search
mNo edit summary
 
(21 intermediate revisions by the same user not shown)
Line 1: Line 1:
== Error: link.hasClass is not a function ==
== Error: Oops! Something went wrong ==


[[File:Bug_-_linkHasClass.JPG]]
If you've got on site page error like


See: [[Zh_GoogleMap_Description#CompatibilityModeAnchor|Compatibility Mode]]
[[File:Error-Oops-Key.png]]


And in browser console you can see messages:


Google Maps API error: MissingKeyMapError


Google Maps API warning: NoApiKeys


== Placemark Title is too big ==
It caused by: Google started require Google Maps JS API Key for new sites (after June 22, 2016)
This problem caused by template styles.


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


[[File:Bug-H1-1.JPG]]
== Error: link.hasClass is not a function ==


To fix this problem we will be use Firebug for FireFox.  
[[File:Bug_-_linkHasClass.JPG]]


Install Firebug for Firefox, call Firefox and open your map on site.<br />
See: [[Zh_GoogleMap_Description#CompatibilityModeAnchor|Compatibility Mode]]
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.


[[File:Bug-H1-2-1.JPG]]


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


[[File:Bug-H1-2-2.JPG]]
== Placemark Title is too big ==
 
For placemark title created h2 or h3 tag.


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


For example, I’ve got this (for my template)
Problem of big title caused by template styles.
<pre>
#jsn-master.jsn-textstyle-personal.jsn-specialfont h1
</pre>


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


Now add into template css file new line, that override this style
Define for both tags, for example, change styles like


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


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


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


It is only example.  
h3.placemarkHead {
 
  font-size: 1em;
You can see, I’ve add class
}
<code>
</pre>
.placemarkHead
</code>
to h1
 
And now placemark header is changed
 
[[File:Bug-H1-4.JPG]]
 


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 90: Line 89:


And if there is not any restriction, you just remove or comment this line
And if there is not any restriction, you just remove or comment this line
<pre>
img {
  border: none;
  height: auto;
}
</pre>


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


== Login screen when map is displaying ==
== Login screen when map is displaying ==
Line 113: Line 126:




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