zross/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>HTML5</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=650, user-scalable=yes">


    <!--[if IE]>
    <script src="http://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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />

<style>

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

#map{

  height:100%;
}

</style>

<script>

  var map;

  var countycartoCSS ="#countyshp{ \
  polygon-fill: blue; \
  polygon-opacity: 0.5; \
  line-width: 1.5; \
  line-color: #FFFFFF; \
  line-opacity: 0.5; \
} \
#countyshp::labels[zoom>=8] { \
  text-name: [name] + ' County'; \
  text-face-name: 'DejaVu Sans Bold'; \
  text-size: 12; \
  text-fill: #FFFFFF; \
  text-allow-overlap: true; \
  text-halo-fill:rgba(80,80,80,0.6); \
  text-halo-radius: 2; \
  text-dy: 0; \
}"

  $(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, 'http://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
        infowindow: false

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


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


        });


  });//end document ready


</script>

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


</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>HTML5</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=650, user-scalable=yes">


	<!--[if IE]>
	<script src="http://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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
	<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
	<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />

	<style>

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

	#map{

	height:100%;
	}

	</style>

	<script>

	var map;

	var countycartoCSS ="#countyshp{ \
	polygon-fill: blue; \
	polygon-opacity: 0.5; \
	line-width: 1.5; \
	line-color: #FFFFFF; \
	line-opacity: 0.5; \
	} \
	#countyshp::labels[zoom>=8] { \
	text-name: [name] + ' County'; \
	text-face-name: 'DejaVu Sans Bold'; \
	text-size: 12; \
	text-fill: #FFFFFF; \
	text-allow-overlap: true; \
	text-halo-fill:rgba(80,80,80,0.6); \
	text-halo-radius: 2; \
	text-dy: 0; \
	}"

	$(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, 'http://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
	infowindow: false

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


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



	});



	});//end document ready


	</script>

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


	</html>