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.
Related
I'm trying to find a way to create an undo button for drawing that works similarly to the undo button that is available while editing the polygon.
To be more precise, whenever a user inserts a point on the map which is for example a vertex of a polygon, he should have an option to undo his last (point/vertext) insertion.
Currently it doesn't exist as an existing functionality and I was hoping that it would be easy to implement it in the application I'm developing, but to me it seems there's no way to approach to the objects and layers created on the map before they are complete.
It's either that in v3 API there's almost everything exposured except this, or that I'm looking at the wrong place.
Apart from 'polygoncomplete' there are no other useful drawing events for shapes and it seems that the maintaned state for drawing activities is deeply rooted and scattered as I couldn't just go and replace map object and canvas elements with their previous versions.
Any hopes?
I've created script based on google manual for vertex deleting. The main function is simple, prototype is based on google.maps.OverlayView.
function DeleteMenu() {
this.div_ = document.createElement('div');
this.div_.className = 'delete-menu';
var menu = this;
google.maps.event.addDomListener(this.div_, 'click', function(e) {
menu.removeVertex();
e.stopPropagation();
});
}
DeleteMenu.prototype = new google.maps.OverlayView();
Gist with code is here. Use jsbin sandbox to play with it.
View example page, just click on the map to build your path, you can see undo button.
I am trying to add a bunch of markers to a map with show/hide buttons for each category of markers. Adding a marker from stored db data puts them on the map and makes them clickable, but they won't respond to setMap(null) unless that call is through google.event.addListener(marker, ...). Calling it from a standard js button onclick event, or via google.event.addDomListener(marker, ...) doesn't work.
Also maybe helpful to note is that when I call marker.setAnimation(BOUNCE) the marker starts bouncing but it looks like there is a duplicate marker under it. Similarly, if I drag the marker it's as if an unmovable duplicate is created right under it.
Thoughts? This is super frustrating!
Just like this taken from here ? Are you trying to avoid google maps api's google.maps.event.addDomListener? Why? You can use it to listen to your button's click event too. just as in:
var YourButton = document.getElementById('myButton');
function HideMarkers() {
// Hide us
}
google.maps.event.addDomListener(YourButton, 'click', HideMarkers);
customized for you from. For the second part, seeming like double markers I suppose we need some code..
This turned out to be purely user error. I am using firebase to store map data without a server backend and was adding duplicate markers. This explains the "inability to hide" and also the appearance of duplicate markers when dragging or animating.
The reason it was working from a click event on the marker was that both duplicate markers were receiving the click event and so both were being hidden.
setMap appears to be perfectly reliable when used in or out of google event handlers.
I am working with Google Maps API V3. The googlemaps displays markers for some places/location by default, I need to capture the click event when one of them is clicked..
I have tried to use the click event of the map but it not works because the user is clicking the marker not the map, code is given:
google.maps.event.addListener(mymap, 'click', function () {
alert('clicked');
});
Can someone give me an idea how to do it?
EDIT:
I can find no suitable Event in the available Events, which can help me!
Please note that I am not talking about the custom Markers (Created by User), these are default markers, googlemaps displays them by default.
Here's a clean solution straight from Google:
https://developers.google.com/maps/documentation/javascript/examples/event-poi
You can easily customize the default infowindow for POI's. Just ignore the route-making feature of the tutorial.
I have never tried it but could you retrieve the list of places that Google has displayed using the Google Places API and then establish your own pins and click events for them?
It's a bit hacky, and doesn't work on IE < 9, but you can listen on dom event,
to detect the creation of the window, using
Mutation Observer
Here is a plunkr to demonstrate : http://plnkr.co/edit/pGep9OZFligLhRtHlhgk
You can check in the console, an event is fired (actually twice) when you click on a POI.
Note that the OP is asking about doing this using the GMAP3 library, which is a jQuery plugin library that adds an API layer on top of the Google Maps layer. it is absolutely correct to say that the Google API is to use google.maps.addListener, but I think that the OP wants something that's closer to the GMAP3 example using addMarkers, but listening to the click event. With that in mind, I modified the example from GMAP3 and changed the mouseenter event to the click event and got rid of the mouseleave event.
Refer
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.
is there a way to, w/ google maps v3, listen to an event that will indicate a groundoverlay asset has been loaded? I'm loading an image onto the map and would like to be notified when the asset has completed downloading and has been presented to the client. Any ideas?
As of 2021 Dec, I can confirm that #Trott idle event will NOT work at all.
idle event fired early before any ground overlay image even start loading.
see this example
https://transparentgov.net:3200/googlemaps111/default?layer_id=7&layer=Zoning_Merge¢er_lat=33.721999270778305¢er_long=-116.28975468931803¢er_zoom=17&url=https%3A%2F%2Fgis.la-quinta.org%2Farcgis%2Frest%2Fservices%2FPlanning%2Fzoning1%2FMapServer&panto=0
However, in another post, I post a working example
The idea is you need use create a html image object,
new Image()
then set source let it downloading image
image.src
Then attach event
image.onload = function
The whole working source code is here
The working example is here
https://transparentgov.net:3200/googlemaps12/default?layer_id=0&layer=SilverRock_MasterPlan_29Nov2016_s200-images.jpg¢er_lat=33.65789936781538¢er_long=-116.25862990762825¢er_zoom=15&url=https%3A%2F%2Fgis.la-quinta.org%2Farcgis%2Frest%2Fservices%2FCommunity_and_economic%2FSilver_Rock_Master_Plan%2FMapServer&panto=0&overlayOpacity=8&overlayType=overlayType_image
A straight reading of the Google Maps API v3 documentation would seem to suggest that this wouldn't work, but I've managed to do this using the idle event with addListenerOnce(). (If that doesn't work for you, edit your question to show the code you tried and we'll see if we can get it working.)
The idle event seems to fire exactly once as a way of sort of saying "map is loaded and ready to go" even though the documentation seems to suggest that a pan or zoom needs to happen to trigger it.
Since this is (to my knowledge) undocumented behavior (at least in any official documentation), it runs the risk of suddenly not working one day when the API is updated. You can make the choice to either live with that risk or try to guard against it by specifying the version of the API that you want in your <script> tag that loads the API.