0

I'm using google map which has a search field and as user types in that search field the location changes in the map, but also want if user Copy paste location in the search field then also the location should change, but right now it is not changing on the copy paste event.

function centerLocation() {
  var zoom = 6;
  var position = {
    coords: {
      latitude: 77.040,
      longitude: 2.908
    }
  };
  var map = new google.maps.Map(document.getElementById('map'), {});
  // 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());
  });
  searchBox.addListener('places_changed', function() {
    var places = searchBox.getPlaces();
    if (places.length == 0) {
      return;
    }
    console.log(places);
    if (places.length == 1) {
      var place = places[0];
      if (place.geometry.viewport) {
        // Only geocodes have viewport.
        map.fitBounds(place.geometry.viewport);
      } else {
        map.setCenter(place.geometry.location);
      }
    } else {
      // For each place, get the icon, name and location.
      var bounds = new google.maps.LatLngBounds();
      places.forEach(function(place) {
        if (!place.geometry) {
          console.log("Returned place contains no geometry");
          return;
        }
        if (place.geometry.viewport) {
          // Only geocodes have viewport.
          bounds.union(place.geometry.viewport);
        } else {
          bounds.extend(place.geometry.location);
        }
        map.fitBounds(bounds);
      });
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);
function initialize() {
  centerLocation();
}
html,
body,
#map-container2,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&"></script>
<div id="map-container2" class="">
  <input id="pac-input" class="controls" type="text" placeholder="Ville - Recherche">
  <div id="map"></div>
</div>
user3653474
  • 3,393
  • 6
  • 49
  • 135
  • Your example works for me. If I type in "lon" then choose "london" the map changes to London. If I type "london" then choose enter the map changes to London. If I copy-paste in "london" and click enter the map changes to London. The map does not change while I am typing anything, only once I choose a prediction. – ecg8 Jul 21 '20 at 16:49
  • @ecg8: But it is not working if i copy paste london in the search field without pressing enter. – user3653474 Jul 22 '20 at 05:31
  • Right. Why would you expect it to? The map won't change until you choose a prediction. places_changed only fires off when you choose. – ecg8 Jul 22 '20 at 15:02

0 Answers0