CartodbJS + GoogleMaps + Named Maps

by jsanz

HTML

<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css">
<script src="http://www.maps.google.com/maps/api/js?sensor=false&amp;v=3.12"></script>
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<div id='map'></div>

CSS

html, body, #map {
    height: 100%;
    padding: 0;
    margin: 0;
}

JavaScript

var map;
var mapOptions;

mapOptions = {
    zoom: 11,
    center: new google.maps.LatLng(47.49995, 8.73756),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true
};


// GOOGLE MAP
map = new google.maps.Map(document.getElementById('map'), mapOptions);

var namedLayerSource = {
    user_name: 'admindev',
    type: 'namedmap',
    auth_token: "webappkey",
    named_map: {
        name: "searchandbrowse3",
        layers: [
            {
                layer_name: "op_area",
                interactivity: "cartodb_id, op_area_id"
            },
            {
                layer_name: "tariffzone",
                interactivity: "cartodb_id"
            },
            {
                layer_name: "provider_intertour",
                interactivity: "cartodb_id, providerid"
            },
            {
                layer_name: "provider_porsche",
                interactivity: "cartodb_id, providerid"
            },
            {
                layer_name: "provider_renault",
                interactivity: "cartodb_id, providerid"
            },
            {
                layer_name: "provider_nissan",
                interactivity: "cartodb_id, providerid"
            }
        ]
    }
};

// add cartodb layer with one sublayer
cartodb.createLayer(map, namedLayerSource, {https:true})
    .addTo(map)
    .done(function(layer) {

    // Enable interactions events for all sublayers
    for (var i = 0; i < layer.getSubLayerCount(); ++i ) {

        layer.getSubLayer(i).on('featureClick', function(e, pos, pixel, data) {
            console.log("Event #" + data.cartodb_id + ", name " + data.name);
            layer.setParams("selectedprovider", data.providerid);
        });


        cdb.vis.Vis.addInfowindow(map,layer.getSubLayer(i),['cartodb_id']);
    }

    layer.getSubLayer(0).hide();
    layer.getSubLayer(2).hide();
    layer.getSubLayer(1).hide();
    layer.getSubLayer(4).hide();
    layer.getSubLayer(5).hide();

   ...