Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
Google Map not loading all tiles
Hello,
I’m stumped. I just couldn’t make all the tiles show up on the Google Map. I’m using the plugin pro_googlemapv3, the only map plugin that uses API 3, it seems.
Here’s a look on the Google Map. Just click on the “Directions” tab and you’ll see that not all tiles are showing up. What could’ve possibly gone wrong?
Offline
Re: Google Map not loading all tiles
Seems to be caused by the fact that the element is hidden; forcing redraw fixes the map.
Start by restructuring your JavaScript, and how its initialized and bound. Its unnecessary to initialize anything that is meant for the hidden tabs on the initial document load. For instance the map and lightbox should be executed (and especially drawn) once the tab is opened; you may want to look into better tab script for this reason alone — something that offers an event based API, which you can attach handlers to (e.g. jQuery UI or something more lightweight).
Reconstructing the scripts would make the page more responsive and load faster. Currently half of the time the page takes to load is used to the map which isn’t visible, and the drawing fails too. Drawing the map once the tab is visible, should also fix the error;
- Load Maps API assets on tab change. The tab script you are using doesn’t seem to offer events, but you should be able to use click event on the tab links. You may want to use Require.js to do the asset pulling.
- Put all Map API related code inside the event handler; and make sure its not in global scope to avoid collisions, especially if you use common variable names.
- Then initialize your initialize() function on the tab click after you have loaded the map assets. You can use jQuery’s event handling methods instead of the Map API too.
Last edited by Gocom (2013-09-26 09:44:51)
Offline
Re: Google Map not loading all tiles
Thanks Gocom. Unfortunately I have zero knowledge of javascript. :| Do you think I can execute what you just said? I only know html, css, and copy-paste js. Otherwise I’ll just use a different layout.
Offline
Pages: 1