Loop para mostrar resultados.

Fantass · #1 (**permalink**) 31/07/2012, 09:20

Hola, estoy haciendo una pequeña aplicacion y estoy empleando la API de Google Places.

Les muestro ya tengo todo mi codigo que recauda los 'Places' que especifiques
lo que quiero hacer es mostrarlos en texto plano por ejemplo:

'Restaurant Concha'
'Escuela Madero'
Etc.
etc.

Aqui el codigo...
http://pastebin.com/sK1Sn3zg

Muchisimas gracias!

Dradi7 · #2 (**permalink**) 31/07/2012, 09:37

Prueba con esto

Código HTML:

Ver original<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Place Search</title>
 
    <script src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <style>
      #map {
        height: 400px;
        width: 600px;
        border: 1px solid #333;
        margin-top: 0.6em;
      }
    </style>
 
    <script>
      var map;
      var infowindow;
 
      function initialize() {
        var pyrmont = new google.maps.LatLng(17.562406,-99.504623);
 
        map = new google.maps.Map(document.getElementById('map'), {
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: pyrmont,
          zoom: 15
        });
 
        var request = {
          location: pyrmont,
          radius: 500,
 
        };
        infowindow = new google.maps.InfoWindow();
        var service = new google.maps.places.PlacesService(map);
        service.search(request, callback);
      }
 
      function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
          var datos = '';
          for (var i = 0; i < results.length; i++) {
            createMarker(results[i]);
            datos += i + ' ' + results[i].name + '<br/>';
          }
          document.getElementById("text").innerHTML = datos;
        }
      }
 
      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 id="map"></div>
    <div id="text"></div>
 
  </body>
</html>

Fantass · #3 (**permalink**) 31/07/2012, 13:43

Cita:

Iniciado por Dradi7

Prueba con esto

Código HTML:

Ver original<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Place Search</title>
 
    <script src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <style>
      #map {
        height: 400px;
        width: 600px;
        border: 1px solid #333;
        margin-top: 0.6em;
      }
    </style>
 
    <script>
      var map;
      var infowindow;
 
      function initialize() {
        var pyrmont = new google.maps.LatLng(17.562406,-99.504623);
 
        map = new google.maps.Map(document.getElementById('map'), {
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: pyrmont,
          zoom: 15
        });
 
        var request = {
          location: pyrmont,
          radius: 500,
 
        };
        infowindow = new google.maps.InfoWindow();
        var service = new google.maps.places.PlacesService(map);
        service.search(request, callback);
      }
 
      function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
          var datos = '';
          for (var i = 0; i < results.length; i++) {
            createMarker(results[i]);
            datos += i + ' ' + results[i].name + '<br/>';
          }
          document.getElementById("text").innerHTML = datos;
        }
      }
 
      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 id="map"></div>
    <div id="text"></div>
 
  </body>
</html>

Perfecto!!, mucha gracias me podrias decir que hiciste para no estar preguntando cada vez que tenga que hacer lo mismo.

Saludos!

Dradi7 · #4 (**permalink**) 31/07/2012, 15:02

ves esta parte de la funcion

Código Javascript:

Ver originalfunction callback(results, status) {
   if (status == google.maps.places.PlacesServiceStatus.OK) {
     var datos = '';
     for (var i = 0; i < results.length; i++) {
       createMarker(results[i]);
       datos += i + ' ' + results[i].name + '<br/>';
     }
     document.getElementById("text").innerHTML = datos;
   }
}

tu ya tenias el objecto ya con los datos lo unico que te faltaba solo era del objeto results[i] recorrer sus propiedades y en las cuales el name era lo que tu querías ya despues de esto lo guardo en una variable que va concatenando y al final lo paso a tu HTMLElement (DIV)