Map preloading experiment.

Map loading...
Map loading...
Map Sat Hyb Hide

What is this example trying to show?

There are four maps on this page but you can see only two of them. All the three layers of the left map are loaded as separate maps. The Map/Sat/Hyb/Hide buttons control map divs visible/hidden for instant map type switching. The right map is just for comparision.

This technique can be applied with markers as well, for zooming or recentering. Whenever instant view shifts are needed.The number of maps should be kept sensible. I would not try to use more than twenty small maps.

New 'drag' event (2.38+)

If you drag the map, you drag the invisible layers too. Multiple map interconnection with 'move' or 'moveend' event listeners needed extra variables and if-statements to separate user dragging from code controlled panning. The technique, created by Mike Williams, has been used with 'classic' dual maps. 'Drag' and 'dragend' events are triggered only by user operations and make things much more simple. If there are arrow buttons, you must combine 'drag' with 'mouseover'.

Custom control buttons with <table>

Map switching with original type buttons would have taken a lot of code (mapTypeChanged, getMapType, setMapType back...). It was easier to make type buttons of my own. They are simply cells of a table that are linked to Javacript functions. That is quite a convenient way to make any custom control buttons.

Location selector

Imagine a sidebar with 300 options. A dropdown selector box does not take that much room. Values in selector are comma separated lng,lat,zoom. The function that parses the values to JavaScript variables is quite simple.

Ideas and code by Esa.

More examples

Feedback welcomed: