ruizfrontend/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    This code calls Google API (with my key, so you'll have to change it) and query a set of photos associated with the location from the code.
Be aware that this code may violate Google's usage policy.

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB4J7IBYD0FnBC6oV4qZikOZxdKYn-vyrI&libraries=places"></script>
  <title>Get photo from google Maps for a location</title>
  <script src="https://code.jquery.com/jquery-1.12.2.js" integrity="sha256-VUCyr0ZXB5VhBibo2DkTVhdspjmxUgxDGaLQx7qb7xY=" crossorigin="anonymous"></script>

  <script>
$(function(){
   var center = new google.maps.LatLng(-0.1806532,-78.4678382);

  map = new google.maps.Map(document.getElementById('map'), {
    center: center,
    zoom: 15
  });

  service = new google.maps.places.PlacesService(map);

  var request = {
    location: center,
    radius: '10000',
    rankby: google.maps.places.RankBy.PROMINENCE
  };

  service.nearbySearch(request, function(results, status) {

    if (status == google.maps.places.PlacesServiceStatus.OK) {
      for (var i = results.length - 1; i >= 0; i--) {
        if(results[i]['photos'] && results[i]['photos']) {
          for (var j = results[i]['photos'].length - 1; j >= 0; j--) {
            $('#fotos').append('<img src="' + results[i]['photos'][j].getUrl({'maxWidth': 2000, 'maxHeight': 2000}) + '">' + results[i]['photos'][j]['html_attributions'][0])
            console.log(results[i]['photos'][j])
            console.log();
          };
        }
        results[i]
      };
    }

  });
})
  </script>
</head>
<body>
  <div id="map" style=" width: 300px; height: 300px;"></div>
  <div id="fotos"></div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB4J7IBYD0FnBC6oV4qZikOZxdKYn-vyrI&libraries=places"></script>
	<title>Get photo from google Maps for a location</title>
	<script src="https://code.jquery.com/jquery-1.12.2.js" integrity="sha256-VUCyr0ZXB5VhBibo2DkTVhdspjmxUgxDGaLQx7qb7xY=" crossorigin="anonymous"></script>

	<script>
	$(function(){
	var center = new google.maps.LatLng(-0.1806532,-78.4678382);

	map = new google.maps.Map(document.getElementById('map'), {
	center: center,
	zoom: 15
	});

	service = new google.maps.places.PlacesService(map);

	var request = {
	location: center,
	radius: '10000',
	rankby: google.maps.places.RankBy.PROMINENCE
	};

	service.nearbySearch(request, function(results, status) {

	if (status == google.maps.places.PlacesServiceStatus.OK) {
	for (var i = results.length - 1; i >= 0; i--) {
	if(results[i]['photos'] && results[i]['photos']) {
	for (var j = results[i]['photos'].length - 1; j >= 0; j--) {
	$('#fotos').append('<img src="' + results[i]['photos'][j].getUrl({'maxWidth': 2000, 'maxHeight': 2000}) + '">' + results[i]['photos'][j]['html_attributions'][0])
	console.log(results[i]['photos'][j])
	console.log();
	};
	}
	results[i]
	};
	}

	});
	})
	</script>
	</head>
	<body>
	<div id="map" style=" width: 300px; height: 300px;"></div>
	<div id="fotos"></div>
	</body>
	</html>