examples/gmaps_vector.html

<!DOCTYPE html>
<html>
  <head>
    <title>GMaps vector example | CartoDB.js</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }
    </style>

  </head>
  <body>
    <div id="map"></div>

    <!-- include google maps library *before* load cartodb.js -->
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <!-- include cartodb.js library -->
    <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.core.js"></script>
    <script src="../vendor/GeoJSON.js"></script>

    <script>

      function main() {

          var map;

          // create google maps map
          var mapOptions = {
            zoom: 3,
            center: new google.maps.LatLng(43, 0),
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          map = new google.maps.Map(document.getElementById('map'),  mapOptions);

          var sql = new cartodb.SQL({ user: 'examples', format: 'geojson' });

          sql.execute("select * from european_countries_e").done(function(geojson) {
            var countriesGeometries = new GeoJSON(geojson);
            for(var i = 0; i < countriesGeometries.length; ++i) {
              var polygons = countriesGeometries[i]
              for(var p = 0; p < polygons.length; ++p) {
                polygons[p].setMap(map);
              }
            }
          });

      }

      window.onload = main;

    </script>

  </body>
</html>