Monday, June 3, 2024
 Popular · Latest · Hot · Upcoming
160
rated 0 times [  162] [ 2]  / answers: 1 / hits: 75233  / 9 Years ago, sat, april 25, 2015, 12:00:00

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>

More From » google-maps

 Answers
16



 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>




[#66895] Friday, April 24, 2015, 9 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
pranav

Total Points: 693
Total Questions: 119
Total Answers: 119

Location: Greenland
Member since Fri, Jul 31, 2020
4 Years ago
pranav questions
Thu, Feb 10, 22, 00:00, 2 Years ago
Tue, Dec 28, 21, 00:00, 2 Years ago
Mon, Sep 6, 21, 00:00, 3 Years ago
Mon, Mar 8, 21, 00:00, 3 Years ago
;