I want to customize auto suggestion result. I want to add more two addresses at the top of the result. Is it possible using google api? for more understanding I stick here my app screen. there I am entering address. it showing predicted addresses, How can I add 2 more address at top of the result.
You can't do much with the Autocomplete class, at least not with any documented method. You can use the Autocomplete Service class and the getPlacePredictions method to mimic the behavior of the standard Autocomplete.
What that means is that you will have to build your own UI and behaviors, but it also gives you more flexibility to style it the way you want, and it will allow you to add your custom addresses easily.
Here is a quick example. It just adds two custom addresses on top. You will have to implement the logic behind the 2 custom addresses as currently nothing will happen when you click on them. But that's not the trickiest part, and this example shows already a lot of what you can do with it.
let autocompleteService, placesService, results, map;
function initialize() {
results = document.getElementById('results');
const mapOptions = {
zoom: 5,
center: new google.maps.LatLng(50, 50)
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Bind listener for address search
google.maps.event.addDomListener(document.getElementById('address'), 'input', function() {
results.style.display = 'block';
getPlacePredictions(document.getElementById('address').value);
});
// Show results when address field is focused (if not empty)
google.maps.event.addDomListener(document.getElementById('address'), 'focus', function() {
if (document.getElementById('address').value !== '') {
results.style.display = 'block';
getPlacePredictions(document.getElementById('address').value);
}
});
// Hide results when click occurs out of the results and inputs
google.maps.event.addDomListener(document, 'click', function(e) {
if ((e.target.parentElement.className !== 'pac-container') && (e.target.parentElement.className !== 'pac-item') && (e.target.tagName !== 'INPUT')) {
results.style.display = 'none';
}
});
autocompleteService = new google.maps.places.AutocompleteService();
placesService = new google.maps.places.PlacesService(map);
}
// Get place predictions
function getPlacePredictions(search) {
autocompleteService.getPlacePredictions({
input: search,
types: ['establishment', 'geocode']
}, callback);
}
// Get place details
function getPlaceDetails(placeId) {
const request = {
placeId: placeId
};
placesService.getDetails(request, function(place, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
const center = place.geometry.location;
const marker = new google.maps.Marker({
position: center,
map: map
});
map.setCenter(center);
// Hide autocomplete results
results.style.display = 'none';
}
});
}
// Place search callback
function callback(predictions, status) {
// Empty results container
results.innerHTML = '';
// Place service status error
if (status != google.maps.places.PlacesServiceStatus.OK) {
results.innerHTML = '<div class="pac-item pac-item-error">Your search returned no result. Status: ' + status + '</div>';
return;
}
// Build output with custom addresses
results.innerHTML += '<div class="pac-item custom"><span class="pac-icon pac-icon-marker"></span>My home address</div>';
results.innerHTML += '<div class="pac-item custom"><span class="pac-icon pac-icon-marker"></span>My work address</div>';
// Build output for each prediction
for (let i = 0, prediction; prediction = predictions[i]; i++) {
// Insert output in results container
results.innerHTML += '<div class="pac-item" data-placeid="' + prediction.place_id + '" data-name="' + prediction.terms[0].value + '"><span class="pac-icon pac-icon-marker"></span>' + prediction.description + '</div>';
}
const items = document.getElementsByClassName("pac-item");
// Results items click
for (let i = 0, item; item = items[i]; i++) {
item.onclick = function() {
if (this.dataset.placeid) {
getPlaceDetails(this.dataset.placeid);
}
};
}
}
google.maps.event.addDomListener(window, 'load', initialize);body,
html {
font-family: Arial, sans-serif;
padding: 0;
margin: 0;
height: 100%;
}
#map-canvas {
height: 130px;
margin-bottom: 10px;
}
table {
border-collapse: collapse;
margin-left: 20px;
}
table td {
padding: 3px 5px;
}
label {
display: inline-block;
width: 160px;
font-size: 11px;
color: #777;
}
input {
border: 1px solid #ccc;
width: 170px;
padding: 3px 5px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
}
.pac-container {
background-color: #fff;
z-index: 1000;
border-radius: 2px;
font-size: 11px;
box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
width: 350px;
}
.pac-icon {
width: 15px;
height: 20px;
margin-right: 7px;
margin-top: 6px;
display: inline-block;
vertical-align: top;
background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons.png);
background-size: 34px;
}
.pac-icon-marker {
background-position: -1px -161px;
}
.pac-item {
cursor: pointer;
padding: 0 4px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
line-height: 30px;
vertical-align: middle;
text-align: left;
border-top: 1px solid #e6e6e6;
color: #999;
}
.pac-item.custom {
background-color: #FFF9C4;
}
.pac-item:hover {
background-color: #efefef;
}
.pac-item-error,
.pac-item-error:hover {
color: #aaa;
padding: 0 5px;
cursor: default;
background-color: #fff;
}<!-- Replace the value of the key parameter with your own API key. -->
<script src="//maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>
<table>
<tr>
<td>
<label for="address">Address:</label>
</td>
</tr>
<tr>
<td>
<input id="address" placeholder="Enter address" type="text" tabindex="1" />
</td>
</tr>
<tr>
<td colspan="2">
<div id="results" class="pac-container"></div>
</td>
</tr>
</table>Most of the code is commented so it should speak for itself.
In case anyone needs to move through the results with arrow keys, I've written something like this in addition to the example provided by MrUpsidown.
Functions nextAll and prevAll can be probably simplified to next and prev, but I had to use these as I have some dividing elements of different classes (than .pac-item) in the results.
// move through options on key down or up
$(input).keydown(function(e) {
switch (e.which) {
case 40: // move down
e.preventDefault(); // prevent moving the cursor
if(document.querySelector('.pac-item-selected') == null)
$('.pac-item').first().addClass('pac-item-selected');
else {
var i = $('.pac-item:not(:last-child).pac-item-selected').nextAll('.pac-item');
if(i.length > 0){
$('.pac-item:not(:last-child).pac-item-selected').removeClass('pac-item-selected');
i[0].classList.add('pac-item-selected');
}
}
break;
case 38: // move up
e.preventDefault(); // prevent moving the cursor
var i = $('.pac-item:not(:first-child).pac-item-selected').prevAll('.pac-item');
if(i.length > 0){
$('.pac-item:not(:first-child).pac-item-selected').removeClass('pac-item-selected');
i[0].classList.add('pac-item-selected');
}
break;
case 13: // submit when enter is pressed
e.preventDefault();
if(document.querySelector('.pac-item-selected') == null)
$('.pac-item').first().click();
else
$('.pac-item-selected').click();
break;
}
});
$(document).on({ // remove selected class on hover
mouseenter: function () {
$('.pac-item-selected').removeClass('pac-item-selected');
}
}, ".pac-item");
© 2022 - 2024 — McMap. All rights reserved.