I am hoping to get a response, I am trying to auto-populate a user's full address when the first few lines are typed, with ZIP/POSTAL code. The auto suggest populates the entire address minus the zip/postal code. This is needed for all countries.
function initAutocomplete() {
var input = document.getElementById('autocomplete');
var options = {
types: ['address']
};
new google.maps.places.Autocomplete(input, options);
}
google.maps.event.addDomListener(window, 'load', initAutocomplete);
Related
Good afternoon! I found a good code on the web, GoogleMap Custom AutoComplete, you can see it here:
https://embed.plnkr.co/IWj3w4/
In the js script, there are several lines like this:
function initialize() {
autocomplete = new google.maps.places.Autocomplete(
/** #type {HTMLInputElement} */
(document.getElementById('autocomplete')), {
types: ['geocode']
});
// When the user selects an address from the dropdown,
// populate the address fields in the form.
google.maps.event.addListener(autocomplete, 'place_changed', function() {
fillInAddress();
});
autocomplete_postalcode = new google.maps.places.Autocomplete(
(document.getElementById("AutocompletePostalCode")), {
types: ['(regions)'],
componentRestrictions: {country: 'fr'}
});
As you can see from the code, it should only work for the "FR" country, but it works worldwide. How to make 1 specific country in this code? For example USA or Canada?
Thanks a lot! I hope for your help
I have a working autocomplete Places API. It shows the suggested places but these options are not clickable or do not do anything when clicked.
I've tried changing the z-index and trying it on a different page to see if there are any plugins that conflict, but there are none.
<input type="text" id="address" style="width: 500px;"></input>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCuVftmpzV-RSZA7-td6gaCpYwMmDc9CPo&libraries=places&v=weekly"></script>
<script>
var autocomplete = new google.maps.places.Autocomplete($("#address")[0], {});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
console.log(place.address_components);
});
</script>
I would like to add the Google Places address autocomplete search to a form. I see the example code HERE. I am using jquery and have my ready function in a separate js file. I have put the example functions into that external js file and it is being loaded.
I have my API key in the Google API script tag. but the callback=initAutocomplete js function is not being called.
My script section looks like -- yes, I have a real API key:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"
integrity="..." crossorigin="anonymous"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=<MY-API-KEY>&libraries=places&callback=initAutocomplete"
async defer></script>
<script src="js/index.js'"></script>
The index.js file looks mostly like:
$(function () {
...
$("#addressLookup").on('focus', geolocate());
});
var autocomplete;
function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
/** #type {!HTMLInputElement} */(document.getElementById('addressLookup')),
{types: ['geocode']});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', fillInAddress);
}
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
console.log("fillInAddress: place");
console.dir(place);
}
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var geolocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
autocomplete.setBounds(circle.getBounds());
});
}
}
I don't see anything barfing in the js console log. I do not see the Google stuff loading in the Developer Tools "Network" panel.
What have I missed?
I think you should change scripts order
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"
integrity="..." crossorigin="anonymous"></script>
<script src="js/index.js'"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=<MY-API-KEY>&libraries=places&callback=initAutocomplete"
async defer></script>
So I'm stuck on this - I'm working on building a site that shows activities near a user dependent on the location they input i.e. if I put in "Kent, London" or a postcode into the search box, it'll show an interactive map with pins and/or a list that details nearby activities - essentially a similar function to how Trivago shows hotels when you put in a location and you can view the list/show the map.
I've managed so far to get an autocomplete function working on-site by creating an input box and calling the Google Maps API like so:
<head>
...
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
...
</head>
<body>
...
<input id="searchTextField" type="text" size="50">
...
</body>
And then calling a JS function:
function initialize() {
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
}
google.maps.event.addDomListener(window, 'load', initialize);
However I don't know how to:
Get the search box to, upon a user hitting enter OR clicking the
"search" button, display a page with an interactive map - to be
honest I think this will be an onClick function or something along
the lines if someone can clarify and provide me with the correct
syntax on opening a new page with this?
On this new page - I would want the interactive map with the data displayed dependent on the location the user entered - I can
appreciate not all locations will work and I am not planning on
covering the entire nation - instead I want to start off with
one-two locations and list activities on a map dependent on them -
so if I enter "Kent" for example or even a postcode - how would I
get a map to display?
As for the activities themselves I know what activities I want to put in but what would be the correct way to input and call these in accordance to the above requirements? Would I need to create and then import them from a Database of some sort? Could these populate on the map as pins and when you click on the pins more information is displayed? Or as a list on the side or below the map?
Appreciate any help I can appreciate this is a complex question and in no way do I intend to do something on the scale of say Trivago - more of a super toned down version within the same spirit of their search.
You can try to start with the different sample code provided by Google Maps JavaScript API.
Here is the example code on how to use Place Autocomplete.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13
});
var input = /** #type {!HTMLInputElement} */(
document.getElementById('pac-input'));
var types = document.getElementById('type-selector');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
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) {
window.alert("Autocomplete's returned place contains no geometry");
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.setIcon(/** #type {google.maps.Icon} */({
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(35, 35)
}));
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(' ');
}
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
infowindow.open(map, marker);
});
// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.
function setupClickListener(id, types) {
var radioButton = document.getElementById(id);
radioButton.addEventListener('click', function() {
autocomplete.setTypes(types);
});
}
setupClickListener('changetype-all', []);
setupClickListener('changetype-address', ['address']);
setupClickListener('changetype-establishment', ['establishment']);
setupClickListener('changetype-geocode', ['geocode']);
}
Now, you can make this code as your starting point, then try to apply here the different function that you want your application do.
This is my first post and I hope I can get some help since I am relatively new to the development arena, please excuse me if my questions are a bit stupid.
I am trying to make sort of a dashboard implementing a dependency from a drop down list in html - let's say that based on the drop down list value selected, a div tag containing a google maps reference should be updated.
For example:
I choose a continent from the drop down list, and then Google will shift its view on that area, later on showing customized points of interest on the map. Can someone help me or suggest a possible solution?
Thank you!
Make sure to include the Google Maps Javascript API (I assume you've already done this):
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
JS:
var map;
var geocoder;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 10,
streetViewControl: false
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
geocoder = new google.maps.Geocoder();
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function() {
$('input.maps-input').on('change', function() {
geocoder.geocode({ 'address': $(this).val()}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK)
map.setCenter(results[0].geometry.location);
else
alert('A location could not be found. ' + status);
});
});
});
Then add a dropdown (or any type of input) with class maps-input to your page and a div with class map-canvas (of course you can change these class names to whatever you want).