Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

OpenLayers allows multiple map layers to be hosted on a common platform. If the map application supports a wide variety of maps, say from Google, Yahoo and Microsoft, I find that upon initialization, the APIs from these map providers are loaded as well, regardless of whether I use them or not.

I am not sure if the calls to these third party javascripts count towards the usage quota of these map service providers (seems to be). Besides, there is also an additional delay in loading of the web page.

Having said that, I am looking for a way to put a placeholder in the layer switcher such that I can avoid declaring the third party map layer class and hence avoiding a call to the third party API script.

share|improve this question

I gave it a try and it works quite well. Have a look at .

Add an event listener for changebaselayer:

map = new OpenLayers.Map('map', {
        projection: new OpenLayers.Projection("EPSG:3857"),
        strong texteventListeners: {
            "changebaselayer": mapBaseLayerChanged

add an Google-dummy-Layer:

google_layer = new OpenLayers.Layer("Google", {
        isBaseLayer: true,
        displayInLayerSwitcher: true

add these functions for the baseLayer-change-Event:

function click_load() {
    if (typeof (google) == "undefined") {

    } else {
        console.log("google api already loaded");

// callback-function of the Ajax-Request:

function google_ready() {
    // replace Google-layer
    google_layer = new OpenLayers.Layer.Google("Google", {
        isBaseLayer: true
    map.addLayer(google_layer); // add Google-layer
    map.layers.splice(1, 1);
    map.layers.splice(map.layers.length - 1, 1);
    map.layers.splice(1, 0, google_layer);


function mapBaseLayerChanged(event) {
    //console.log(event.type + " " +;
    if ( == 'Google') {
share|improve this answer

you can list the layers such as Google/OSM/Bing but only create them when users select it. function createOtherAPIs() { var osmLayer = new OpenLayers.Layer.OSM(); } call createOtherAPIs when needed Load OSM Map

even though you see the loading of 3rd party scripts on body load. the tiles are loaded only when you add the layer to map using map.addLayer(osmLayer);

Decouple the ui from the api code. so the user will see an option to load osm layer and will only be activated on a button click or checking a checkbox

share|improve this answer
I understand the concept, can you show me the implementation part? For example, how to display a layer switcher containing the Google Map radio option without adding the Google Map layer? – Question Overflow Nov 4 '12 at 13:45
well openlayers doesnt provide you with ui modules. you need to use a library like geoExt for such kind of things. see examples particularly this one here when you click "Add Layer" only the corresponding map is created(means that 3rd party api call is made) – rashad Nov 4 '12 at 16:03
This is no different than defining layer first and adding to map. Tiles are only loaded when the layer is selected in layerswitcher. Defining and adding the layer, does not load tiles. – neogeomat Aug 20 '13 at 15:29

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.