CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Anil Samal
Anil Samal

Reputation: 1053

Google map search box

I am trying to search places using search box in google map api .I am using Google Map Javascript api v3 .When I try to search some place it is not happning .Can anyone help me what could be the issue.Here is the html and javascript code snippet.

<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <link href="css/bootstrap.min.css" rel="stylesheet" />

    <link href="css/bootstrap.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
  </head>
  <body>
    <div class="col-md-8">
      <input
        id="pac-input"
        class="controls"
        type="text"
        placeholder="Search Box"
      />
      <div class="container" id="map-canvas"></div>
    </div>

    <script>
      var map = new google.maps.Map(document.getElementById("map-canvas"), {
        center: {
          lat: 12.9715987,
          lng: 77.59456269999998,
        },
        zoom: 12,
      });

      var marker = new google.maps.Marker({
        position: {
          lat: 12.9715987,
          lng: 77.59456269999998,
        },
        map: map,
        draggable: true,
      });

      var searchBox = new google.maps.places.SearchBox(
        document.getElementById("pac-input")
      );

      google.maps.event.addListener(searchBox, "place_changed", function () {
        var places = searchBox.getPlaces();
        var bounds = new google.maps.LatLngBounds();
        var i, place;
        for (i = 0; (palce = places[i]); i++) {
          bounds.extend(place.geometry.location);
          marker.setPosition(place.geometry.location);
        }
        map.fitBounds(bounds);
        map.setZoom(12);
      });
    </script>
    <script src="js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/Test.js"></script>
  </body>
</html>

Upvotes: 14

Views: 81106

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117314

  1. there is no place_changed-event for a SearchBox (it's an event of Autocomplete). The event for a Searchbox is called places_changed

  2. there is a typo palce

    for( i = 0; palce = places[i]; i++)

  3. It's not clear what you are trying to achieve, you iterate over the places(there may be multiple places) and set the position of a single Marker to the location of the current place. The result will be that the Marker is always placed at the location of the last place of the returned results(makes no sense to me). When you want to have multiple Markers you must create separate Markers for each place(and additionally remove previously added markers ), when you want a single Marker use the Autocomplete instead. 

 function init() {
   var map = new google.maps.Map(document.getElementById('map-canvas'), {
     center: {
       lat: 12.9715987,
       lng: 77.59456269999998
     },
     zoom: 12
   });


   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));

   });
 }
 google.maps.event.addDomListener(window, 'load', init);
html,
body,
#map-canvas {
  margin: 0;
  padding: 0;
  height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div class="container" id="map-canvas" style="height:300px;"></div>

Upvotes: 11

Related Questions