D3 Examples - cartodb infowindow trouble

xxxxxxxxxx
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="">
​
<head>
<style>
    
    #map1{
​
    height: 400px;  
    width: 400px;
    position:relative;
}
​
    #map2{
​
    height: 400px;  
    width: 400px;
    position:relative;
}
</style>
    <title>Title Page</title>
    <meta charset="UTF-8">
    <meta name=description content="">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
​
    <!-- JS -->
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
​
    <!--API loader-->
    <script type="text/javascript" src="https://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
​
​
​
<!--     <link rel="stylesheet" type="text/css" href="css/cehtp_resources.css" /> -->
    <link rel="stylesheet" type="text/css" href="https://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
​
​
​
​
<!-- infowindow template -->
    <script type="infowindow/html" id="infowindow_template">
  <div class="cartodb-popup">
    <a href="#close" class="cartodb-popup-close-button close">x</a>
     <div class="cartodb-popup-content-wrapper">
       <div class="cartodb-popup-header">
       </div>
       <div class="cartodb-popup-content">
         <!-- content.data contains the field info -->
         <h4>Water System Name: </h4>
         <p>{{content.data.pwsname}}</p>
         <h4>Year: </h4>
         <p>{{content.data.yearassociatedto}}</p>
       </div>
     </div>
     <div class="cartodb-popup-tip-container"></div>
  </div>
</script>
​
</head>
​
<body>
​
<div id="map1"></div>
<hr />
 <div id="map2"></div>   
​
​
</body>
<script>
    
var map;
​
$(document).ready(function() {
​
var q2 = "SELECT cartodb_id, the_geom, latitude, pwsname, principalcountyservedfips, principalcityfeatureid, totalconnections, systempopulation, primarysourcecode, yearassociatedto, longitude, locationderivationcode, system_no, pwsidnumber, yearpulled, the_geom_webmercator FROM inventory"
var queryMinusOne = "SELECT cartodb_id, the_geom, latitude, pwsname,  principalcityfeatureid, totalconnections, systempopulation, primarysourcecode, yearassociatedto, longitude, locationderivationcode, system_no, pwsidnumber, yearpulled, the_geom_webmercator FROM inventory"
​
​
    addGoogleMap('#map1', q2);
    addGoogleMap('#map2', queryMinusOne);
    
​
​
});
​
function addGoogleMap(whichdiv, q) {
​
​
    var mapOptions = {
        zoom: 6,
        center: new google.maps.LatLng(37.35, -120.015),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
​
    map = new google.maps.Map($(whichdiv)[0], mapOptions);
​
​
    geocoder = new google.maps.Geocoder();
​
 
    //*********************************************************************
    // Add the layer showing the inventory
    //*********************************************************************        
    var sublayers = [];
    cartodb.createLayer(map, 'https://cehtp.cartodb.com/api/v2/viz/inventory/viz.json')
        .addTo(map)
        .on('done', function(layer) {
​
            var subLayerOptions = {
                sql: q
            }
             var sublayer = layer.getSubLayer(0);
             sublayer.set(subLayerOptions);
             sublayers.push(sublayer);
​
            sublayer.infowindow.set('template', $('#infowindow_template').html());
​
​
            layer.on('error', function(err) {
                cartodb.log.log('error: ' + err);
            });
​
​
​
        })
        .on('error', function() {
            cartodb.log.log("some error occurred");
        });
​
}
​
</script>
​
</html>
    