CartoDB

Source code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing" type="text/javascript"></script>

<script type="text/javascript">

  $(function() {

    var 
    user  = "examples",
    table = "john_snow_pumps",
    zoom  = 17,
    lat   = 51.513,
    lng   = -0.138,
    sql   = "SELECT the_geom_webmercator, 1 as deaths, 'pump' as markertype FROM john_snow_pumps " +
            "UNION SELECT the_geom_webmercator, count as deaths, 'death' as markertype FROM john_snow_cholera_deaths";

    // Define the basic map options
    var cartodbMapOptions = {
      zoom: zoom,
      center: new google.maps.LatLng( lat, lng ),
      disableDefaultUI: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    // Init the map
    var map = new google.maps.Map(document.getElementById("map"),cartodbMapOptions);

    // Define the map style
    var mapStyle = [{
      stylers: [{ saturation: -65 }, { gamma: 1.52 }] }, {
      featureType: "administrative", stylers: [{ saturation: -95 }, { gamma: 2.26 }] }, {
      featureType: "water", elementType: "labels", stylers: [{ visibility: "off" }] }, {
      featureType: "administrative.locality", stylers: [{ visibility: 'off' }] }, {
      featureType: "road", stylers: [{ visibility: "simplified" }, { saturation: -99 }, { gamma: 2.22 }] }, {
      featureType: "poi", elementType: "labels", stylers: [{ visibility: "off" }] }, {
      featureType: "road.arterial", stylers: [{ visibility: 'off' }] }, {
      featureType: "road.local", elementType: "labels", stylers: [{ visibility: 'off' }] }, {
      featureType: "transit", stylers: [{ visibility: 'off' }] }, {
      featureType: "road", elementType: "labels", stylers: [{ visibility: 'off' }] }, {
      featureType: "poi", stylers: [{ saturation: -55 }]
    }];

    map.setOptions({ styles: mapStyle });

    // Define the tile styles
    var style = "%23john_snow_pumps{ [markertype='pump']{marker-fill:%23E2DADA; marker-opacity:1; marker-width:8; marker-line-color:black; marker-line-width:3; marker-line-opacity:0.9; marker-placement:point; marker-type:ellipse; marker-allow-overlap:true;} [markertype='death']{marker-fill:%23FF0000; marker-opacity:1; marker-width:2; marker-line-width:0; marker-placement:point; marker-type:ellipse; marker-allow-overlap:true; [deaths=15]{ marker-width: 11;}  [deaths=8]{ marker-width: 8;}  [deaths=7]{ marker-width: 7;}  [deaths=5]{ marker-width: 6;}  [deaths=4]{ marker-width: 5;}  [deaths=3]{ marker-width: 4;}  [deaths=2]{ marker-width: 3;}  [deaths=1]{ marker-width: 2;}  [deaths=0]{ marker-width: 2; marker-fill:%230000FF;}}}";

    // Define the CartoDB layer
    var cartoDBLayer = {
      getTileUrl: function(coord, zoom) {
        return "https://"+user+".cartodb.com/tiles/"+table+"/"+zoom+"/"+coord.x+"/"+coord.y+".png?sql="+sql+"&style="+style;
      },
      tileSize: new google.maps.Size(256, 256)
    };

    // Add the layer
    map.overlayMapTypes.insertAt(0, new google.maps.ImageMapType(cartoDBLayer));

  });

</script>

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