jsanz/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <title>Mapas</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
  <style>
    html {
      height: 100%;
    }

    body {
      height: 100%; margin: 0; padding: 0;
    }

    #map_canvas {
      position: absolute;
      height: 100%;
      width: 100%;
    }

    #ejemplo_menu {
      position: absolute;
      padding: 60px;
      background-color: rgba(255, 255, 255, 0.65);
      border-radius: 10px;
      margin: 50px;
      z-index: 2;
    }
 </style>
</head>
<body>
  <div id="map_canvas"></div>
  <div id="ejemplo_menu">
    <input type="radio" name="menu" onclick="loadLayerCartoDB(this,'https://team.cartodb.com/u/jsanz/api/v2/viz/15e43c24-1982-11e5-9c32-0e4fddd5de28/viz.json');" value="1"> World places<br>
    <input type="radio" name="menu" onclick="loadLayerCartoDB(this,'https://team.cartodb.com/u/jsanz/api/v2/viz/aed13a86-03a2-11e5-aed1-0e0c41326911/viz.json');" value="2"> France departments<br>
    <input type="radio" name="menu" onclick="loadLayerCartoDB(this,'URL_ERROR');" value="3"> Error layer
  </div>
  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?signed_in=true&sensor=true"></script>
  <script type="text/javascript" src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
  <script>

    var map;
    var pyrmont;
    var prevInput;

    $(document).ready(function() {

      //Map Center
      pyrmont = new google.maps.LatLng(0,0);

      // Map Creation
      var mapOptions = {
        zoom : 3,
        center : pyrmont,
        mapTypeId : google.maps.MapTypeId.ROADMAP,
        scaleControl : true,
        zoomControl : true,
        panControl: false
      };

      map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    });

    // Function to load CartoDB layers checking the vizjson existence
    function loadLayerCartoDB(el,urlVis) {
        var success = false;
        var element = el;
        $.ajax({
          url      :  urlVis + '?callback=viz',
          dataType : 'jsonp',
          success  : function(){
            prevInput = element;
            success = true;
            cartodb.createLayer(map, urlVis)
            .addTo(map)
            .on('done', function(layer) {
               visLayer = layer;
               layer.on('error', function(err) {
                      console.log(err);
                    });
            })
            .on('error', function(err) {
              console.log("some error occurred: " + err);
            });
          }
        });

        // Set a 3-second (or however long you want) timeout to check for errors
        setTimeout(function(element) {
            if (!success)
            {
                alert("Error loading this layer, please select another.");
                $(element).prop('disabled', true);
                $(prevInput).click();
            }
        }, 3000, element);
      }
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Mapas</title>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
	<style>
	html {
	height: 100%;
	}

	body {
	height: 100%; margin: 0; padding: 0;
	}

	#map_canvas {
	position: absolute;
	height: 100%;
	width: 100%;
	}

	#ejemplo_menu {
	position: absolute;
	padding: 60px;
	background-color: rgba(255, 255, 255, 0.65);
	border-radius: 10px;
	margin: 50px;
	z-index: 2;
	}
	</style>
	</head>
	<body>
	<div id="map_canvas"></div>
	<div id="ejemplo_menu">
	<input type="radio" name="menu" onclick="loadLayerCartoDB(this,'https://team.cartodb.com/u/jsanz/api/v2/viz/15e43c24-1982-11e5-9c32-0e4fddd5de28/viz.json');" value="1"> World places<br>
	<input type="radio" name="menu" onclick="loadLayerCartoDB(this,'https://team.cartodb.com/u/jsanz/api/v2/viz/aed13a86-03a2-11e5-aed1-0e0c41326911/viz.json');" value="2"> France departments<br>
	<input type="radio" name="menu" onclick="loadLayerCartoDB(this,'URL_ERROR');" value="3"> Error layer
	</div>
	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?signed_in=true&sensor=true"></script>
	<script type="text/javascript" src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
	<script>

	var map;
	var pyrmont;
	var prevInput;

	$(document).ready(function() {

	//Map Center
	pyrmont = new google.maps.LatLng(0,0);

	// Map Creation
	var mapOptions = {
	zoom : 3,
	center : pyrmont,
	mapTypeId : google.maps.MapTypeId.ROADMAP,
	scaleControl : true,
	zoomControl : true,
	panControl: false
	};

	map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
	});

	// Function to load CartoDB layers checking the vizjson existence
	function loadLayerCartoDB(el,urlVis) {
	var success = false;
	var element = el;
	$.ajax({
	url : urlVis + '?callback=viz',
	dataType : 'jsonp',
	success : function(){
	prevInput = element;
	success = true;
	cartodb.createLayer(map, urlVis)
	.addTo(map)
	.on('done', function(layer) {
	visLayer = layer;
	layer.on('error', function(err) {
	console.log(err);
	});
	})
	.on('error', function(err) {
	console.log("some error occurred: " + err);
	});
	}
	});

	// Set a 3-second (or however long you want) timeout to check for errors
	setTimeout(function(element) {
	if (!success)
	{
	alert("Error loading this layer, please select another.");
	$(element).prop('disabled', true);
	$(prevInput).click();
	}
	}, 3000, element);
	}
	</script>
	</body>
	</html>