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>
Related
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);
I want to implement a search box in my webpage which includes a fullscreen map. I followed this link https://developers.google.com/maps/documentation/javascript/examples/places-searchbox and I did some code changes like below
I added this line of code in header
<script src="https://maps.googleapis.com/maps/api/js?key=...&libraries=places&callback=initAutocomplete"></script>
and html like this
<div id="map-container2" class="">
<input id="pac-input" class="controls" type="text" placeholder="Ville - Recherche">
<div id="map" class="map2"></div>
</div>
and I added this function to my javascript
$(document).ready(function () {
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
});
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
alert(input);
var searchBox = new google.maps.places.SearchBox(input);
alert(searchBox);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
alert("1");
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function () {
searchBox.setBounds(map.getBounds());
});
}
});
the problem is that although I define callback=initAutocomplete in script tag, but it never hits this function. alerts whithin this functions never calls.
I really appreciate any help.
Thank you
I get a javascript error "initAutocomplete is not a function" with the posted code (fiddle). InitAutocomplete is local to the anonymous function run by the jquery ready function, but is never called there.
Either put that function in a scope where it can be found by the script loader callback (fiddle):
<div id="map-container2" class="">
<input id="pac-input" class="controls" type="text" placeholder="Ville - Recherche">
<div id="map" class="map2"></div>
</div>
<script>
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {});
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
alert(input);
var searchBox = new google.maps.places.SearchBox(input);
alert(searchBox);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
alert("1");
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initAutocomplete"></script>
Or remove the &callback=initAutocomplete from the script include, just use it in the jquery ready function, and call it there (fiddle).
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="map-container2" class="">
<input id="pac-input" class="controls" type="text" placeholder="Ville - Recherche">
<div id="map" class="map2"></div>
</div>
<script>
$(document).ready(function() {
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
});
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
alert(input);
var searchBox = new google.maps.places.SearchBox(input);
alert(searchBox);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
alert("1");
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
}
initAutocomplete();
});
</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>
current screen is here. i m showing some locations in the map.locations are basically markers ,you can see markers in this picture.what i want to do is,,,
when i change the dropdownlist value i want to zoom in the chart where i can easily see one of the marker position after clicking some another dropdownlist value like when i click on PG & E the google map will zoom in to the specific marker. i will share my code with you. most importantly i am using kml file to load the map on the screen.
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 1,
mapTypeId: google.maps.MapTypeId.HYBRID
// center: {lat: 41.876, lng: -87.624}
});
var ctaLayer = new google.maps.KmlLayer({url:'https://sites.google.com/site/kmzmap1/plm/868l_little%20falls-st%20stephens%202%20.kmz?attredirects=0&d=1',
map: map
});
}
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
and my html code is .....
<div id="map" style="width:100%;height:478px;"></div>
You will need to use JQuery to achieve this. I will work through an example.
Define a Select box:
<select>
<option >Choose...</option>
<option value="in">zoom in</option>
<option value="out">zoom out</option>
</select>
We then need to ensure that the map is globally defined so we can access anywyere within the <script> aspect of the page
var map;
then assign your map to that variable map = new google...
We then use jquery to listen to the select box and perform some sort of action:
$('select').on('change', function() {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
if(valueSelected == 'in'){
map.setZoom(17);
}
if(valueSelected == 'out'){
map.setZoom(4);
map.panTo(new google.maps.LatLng(33.818038, -117.928492));
}
})
optionSelected gets the value of this select box (having multiple you probably be best basing this on ID rather than generic select).
valueSelected is the value of this selected item (in my example in or out).
we then call what to do; if in we increase the zoom in, if out we zoom out and pan to a coordinate (this could be a marker).
JSFiddle : http://jsfiddle.net/4mtyu/2741/
Trying to get Google Maps autocomplete for addresses working. This is the snippet of code I'm using:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=<%=ENV['GOOGLE_API_KEY'] %>&libraries=places"></script>
<label for="locationTextField">Location</label>
<input id="locationTextField" type="text" size="50">
<script>
function init() {
var input = document.getElementById('locationTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
}
google.maps.event.addDomListener(window, 'load', init);
</script>
I've put this inside one of my views and while everything appears to load fine (no console errors), when I type in an address, the dropdown list never appears.
That dropdown box is in a .pac-container div, which does appear, though display:none; when I override that in Chrome dev tools, I just see the google logo appear below my search box (as if the list is empty).
I copied this code to a blank html page outside of my rails app and it worked fine.
It works just fine for me.
I tested this:
<style> #map {height: 90%} </style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<label for="locationTextField">Location</label>
<input id="locationTextField" type="text" size="50">
<div id="map"></div>
<script>
function init() {
var input = document.getElementById('locationTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 50.869754630095834, lng: 4.353812903165801},
zoom: 12
});
}
google.maps.event.addDomListener(window, 'load', init);
</script>
Is there anything you are doing different? Anything I'm missing?