D3 Examples - HTML: CartoDB with Google and custom InfoWindow

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<!-- A note: if you're not seeing the elements in the custom
  infowindow look at the cartodb dashboard and make sure they're
  turned on
-->
​
  <head>
    <title>HTML5</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=650, user-scalable=yes">
 
 
    <!--[if IE]>
    <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
 
 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false">
</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" />
​
<style>
  
  html, body {
        height: 100%;
        margin: 0;
      }
 
#map{
 
  height:100%;
}
​
</style>
 
​
   <script type="infowindow/html" id="systeminfo">
      <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-content">
             XXXX
             <!-- content.data contains the field info -->
             <h3>{{content.data.fips}}</h3>
             <h3>{{content.data.name}}</h3>
           </div>
         </div>
         <div class="cartodb-popup-tip-container"></div>
      </div>
    </script>
​
​
<script>
 
  var map;
​
​
    
  $(document).ready(function(){
​
     var mapOptions = {
        zoom: 6,
        center: new google.maps.LatLng(37.35, -120.015),
        mapTypeId: google.maps.MapTypeId.ROADMAP
        //mapTypeId: google.maps.MapTypeId.TERRAIN
    };
​
    map = new google.maps.Map($('#map')[0], mapOptions);
​
​
    // ----- Add the layer with the county information
​
​
    cartodb.createLayer(map, 'https://cehtp.cartodb.com/api/v2/viz/countyshp/viz.json', {
        query: 'SELECT * FROM {{table_name}}'// if you remove this the query applied in the editor will be used
​
    })
        .on('done', function(layer) {
​
​
            map.overlayMapTypes.setAt(0, layer);
            var sublayer = layer.getSubLayer(0);
           
​
             sublayer.infowindow.set('template', $('#systeminfo').html());
​
​
        });
​
​
 
  });//end document ready
 
​
</script>
 
  </head>
  <body>
    <div id="map">
​
    </div>
  </body>
 
 
</html>
    