How to search address only through google maps?

Asked

Viewed 528 times

0

Here is an example in javascript:

    function initAutocomplete() {
      var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -33.8688, lng: 151.2195},
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      // Create the search box and link it to the UI element.
      var input = document.getElementById('pac-input');
      var searchBox = new google.maps.places.SearchBox(input);
      map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

      // Bias the SearchBox results towards current map's viewport.
      map.addListener('bounds_changed', function() {
        searchBox.setBounds(map.getBounds());
      });

      var markers = [];
      // Listen for the event fired when the user selects a prediction and retrieve
      // more details for that place.
      searchBox.addListener('places_changed', function() {
        var places = searchBox.getPlaces();

        if (places.length == 0) {
          return;
        }

        // Clear out the old markers.
        markers.forEach(function(marker) {
          marker.setMap(null);
        });
        markers = [];

        // For each place, get the icon, name and location.
        var bounds = new google.maps.LatLngBounds();
        places.forEach(function(place) {
          var icon = {
            url: place.icon,
            size: new google.maps.Size(71, 71),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(17, 34),
            scaledSize: new google.maps.Size(25, 25)
          };

          // Create a marker for each place.
          markers.push(new google.maps.Marker({
            map: map,
            icon: icon,
            title: place.name,
            position: place.geometry.location
          }));

          if (place.geometry.viewport) {
            // Only geocodes have viewport.
            bounds.union(place.geometry.viewport);
          } else {
            bounds.extend(place.geometry.location);
          }
        });
        map.fitBounds(bounds);
      }

);
}

Here is an example in html:

<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map"></div>

This code above it searches in everything. How do I make it search only address ?

1 answer

1


Use the option types with an Autocomplete object

In your code:

var searchBox = new google.maps.places.SearchBox(input);

Change the object to Autocomplete and add the option types, for example:

var searchBox = new google.maps.places.Autocomplete(input, {types: ['address']});

You may have to make other adaptations. See the example on that page who uses the Autocomplete to know if it will be necessary.

On this page you find the specification of the filters you can use with the Autocomplete.

  • On the line: searchBox.addListener('places_changed', function () { does not work, already put Debugger, and nothing. And no error appears in console log.

  • The link with the example I left is an example from Google itself. Try to run it completely from scratch to identify where your JS is in trouble.

  • Solved here. Thank you

Browser other questions tagged

You are not signed in. Login or sign up in order to post.