I am implementing an app using Google Maps API 3. I would like to know what is the best implementation in dealing with this problem. I want to execute an action once ANY event in Google Map has been fired. Currently, what I am doing is that I call the function every time a specific event is called. I find this redundant and I have to make a listener for all of the events. So, is there a way to generalize this where I can do the following:
google.maps.addListener(everything_on_the_map_canvas, 'ANY_EVENT', function(event) {
foo();
})
function foo(){
//do something here
}
Thank you.
If the user decides to continue with map operations, they will have to move the mouse over the map to do anything. So you could simply trap a mousemove.
google.maps.event.addListener(map, 'mousemove', function(event) {foo();})
If the user can manipulate the map without moving the mouse over the map, then you will need to listen to other events.
bounds_changed will cover most eventualities with zoom and pan, heading and the like
maptype_id_changed
But that's only three instead of all of them. If the bounds don't change when the tilt does (and you can change tilt from outside the map) you may need to listen for tilt_changed as well.
Related
I'd like to get the LatLng of the touchpoint in a touchmove event (leaflet map). I didn't find a way to solve this. Are there any ways to get the coordinates?
$(document).on('touchmove', '#mapid', function(e) {
//here i want to get the LatLng coordinates
)};
I see two approaches.
One is to use Leaflet's event handling, y doing something like map.on('mousemove', function(ev){ ... });.
That event handler will receive a Leaflet 'MouseEvent', which includes the LngLat of the point of the map where the event took place. See http://leafletjs.com/reference-1.1.0.html#map-event and http://leafletjs.com/reference-1.1.0.html#mouseevent. And yes, Leaflet listens to TouchEvents and PointerEvents when told to listen to MouseEvents.
The other approach is to use the map's containerPointToLatLng() conversion method, or the mouseEventToLatLng() method to turn a pixel coordinate or a mouse event into a LatLng.
I am looking for an event that is fired on zoomend AND/OR moveend. Basically I have a popup that needs to happen after either of these events, and that popup depends on queryRenderedFeatures, which can only be queried if they are in the map view.
I am currently using a setTimeout function if there is not zoomend, but this is not ideal. Yes, I can attach functions after both of these, but this get messy. I see there is a map.on('data') event, but is there a map.on('data.load') or something similar, like on map.on('style.load')?
What I am wanting is something that is fired after there is no longer any map.on('data') events firing. Maybe this can be done in Javascript with setInterval or something.
Thanks
You can bind your query function to map.on('move', function() {}) which will fire continuously as the map is being zoomed or dragged.
In my application, I use map.on('move', function() {}) to get the center lat/lng of the map. So my code roughly looks like this:
setCenter () {
const center = map.getCenter()
// render the center coords
}
// later in my code
map.on('move', this.setCenter)
// and when I'm done
map.off('move', this.setCenter)
I am developing a web application that uses Bing maps 7.0. I was wondering if there was a way to bind a function to a Map class event that listens for when the map is either dragged or zoomed. From what I see in the documentation, the viewchangeend event for the Map class is close to what I am looking for, however this event is called in situations that I do not particularly want to account for, such as if I hide the map's containing div using jQuery or on map creation/initialization. Ideally, I would also like this to be a throttled event, where the handler function gets called after a given amount of time. Any idea on how this could be implemented?
Update
As suggested by psousa, I used the viewchangeend event.
This is the hack around that I tried implementing to sort of try and detect if the map has zoomed or been dragged. I still bind the handler to the viewchangeend event, but this time I check to see if the Northwest coordinates or Southeast coordinates of the map have changed.
var map; // contains Microsoft.Maps.Map instance
var nw; // contains the NW Microsoft.Maps.LocationRect instance
var se; // contains the SE Microsoft.Maps.LocationRect instance
// initialization code goes here some where
Microsoft.Maps.Events.addThrottledHandler(map, "viewchangeend", function(arg) {
var curNW = map.getBounds().getNorthwest();
var curSE = map.getBounds().getSoutheast();
if (nw.latitude != curNW.latitude ||
nw.longitude != curNW.longitude ||
se.latitude != curSE.latitude ||
se.longitude != curSE.longitude)
{
nw = curNW;
se = curSE;
// Execute actual handler code here
}
}, 1000);
This code does not work as I had intended. As I'm debugging the code, if I go and hide the map's containing div (using jQuery), I notice that curNW and and curSE do not have the same coordinates as the ones I stored on the previous call. Why is this if I never dragged the map around or zoomed in or out? I am just hiding the map, why would the map's coordinates change? It makes no sense to me. Ideally, I wish Bing maps would provide developers with a zoomend or dragend event so I can say:
Microsoft.Maps.Map.addThrottledHandler(map, "zoomend", handler, 1000);
Microsoft.Maps.Map.addThrottledHandler(map, "dragend", handler, 1000);
Google Maps I believe provides this functionality. If anyone knows a better way to check for these events, please let me know. I don't want to add additional handlers to the elements of the page that may trigger a viewchangeend as there is way to much stuff going on in this page as it is. Appreciate the help.
The viewchangeend and viewchange are the best events for that, so no great alternative there.
Anyway, you have out-of-the-box support for throttled events. So, instead of:
Microsoft.Maps.Events.addHandler(map, 'viewchangeend', handler);
you can just use (the last argument uses milliseconds):
Microsoft.Maps.Events.addThrottledHandler(map, 'viewchangeend', handler, 500);
Reference: http://msdn.microsoft.com/en-us/library/gg427623.aspx
As covered in an existing question, I have a piece of code which (nice and simply) keeps a div updated with the current location of the cursor like so.
function updateLocation(e) {
document.getElementById('current_coordinate').innerText = e.latLng.toUrlValue(6);
}
It works brilliantly until the cursor moves over an overlay. The overlay consumes the event so the event listener I have defined on the map never fires.
google.maps.event.addListener(map, 'mousemove', updateLocation);
Questions:
Must I redefine that listener on every overlay I create or is there simpler way?
If I must define listeners on every overlay, roughly how many overlays may I have without performance suffering?
The overlay is interactive and so setting clickable to false is not an option.
See also these discussions that indicate this is a bug - as yet unfixed:
https://groups.google.com/forum/#!topic/google-maps-js-api-v3/z_K7hxKhonI
https://groups.google.com/forum/?hl=en#!topic/google-maps-js-api-v3/mM0mB9FcyAU
I am using google maps + javascript + php in my application.
I want to know two things:
In google maps,
does moveend event ALWAYS gets fired
AFTER zoomend/dragend (whichever of
two) event occurs.
When I click zoom icon on google map
or scroll the mouse wheel to zoom,
the zoomend event gets fired more
than once. If I zoom in one step
using + icon on map, the zoomend
event gets fired twice or sometimes
more. any possible loophole.
And so want to know how to stop further event propogation in javascript. (remember I need not use clearListeners as it will forever ignore event handler which is undesirable).
Thank you.
I set up listeners for 'moveend', 'zoomend', and 'dragend' to try it out.
GEvent.addListener(map, "moveend", function() { console.log('moveend'); });
GEvent.addListener(map, "zoomend", function() { console.log('zoomend'); });
GEvent.addListener(map, "dragend", function() { console.log('dragend'); });
It appears that 'moveend' always fires after 'zoomend' or 'dragend'.
However, no events ever fired more than once at a time. Maybe you accidentally set up two simultaneous listeners. You shouldn't need to use stopPropagation or cancelBubble.
you could try just reuturning false or null from the event.
If that doesn't work trying using "event.cancelBubble = true" or "event.stopPropagation"