SearchBox Google Maps JS API does not return search results

Question

SearchBox Google Maps JS API does not return search results

Navigation

#1 by (0 votes)

0

Good night, I have a map obtained through the Google Maps JavaScript API, and I'm doing the insertion of a searchBox. So far so good, the search box has been inserted and the autocomplete is working. The problem is that when the field is "sent", or selected somewhere by autocomplete, nothing happens on the map (it does not return the searched result) as you can see here link .

What do I have to enter into JS so that the search results are returned? If possible, without the marked points disappearing, just move the map focus to the selected place by marking it.

Thank you.

api javascript google-maps google-maps-api-3

asked by anonymous 28.03.2017 / 01:33

1 answer

Create a single .jar file with all dependencies in Netbeans Exporting an HTML / PHP page to PDF

score 0 · Accepted Answer

I managed to resolve. I replaced the excerpt

var input = document.getElementById('pac-input');
            var searchBox = new google.maps.places.SearchBox(input);
            map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

            map.addListener('bounds_changed', function() {
                searchBox.setBounds(map.getBounds());
            });

by

				   var searchBox = new google.maps.places.SearchBox(document.getElementById('pac-input'));
   map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('pac-input'));
   google.maps.event.addListener(searchBox, 'places_changed', function() {
     searchBox.set('map', null);


     var places = searchBox.getPlaces();

     var bounds = new google.maps.LatLngBounds();
     var i, place;
     for (i = 0; place = places[i]; i++) {
       (function(place) {
         var marker = new google.maps.Marker({

           position: place.geometry.location
         });
         marker.bindTo('map', searchBox, 'map');
         google.maps.event.addListener(marker, 'map_changed', function() {
           if (!this.getMap()) {
             this.unbindAll();
           }
         });
         bounds.extend(place.geometry.location);


       }(place));

     }
     map.fitBounds(bounds);
     searchBox.set('map', map);
     map.setZoom(Math.min(map.getZoom(),12));

   });