Saiyan1/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body {
        font-family: Tahoma, Verdana, Arial;
        height: 100%;
        margin: 0;
        padding: 0;
        background-color: #eee;
      }
      #map-canvas {
        height: 60%;
        margin: 50px;
      }
      #texto {
        font-size: 16px;
        margin: 50px;
        background-color: #fff;
      }
      i {
        font-style: italic;
        color: #817676;
      }
    </style>


    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAFlQYe1HuZ5PcY6QPKi1uj1EqCBWUgCB0&sensor=true">
    </script>

    <!--
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAFlQYe1HuZ5PcY6QPKi1uj1EqCBWUgCB0&sensor=true&&libraries=weather">
    </script>
    -->
    <!--
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAFlQYe1HuZ5PcY6QPKi1uj1EqCBWUgCB0&sensor=true&libraries=panoramio">
    </script>
    -->
    <!--
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAFlQYe1HuZ5PcY6QPKi1uj1EqCBWUgCB0&sensor=true&libraries=places">
    </script>
    -->
    <script>
      var map;
      var marker;
      var infowindow;

      function initialize() {
        var mapOptions = {
          zoom: 6,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);

        // Try HTML5 geolocation
        if(navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var pos = new google.maps.LatLng(position.coords.latitude,
                                             position.coords.longitude);

//  INFOWINDOW

            var infowindow = new google.maps.InfoWindow({
              map: map,
              position: pos,
              content: 'Location encontrada con HTML5.'
            });


// MARKER
/*
            var marker = new google.maps.Marker({
                position: pos,
                map: map
            });
*/

//MARKER SALTARIN + DRAG

/*
            marker = new google.maps.Marker({
                position: pos,
                map: map,
                draggable:true,
                //icon: 'img/Pin_Red.png',
                animation: google.maps.Animation.DROP
            });
            google.maps.event.addListener(marker, 'click', toggleBounce);
*/

//WEATHER ( + LIBS! )
/*
            var weatherLayer = new google.maps.weather.WeatherLayer({
              temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS
            });
            weatherLayer.setMap(map);
*/

//PANORAMIO ( + LIBS! )
/*
            var panoramioLayer = new google.maps.panoramio.PanoramioLayer();
            panoramioLayer.setMap(map);
*/

//REQUEST   ( +LIBS ! )
/*
            var request = {
              location: pos,
              radius: 500,
              types: ['store']
              //keyword: 'pancho'
            };

            infowindow = new google.maps.InfoWindow();
            var service = new google.maps.places.PlacesService(map);
            service.nearbySearch(request, callbackReqSearch01);
*/
            map.setCenter(pos);
          }, function() {
            handleNoGeolocation(true);
          });
        } else {
          // Browser doesn't support Geolocation
          handleNoGeolocation(false);
        }
      }

      function handleNoGeolocation(errorFlag) {
        if (errorFlag) {
          var content = 'Error: El servicio de Geolocation ha fallado.';
        } else {
          var content = 'Error: Tu browser no soporta geolocation. (Lo abriste con IE???!!! Noooooo)';
        }

        var options = {
          map: map,
          position: new google.maps.LatLng(60, 105),
          content: content
        };

        var infowindow = new google.maps.InfoWindow(options);
        map.setCenter(options.position);
      }


      function toggleBounce() {
        if (marker.getAnimation() != null) {
          marker.setAnimation(null);
        } else {
          marker.setAnimation(google.maps.Animation.BOUNCE);
        }
      }

      function callbackReqSearch01(results, status) {
        console.log(results);
        var locales ="";
        if (status == google.maps.places.PlacesServiceStatus.OK) {
          for (var i = 0; i < results.length; i++) {
            createMarker(results[i]);
            //locales += results[i].name + "<br>";
            locales += results[i].name + "<i> - (" + results[i].vicinity + ") </i><br>";
          }
          document.getElementById("texto").innerHTML=locales;
        }
      }

      function createMarker(place) {
        var placeLoc = place.geometry.location;
        var marker = new google.maps.Marker({
          map: map,
          position: place.geometry.location
        });

        google.maps.event.addListener(marker, 'click', function() {
          infowindow.setContent(place.name);
          infowindow.open(map, this);
        });
      }

      google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div align="center">
      <h3>Codelab GMaps - GDG Corrientes</h3>
      <h5>Google I/O Extended - 2013</h5>
    </div>
    <div id="map-canvas"></div>
    <div id="texto"></div>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	html { height: 100% }
	body {
	font-family: Tahoma, Verdana, Arial;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #eee;
	}
	#map-canvas {
	height: 60%;
	margin: 50px;
	}
	#texto {
	font-size: 16px;
	margin: 50px;
	background-color: #fff;
	}
	i {
	font-style: italic;
	color: #817676;
	}
	</style>


	<script type="text/javascript"
	src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAFlQYe1HuZ5PcY6QPKi1uj1EqCBWUgCB0&sensor=true">
	</script>

	<!--
	<script type="text/javascript"
	src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAFlQYe1HuZ5PcY6QPKi1uj1EqCBWUgCB0&sensor=true&&libraries=weather">
	</script>
	-->
	<!--
	<script type="text/javascript"
	src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAFlQYe1HuZ5PcY6QPKi1uj1EqCBWUgCB0&sensor=true&libraries=panoramio">
	</script>
	-->
	<!--
	<script type="text/javascript"
	src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAFlQYe1HuZ5PcY6QPKi1uj1EqCBWUgCB0&sensor=true&libraries=places">
	</script>
	-->
	<script>
	var map;
	var marker;
	var infowindow;

	function initialize() {
	var mapOptions = {
	zoom: 6,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	map = new google.maps.Map(document.getElementById('map-canvas'),
	mapOptions);

	// Try HTML5 geolocation
	if(navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(function(position) {
	var pos = new google.maps.LatLng(position.coords.latitude,
	position.coords.longitude);

	// INFOWINDOW

	var infowindow = new google.maps.InfoWindow({
	map: map,
	position: pos,
	content: 'Location encontrada con HTML5.'
	});


	// MARKER
	/*
	var marker = new google.maps.Marker({
	position: pos,
	map: map
	});
	*/

	//MARKER SALTARIN + DRAG

	/*
	marker = new google.maps.Marker({
	position: pos,
	map: map,
	draggable:true,
	//icon: 'img/Pin_Red.png',
	animation: google.maps.Animation.DROP
	});
	google.maps.event.addListener(marker, 'click', toggleBounce);
	*/

	//WEATHER ( + LIBS! )
	/*
	var weatherLayer = new google.maps.weather.WeatherLayer({
	temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS
	});
	weatherLayer.setMap(map);
	*/

	//PANORAMIO ( + LIBS! )
	/*
	var panoramioLayer = new google.maps.panoramio.PanoramioLayer();
	panoramioLayer.setMap(map);
	*/

	//REQUEST ( +LIBS ! )
	/*
	var request = {
	location: pos,
	radius: 500,
	types: ['store']
	//keyword: 'pancho'
	};

	infowindow = new google.maps.InfoWindow();
	var service = new google.maps.places.PlacesService(map);
	service.nearbySearch(request, callbackReqSearch01);
	*/
	map.setCenter(pos);
	}, function() {
	handleNoGeolocation(true);
	});
	} else {
	// Browser doesn't support Geolocation
	handleNoGeolocation(false);
	}
	}

	function handleNoGeolocation(errorFlag) {
	if (errorFlag) {
	var content = 'Error: El servicio de Geolocation ha fallado.';
	} else {
	var content = 'Error: Tu browser no soporta geolocation. (Lo abriste con IE???!!! Noooooo)';
	}

	var options = {
	map: map,
	position: new google.maps.LatLng(60, 105),
	content: content
	};

	var infowindow = new google.maps.InfoWindow(options);
	map.setCenter(options.position);
	}


	function toggleBounce() {
	if (marker.getAnimation() != null) {
	marker.setAnimation(null);
	} else {
	marker.setAnimation(google.maps.Animation.BOUNCE);
	}
	}

	function callbackReqSearch01(results, status) {
	console.log(results);
	var locales ="";
	if (status == google.maps.places.PlacesServiceStatus.OK) {
	for (var i = 0; i < results.length; i++) {
	createMarker(results[i]);
	//locales += results[i].name + "<br>";
	locales += results[i].name + "<i> - (" + results[i].vicinity + ") </i><br>";
	}
	document.getElementById("texto").innerHTML=locales;
	}
	}

	function createMarker(place) {
	var placeLoc = place.geometry.location;
	var marker = new google.maps.Marker({
	map: map,
	position: place.geometry.location
	});

	google.maps.event.addListener(marker, 'click', function() {
	infowindow.setContent(place.name);
	infowindow.open(map, this);
	});
	}

	google.maps.event.addDomListener(window, 'load', initialize);

	</script>
	</head>
	<body>
	<div align="center">
	<h3>Codelab GMaps - GDG Corrientes</h3>
	<h5>Google I/O Extended - 2013</h5>
	</div>
	<div id="map-canvas"></div>
	<div id="texto"></div>
	</body>
	</html>