Geek Answers Handbook

Google Map Search Box

I am trying to search for places using the search box in google map api. I am using Google Map Javascript api v3. When I try to find some place, it is not. Can someone help me what could be the problem. 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>
+5
source share
2 answers

  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>
+20
source

  • no place_changed -event for SearchBox (this is an autocomplete event). The event for SearchBox is called place s _changed

  • have typo palce

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

  • It is not clear what you are trying to achieve, you are sorting places (there may be several places) and set the position of one marker to the location of the current place. The result will be that the marker is always placed at the last place of the returned results (for me it makes no sense). If you want to have multiple markers, you must create separate markers for each place (and optionally remove previously added markers) when you want one marker to use Autocomplete .

  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>
+4
source

More articles:


All Articles