[SOLUCIONADO] google map v3 busqueda por texto

churretin · #1 (**permalink**) 29/01/2013, 17:28

Hola, estoy intentando con la api v3 de google map mostrar por ejemplo todas las tiendas de muebles de españa, creo que tengo el codigo pero me tira el siguiente error:

Código:

TypeError: google.maps.places is undefined

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

este mi codigo, habe si ven algo estraño, muchas gracias de antemano:

Código Javascript:

Ver original<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB------xLQJ----cs&sensor=false">
    </script>
    <script type="text/javascript">
   var map;
var service;
var infowindow;
 
 
function initialize() {
  var pyrmont = new google.maps.LatLng(39.300299,-3.825073);
 
  map = new google.maps.Map(document.getElementById('map'), {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: pyrmont,
      zoom: 6
    });
 
  var request = {
    location: pyrmont,
    query: 'tienda muebles'
  };
 
  var service = new google.maps.places.PlacesService(map);
  service.textSearch(request, callback);
}
 
function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      var place = results[i];
      createMarker(results[i]);
    }
  }
}
    </script>
  </head>
  <body onload="initialize()">
    <div id="map" style="width:650px; height:650px"></div>
  </body>
</html>

ipraetoriux · #2 (**permalink**) 29/01/2013, 17:40

...pues te sale esto por que no has cargado la librería, debes hacerlo con "libraries=places" , ahi ya te corre sin problema

Código HTML:

Ver original<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=true_or_false"></script>

churretin · #3 (**permalink**) 29/01/2013, 18:34

hola, gracias por responder, mira ahora me lanza el siguiente error:

Código:

ReferenceError: createMarker is not defined	

createMarker(results[i]);

y sigue sin aparecer ningun punto marcado en el mapa

ipraetoriux · #4 (**permalink**) 29/01/2013, 20:28

Claro mi amigo, acá tienes el código incompleto...

1ero. El metodo TextSearch del objeto PlacesService esta incompleto, debes incluir un radius, es decir en que radio buscará, sino Google Maps interpreta este valor como undefined, y al ser un NaN como resultado del radio no efectua la busqueda.

2do. No te ha creado las marcas porque no tienes creada la funciona createMarker();

3er. Tampoco tienes creado el objeto InfoWindow();

Aca te lo paso corregido, he puesto un radio de 500, lo he probado funciona perfecto, si tienes otra duda me dices

Código Javascript:

Ver originalvar map;
    var service;
    var infowindow;
 
 
    function initialize() {
        var pyrmont = new google.maps.LatLng(39.300299,-3.825073);
 
        map = new google.maps.Map(document.getElementById('map'), {
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: pyrmont,
            zoom: 6
        });
 
        var request = {
            location: pyrmont,
            radius: '500',
            query: 'tienda muebles'
        };
 
        infowindow = new google.maps.InfoWindow();
        var service = new google.maps.places.PlacesService(map);
        service.textSearch(request, function(results, status) {
            if (status == google.maps.places.PlacesServiceStatus.OK) {
                for (var i = 0; i < results.length; i++) {                  
                    createMarker(results[i]);
                }
            }
        });
    }
 
    function createMarker(placeMarker) {
        var marker = new google.maps.Marker({
            map: map,
            position: placeMarker.geometry.location
        });
 
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(placeMarker.name);
            infowindow.open(map, this);
        });
    }

churretin · #5 (**permalink**) 30/01/2013, 05:13

gracias por tu paciencia, ahora me encuentro con un warning jijijiji poco a poco, al parece carga el mapa varias veces y crea coinflicto, estube mirando en san google pero no encontre nada al respecto que me fuera util

Código:

Warning: you have included the Google Maps API multiple times on this page. This may cause unexpected errors.

te dejo mi codigo tal cual lo tengo

Código:

<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
   <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=true"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBb2----------------------------------------Npcs&sensor=true"></script>
    <script type="text/javascript">
    var map;
        var service;
        var infowindow;
     
     
        function initialize() {
            var pyrmont = new google.maps.LatLng(39.300299,-3.825073);
     
            map = new google.maps.Map(document.getElementById('map'), {
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: pyrmont,
                zoom: 6
            });
     
            var request = {
                location: pyrmont,
                radius: '5000',
                query: 'tienda muebles'
            };
     
            infowindow = new google.maps.InfoWindow();
            var service = new google.maps.places.PlacesService(map);
            service.textSearch(request, function(results, status) {
                if (status == google.maps.places.PlacesServiceStatus.OK) {
                    for (var i = 0; i < results.length; i++) {                 
                        createMarker(results[i]);
                    }
                }
            });
        }
     
        function createMarker(placeMarker) {
            var marker = new google.maps.Marker({
                map: map,
                position: placeMarker.geometry.location
            });
     
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent(placeMarker.name);
                infowindow.open(map, this);
            });
        }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map" style="width:650px; height:650px"></div>
  </body>
</html>

ipraetoriux · #6 (**permalink**) 30/01/2013, 06:18

Es que mi estimado, estas poniendo dos veces el script para cargar al google maps, lo que tienes que hacer es usar la etiqueta con tu key y agregar a la url la libreria a cargar

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBb2----------------------------------------Npcs&libraries=places&sensor=true"></script>