Multiple Layers on a single google map

581 views
Skip to first unread message

bat...@pastegroup.com

unread,
Jun 4, 2013, 4:10:58 PM6/4/13
to car...@googlegroups.com
Hi,

I'm having trouble adding multiple layers while using a google map base layer.  I have successfully done this with leaflet, but cannot seem to figure it out with google.  I have an example on www.bradatefi.com/FEMA
'var layerUrl' shows up fine as long as there isn't a layer after it that is trying to be placed on the same map.  The second I add another layer on the map, that layer shows and the first layer disappears.  In my example, the layer which shows (layerUrl3) has European Countries which causes my initial layer of American counties not to show.  If you take out 'createLayer' for layerUrl3 however, the American counties show again.  So essentially, I can only get it to show one at a time.  My js code is below and I greatly appreciate your feedback.

Best Regards,
Brad

function initialize()
{
    var latlng = new google.maps.LatLng(40,260);
    var latlng2 = new google.maps.LatLng(43,0);

    var myOptions =
    {
        zoom: 4,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var myOptions2 =
    {
        zoom: 4,
        center: latlng2,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
    var map2 = new google.maps.Map(document.getElementById("map2_canvas"), myOptions2);

    /*MAP 1*/



    cartodb.createLayer(map, layerUrl, function(layer) {
        map.overlayMapTypes.setAt(0, layer); });

    cartodb.createLayer(map2, layerUrl2, function(layer) {
        map2.overlayMapTypes.setAt(0, layer); });

    cartodb.createLayer(map, layerUrl3, function(layer) {
        map.overlayMapTypes.setAt(0, layer); });
}

window.onload = initialize;

Javier Santana

unread,
Jun 5, 2013, 2:42:19 AM6/5/13
to car...@googlegroups.com
Hi, 

you are setting the layer in position 0 for both layers, you should change the index to add more than one layer to a map:

map.overlayMapTypes.setAt(0, layer1);
map.overlayMapTypes.setAt(1, layer2);




--
 
---
You received this message because you are subscribed to the Google Groups "cartodb" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cartodb+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 



--
www.cartodb.com
Map, analyze and build applications with your data

bat...@pastegroup.com

unread,
Jun 5, 2013, 9:00:07 AM6/5/13
to car...@googlegroups.com
This is great.  Thank you Javier.  I am about to set up a map where, upon the user selecting a State from an html select list and clicking submit, the state will be zoomed in on.  I figured I can just have a new google maps base layer show when this occurs with the zoom and LatLng specified, however, if there are different ways of going about doing this I would definitely like to know.  

Thanks,
Brad
Reply all
Reply to author
Forward
0 new messages