Is it possible to connect the input of the paper-input component with the Google Places Autocomplete library? I'm trying to get the places dropdown effect combined with the paper-input behavior
You can use the following code for getting google places Autocomplete with Polymer paper input
First you need to import google maps web components
you can download google-maps element from https://googlewebcomponents.github.io/
<link rel="import" href="components/google-maps/google-maps.html">
Then you can use the following code. Call initialize function at page onload. When you type any address in the input the autocomplete will show up and when you choose any item from the autocomplete then callback will be initiated.
<paper-input id="search"></paper-input>
<script>
var autocomplete;
function initialize()
{
autocomplete = new google.maps.places.Autocomplete((document.getElementById('search')), {types:['geocode']});
google.maps.event.addListener(autocomplete, 'place_changed', callBack);
}
function callback()
{
var place = autocomplete.getPlace();
//console.log(place.geometry.location.lat());
}
</script>
You can find out more about Google places autocomplete from https://developers.google.com/maps/documentation/javascript/places-autocomplete
Someone has already written the element here, just replace input with paper-input & add import.
Also pay attention, "libraries" attribute must me exactly the same on every google maps element.
Related
i've got this error message in the console. can anyone explain why? and the page is running as it should be.
js?key=MyAPIKey&v=3.exp&libraries=places,drawing,geometry:32 InvalidValueError: not an instance of HTMLInputElement_.ab # js?key=MyAPIKey&v=3.exp&libraries=places,drawing,geometry:32
InvalidValueError: not an instance of `HTMLInputElement`
That's mean you have not set proper id of your html input element.
Google API not able to find that control in your html code. Because of wrong id of input element.
If you using textarea then it will not work because google maps autocomplete now supports only window.HTMLInputElement(input tags)
For more details Please Check this Link
You can also find examples here of Google Map API
Add Google Api CDN after the callback function
eg.
function initMap() {
//
}
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
I also got this error when i use google map autocomplete.
InvalidValueError: not an instance of `HTMLInputElement`
So i solve this as like .
var org = document.getElementById('origin');
new google.maps.places.Autocomplete(org, options);
I am working with Google Maps API V3. The following is my code to set-up for autocomplete:
var options = {
componentRestrictions: {country: elmts.rs_country.val()}
};
new google.maps.places.Autocomplete(start_address, options);
This works just fine. However, I need to dynamically change the country restriction.
How can I change the 'componentRestrictions' to another country?
Please see this Google maps api. You can use the method setComponentRestrictions
is it possible to activate the keyboard bindings of Google Maps (StreetView) immediately after page load? I found a working example here, unfortunately it uses the Google Maps API v2 which is no longer supported. If you embed a normal Google Maps StreetView, keyboard bindings works not before you click on the map initially (see here).
Is there a possibility to do this in v3? I already tried this and this without success because thats not working for streetview.
Update: with keyboard bindings I have especially the arrow keys in mind to move around the map
Thanks
Greetings
Ok, found a solution and created a Gist for that.
The solution proposed by #ChristianB did not work for me. Maybe because it works for an older version of the Google Maps API (mine is v3), or it uses a different rendering mode (mine is webgl, which uses a canvas).
What I did is wait for the position_changed event to trigger, then set a tabIndex attribute on the canvas element, and then trigger the focus() on the canvas element. After that the keyboard bindings work.
The code:
var panorama = new google.maps.StreetViewPanorama({
...
//forcing webgl
mode: 'webgl'
});
//Set an event listener for position_changed,
//this will be triggered the first time the panorama is loaded,
//and every time the position changes
google.maps.event.addListener(panorama, 'position_changed', function() {
//This is how to get the canvas in my current version of the Google Maps API,
//note that this might change in the future.
var canvas = document.querySelector('canvas.widget-scene-canvas');
//first set a tabindex on the canvas,
//without it focus will not make the canvas the active element
canvas.setAttribute("tabindex", "-1");
canvas.focus();
//To test that it worked you can check that document.activeElement is the canvas
console.log(document.activeElement);
});
You might want to put the code in a separate function and call it any time the canvas loses focus.
Code tested in Google Chrome v55.
What I do is I go to a location in Google Maps (either by searching or just by dragging the map). Now I enter another URL in the addressbar and hit return to go to that site.
When I use the browser Back-Button, google Maps automatically switches back to the location I was last in.
How is this done if I dragged the map and didn't use some kind of "POST" on the Google Maps site? I would like to have the same behaviour in my own google Google Maps App.
I'm using Google Maps API for JavaScript v3
I don't know if GMaps has convenience method for this, but generally such functionality is based on HTML5 history.pushState() which lets you add custom steps to navigation history and observe when user navigates back:
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
If you want to handle more advanced application states this way, there are several frameworks built on top of it, e.g. Backbone router, LeviRoutes.
In HTML4 browsers pushState can be emulated with fragment identifiers (hash URLs).
First of all you just look for an event called 'dragend' on your map
google.maps.event.addListener(map, 'dragend', function() {
});
Then you need to get your coordinates using getCenter() and redirect your browser to '#coordinates' it won't reload your window as you use hash, but it will save it in history.
coords = map.getCenter();
window.location = '#' + encodeURI(coords);
Now you need to add listener to check for any 'hash' changes in an URL (assuming you have jQuery)
$(window).bind('hashchange', function () {
var hash = window.location.hash.slice(1);
});
At the end you need to tell your map to change coordinates and decode url
hash = decodeURL(hash);
map.panTo(hash);
Instead of panTo() you could use setCenter(), but it add some nice animation while clicking Back button.
It is very easy to change this code to work with your searched place, you can use event 'center_changed' instead of 'dragend' and it will handle everything.
Everything I wrote about is covered here:
https://developers.google.com/maps/documentation/javascript/reference#Map
Hope this helps you.
How do I get the current Google Map that is already initialized on the page with the Javascript V3 api, so I can reset a marker?
declare the map object in javascript as global then you get the anywhere in javascript
If you have a marker and you want to reference the map that it relates to you can simply call getMap() on the marker.
var myMap = myMarker.getMap();
When called from an object it returns the map on which the object is rendered/displayed.
This is true for most objects in the google.maps namespace (Marker, Polyline, Rectangle, etc).
If you take a look through the reference page you can see which objects getMap() is an available method for.