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 = "mexico_pa",
    zoom  = 6,
    lat   = 20.724, 
    lng   = -103.996,
    sql   = "SELECT * FROM mexico_pa " +
            "LEFT OUTER JOIN " +
            " ( SELECT mexico_pa.cartodb_id, 1 AS contains " +
            "   FROM mexico_pa, monarch " +
            "   WHERE ST_Intersects(monarch.the_geom, mexico_pa.the_geom) " +
            " ) c ON mexico_pa.cartodb_id = c.cartodb_id";

    // Define the map options
    var mapOptions = {
      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"), mapOptions);

    // Define the map style
    var map_style = [{
      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: map_style });

    // 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;
      },
      tileSize: new google.maps.Size(256, 256)
    };

    map.overlayMapTypes.insertAt(0, new google.maps.ImageMapType(cartoDBLayer));

  });

</script>

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