CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Ben Blank
Ben Blank

Reputation: 56572

Creating a map using only toggleable overlays?

I'm trying to create map (using the Google Maps JavaScript API V3) which consists of several partially-transparent layers. By default, these layers should all be overlaid on top of one another to form a complete map, but the user should be able to turn any combination of them on or off (while preserving order) to create whatever view they prefer.

So far, I've had a great deal of luck getting this working for a single layer using map.mapTypes, but when adding all the layers via map.overlayMapTypes, I've hit a couple of snags:

  1. The map doesn't seem to get fully initialized if map.setMapTypeId() is not called (no controls appear and the map is not correctly centered) and it cannot be called with an overlay.
  2. It isn't clear how to toggle the visibility of an overlay without directly modifying the map.overlayMapTypes array, which complicates keeping them correctly ordered. I'd much prefer something analogous to the Traffic/Transit/Photos/etc. control available within Google Maps itself.

Here's the initialize function I'm working with. I'd post a link, but the map imagery isn't publicly available:

function initialize() {
    map = new google.maps.Map(document.getElementById("map_canvas"), {
        zoom: 0,
        center: center
    });

    /* if these lines are uncommented, the single layer displays perfectly */
    //map.mapTypes.set("Layer 3", layers[3]);
    //map.setMapTypeId("Layer 3");
    //return;

    var dummy = new google.maps.ImageMapType({
        name: "Dummy",
        minZoom: 0,
        maxZoom: 6,
        tileSize: new google.maps.Size(256, 256),
        getTileUrl: function() {return null; }
    });

    map.mapTypes.set("Dummy", dummy);
    map.setMapTypeId("Dummy");

    // layers is an array of ImageMapTypes
    for (var i = 0; i < layers.length; i++) {
        map.overlayMapTypes.push(layers[i]);
    }
}

As you can see, I've tried creating a "dummy" maptype (which always returns null for tile URLs) to serve as the base map. While this does cause the controls to display, it still doesn't center correctly.

What's the best way to create a map which consists only of toggleable overlays?

Update: Turns out the dummy maptype works perfectly well if you also remember to set a projection. That's one problem solved, at least. :-)

Upvotes: 0

Views: 1051

Answers (1)

Ryan Olds
Ryan Olds

Reputation: 4847

I use ImageMapType, but I don't add it to mapTypes. I just add it to overlayMapTypes and when I need to remove it I use setAt to set the entry in overlayMapTypes to null.

You will need to add individual controls to the UI that toggle the individual layers.

Upvotes: 1

Related Questions