Google map preview selected location on map - google-maps

Question

I would like to allow my user to pick a location as well as previewing searched location to pick location.
Problem
Am not able to integrate the search-box to preview the searched location.
Code I am using
<input type="text" id="search">
<div id="map"></div>
var map = document.getElementById('map');
var lp = new locationPicker(map, {
setCurrentPosition: true,
lat: -13.9867852,
lng: 33.77027889
}, {
zoom: 15 // You can set any google map options here, zoom defaults to 15
});
// Listen to button onclick event
confirmBtn.onclick = function () {
var location = lp.getMarkerPosition();
var location = location.lat + ',' + location.lng;
console.log(location);
};
google.maps.event.addListener(lp.map, 'idle', function (event) {
var location = lp.getMarkerPosition();
var location = location.lat + ',' + location.lng;
console.log(location);
});
How do i enable the input to search location and display it on the map
Edit, Have managed to enable search on the input but can't move the marker to the selected location
google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
var input = document.getElementById('search');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.setComponentRestrictions({'country':['mw']});
autocomplete.addListener('place_changed', function () {
var place = autocomplete.getPlace();
/*
console.log(place.geometry['location'].lat());
console.log(place.geometry['location'].lng());
console.log(place.name);
console.log(place.formatted_address);
console.log(place.vicinity);
console.log(place.url);
console.log(place.address_components);*/
if(!place.geometry) {
return;
}
console.log(place);
});
}

Answer 1

Kindly check out this sample fiddle that have a search box and a map. When a user selects a place suggestion in the autocomplete input, the sample then calls the getPlace() method, and then it opens an info window to display place details.
You can create an infowindow to display some place details:
<input id="search" type="text" placeholder="Enter a location">
<div id="map"></div>
<div id="infowindow-content">
<img src="" width="16" height="16" id="place-icon">
<span id="place-name" class="title"></span><br>
<span id="place-address"></span>
</div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initialize" async defer></script>
</body>
In the initialize() function, declare your infowindow and marker objects and then set the marker position and infowindow content in the place_changed listener which is called whenever the user selects an autocomplete address suggestion.
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -13.9867852, lng: 33.77027889},
zoom: 15
});
var input = document.getElementById('search');
var autocomplete = new google.maps.places.Autocomplete(input);
// Set the data fields to return when the user selects a place.
autocomplete.setFields(
['address_components', 'geometry', 'icon', 'name']);
autocomplete.setComponentRestrictions({
'country': ['mw']
});
var infowindow = new google.maps.InfoWindow();
var infowindowContent = document.getElementById('infowindow-content');
infowindow.setContent(infowindowContent);
var marker = new google.maps.Marker({
map: map,
anchorPoint: new google.maps.Point(0, -29)
});
autocomplete.addListener('place_changed', function() {
infowindow.close();
marker.setVisible(false);
var place = autocomplete.getPlace();
if (!place.geometry) {
// User entered the name of a Place that was not suggested and
// pressed the Enter key, or the Place Details request failed.
window.alert("No details available for input: '" + place.name + "'");
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17); // Why 17? Because it looks good.
}
marker.setPosition(place.geometry.location);
marker.setVisible(true);
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
infowindowContent.children['place-icon'].src = place.icon;
infowindowContent.children['place-name'].textContent = place.name;
infowindowContent.children['place-address'].textContent = address;
infowindow.open(map, marker);
});
}
You can also check out this example from the public documentation.
Hope this helps!