HTLM: Two Google maps side by side, linked with legend

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=650, user-scalable=yes">
 
 
    
 
 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script src="https://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />

/** bubble visualization */

// "#67001F" "#B2182B" "#D6604D" "#F4A582" "#FDDBC7" "#D1E5F0" "#92C5DE" "#4393C3" "#2166AC" "#053061"

// /** bubble visualization */

$(document).ready(function(){

var mapOptions = {
        zoom: 10,
        center: new google.maps.LatLng(40.6700, -73.9400),
        //mapTypeId: google.maps.MapTypeId.ROADMAP
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

map = new google.maps.Map($('.map1')[0], mapOptions);
    map2 = new google.maps.Map($('.map2')[0], mapOptions);

var styles = [

{
  featureType:'road',
    "stylers": [
  { "visibility": "off" }
  ]

},
{
  "elementType": "labels",
  "stylers": [
  { "visibility": "off" }
  ]
}
]
map.set('styles', styles);
map2.set('styles', styles);
      google.maps.event.addListener(map, 'bounds_changed', function() {

map2.setZoom(map.getZoom())
        map2.setCenter(map.getCenter())

});

google.maps.event.addListener(map2, 'bounds_changed', function() {

map.setZoom(map2.getZoom())
        map.setCenter(map2.getCenter())

});

// ----- Add the layer with the county information

cartodb.createLayer(map, 'https://spatial.cartodb.com/api/v2/viz/summer_combined/viz.json', {
        query: 'SELECT * FROM summer_combined', // if you remove this the query applied in the editor will be used
        infowindow: true

})
        .on('done', function(layer) {

map.overlayMapTypes.setAt(0, layer);
            sublayer = layer.getSubLayer(0);
            sublayer.setCartoCSS(cartoCSS1);

});

cartodb.createLayer(map2, 'https://spatial.cartodb.com/api/v2/viz/summer_combined/viz.json', {
        query: 'SELECT * FROM summer_combined', // if you remove this the query applied in the editor will be used
        infowindow: true

})
        .on('done', function(layer) {

map2.overlayMapTypes.setAt(0, layer);
            sublayer = layer.getSubLayer(0);
            sublayer.setCartoCSS(cartoCSS2);

});

var choropleth1 = new cdb.geo.ui.Legend({
           type: "choropleth",
           data: [
             { value: "74.79 (all hours)" },
             { value: "76.69" },
             { name: "color3", value: "#053061" },
             { name: "color3", value: "#2166AC" },
            { name: "color3", value:  "#4393C3"},
            { name: "color3", value: "#92C5DE" },
            { name: "color3", value: "#D1E5F0" },
            { name: "color3", value: "#FDDBC7"  },
            { name: "color3", value: "#F4A582"  },
             { name: "color3", value: "#D6604D"  },          
             { name: "color2", value: "#B2182B" },
             { name: "color1", value: "#67001F" }

]
         });

var choropleth2 = new cdb.geo.ui.Legend({
           type: "choropleth",
           data: [
             { value: "67.72 (3-5 am)" },
             { value: "74.12" },
             { name: "color3", value: "#053061" },
             { name: "color3", value: "#2166AC" },
            { name: "color3", value:  "#4393C3"},
            { name: "color3", value: "#92C5DE" },
            { name: "color3", value: "#D1E5F0" },
            { name: "color3", value: "#FDDBC7"  },
            { name: "color3", value: "#F4A582"  },
             { name: "color3", value: "#D6604D"  },          
             { name: "color2", value: "#B2182B" },
             { name: "color1", value: "#67001F" }

]
         });

$('.map1').append(choropleth1.render().el);
        $('.map2').append(choropleth2.render().el);

});//end document ready
 
 
</script>
 
  </head>
  <body>

<div class="topBanner">
      <div class="bannerContent"> <a href="https://www.zevross.com" target="_new"><img src="https://www.zevross.com/images/zevrosslogo_update_sm2.png" alt="ZRSA"></a>
       <h1>Temperature for All Hours and Cool Hours (Summer)</h1>
     </div>
   </div>

</html>

Modified http://html5shiv.googlecode.com/svn/trunk/html5.js to a secure url

Modified http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js to a secure url

Modified http://libs.cartocdn.com/cartodb.js/v3/cartodb.js to a secure url

https://html5shiv.googlecode.com/svn/trunk/html5.js

https://maps.googleapis.com/maps/api/js?sensor=false

https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js

https://libs.cartocdn.com/cartodb.js/v3/cartodb.js