I am building a wordpres site with a google maps iframe on each page.
When doing lighthouse report I get these errors.
js:308
js:308
init_embed.js:87
js:268
maps.googleapis.com/…tl/en_gb/util.js:58
This is the website http://nathanw70.sg-host.com/
See screenshot. When rolling over I get links to google maps. I have tried adding the code from this thread how to fix error Does not use passive listeners to improve scrolling performance (Lighthouse Report) and also the code from https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners
I can not get rid of the errors.
Does not use passive listeners to improve scrolling performance
Consider marking your touch and wheel event listeners as passive to improve your page's scroll performance. Learn more.
Source
js:308
js:308
init_embed.js:87
js:268
maps.googleapis.com/…tl/en_gb/util.js:58
screenshot error google maps passive listeners
Related
Will make this brief, I have a game map with units on it and had finalized a fully interactive minimap where the units on the minimap have event listeners for rollover/rollout (displays a small popup unit data summary) and click (selects the "real" unit on the main game map and scrolls the viewpoint to that location). All done, tested, working.
I then implement an interactive scrollable unit list with more status summary data and dozens of objects with rollover/rollout/click listeners. All tested and working fine.
Then I go back and look at my minimap, and the listeners on the mini-ships aren't working anymore. Things tried:
Debug code to make sure listeners still being added
Debug to watch the one place where I remove those listeners to make sure that ain't happening unexpectedly
Debug to watch all the places I refresh that dialog to make sure every iteration adds the listeners back
Can't see that there is any transparent object on top intercepting
Checked mini-ship parents to make sure I didn't turn off mouseChildren or something like that somewhere
No added stage-level listener, in fact I killed all of them temporarily to test this
What happens when I debug with a breakpoint on the mini-ship listener handler is nada. It's no longer receiving mouse events. So either something I haven't thought of has stopped them from listening or something I don't know of is intercepting.
So what is the strategy here? How can I find the break in the chain?
Well knowing what the actual problem was certainly gives us the advantage of hindsight... that being said, you could have detected the error by adding a trace call inside your function that adds the listener and another one inside your function that removes it. Then you would have seen that it isn't getting re-added. Or you could set break points there.
I am using Vimeo's Flash API so that I can embed and read the timecode of a video using the playProgressHandler, pause it at certain times, pop a menu, and use buttons that trigger seekTo calls. Although everything works, the timecode is inaccurate to varying degrees. Anywhere from 1-2 seconds. I can tell this because:
1) If I play my video on Vimeo and pause it at 6:03 and do the same with it embedded in Flash the visuals do not match up. Flash is lagging behind a tad.
2) I did a test using the JavaScript API. My seekTo calls were consistently accurate. To seek to the same spot using the AS3 API I had to add 1.5 seconds. But even this isn't foolproof. Sometimes it works, but sometimes it's still off.
Any ideas what would account for this inaccuracy and how I might fix this problem? Yes, I can ditch the AS3 and use the JS version, but I'd prefer to just fix what I've already built.
(I also posted this on Vimeo's forum, but I'm following their "Limited support in API Forum" post which suggests to post here)
Unfortunately, there's not much we can do to fix this other than to recommend that you use our iframe embed.
It has to do with the way that we retrieve files from our CDN. Because Flash doesn't support byterange requests, we pass a parameter that returns part of the file starting at that position. The nature of how that works means it's always going to be imprecise.
We are experiencing an issue related to GoogleMaps. The issue is mainly related to touch screens. We were trying to resolve the issue, but so far no success.
We found in this article that the Google Maps API V3 does not supports touch event? Is this is true or false?
UPDATE
This issue was handled in the bug
https://issuetracker.google.com/issues/35824421
and was solved in version 3.27 of Google Maps JavaScript API in December 2016.
In my experience, the mousedown, mouseup, dragstart, dragend events work fine in place of touchstart, touchmove, touchend.
google.maps.event.addListener(myMap, "mousedown", function(event){...});
I'm pretty sure that gesture events are not going to be supported, since those are used for pinch-zoom functionality.
If you need gestures, you'd have to build your own recognizer by tracking mousedown events, storing them in an array, then tracking positions to determine angles, distances etc...
They aren't currently supported. See here for an interactive map that shows demonstrations of currently available events:
https://developers.google.com/maps/documentation/javascript/events#EventsOverview
This page also states that:
For a complete list of events, consult the Google Maps JavaScript API
Reference.
Touch related events are absent from that page, therefore they aren't supported.
Commenting on the accepted answer, the events that are supported are not strictly equivalent (a touch is clearly semantically different from a mouse click), and in my experience results can be variable (for example in some cases a touch can result in firing of an onclick event on Google maps, and in some cases it can result in firing of a mouseover event), so some fall-through handling may be required to reliably handle this type of occurence when 'borrowing' these events to detect touch.
Here's a good article on handling touch with a listener:
https://www.google.com.au/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0ahUKEwiwm6y38dXXAhWHVbwKHRdUCY4QFggmMAA&url=https%3A%2F%2Fmedium.com%2F%40david.gilbertson%2Fthe-only-way-to-detect-touch-with-javascript-7791a3346685&usg=AOvVaw3pWv0R_AESWKqwF72D0hix
Using mousedown, mouseup with e.domEvent.pointerType == "touch" makes it possible to detect the event type:
map/marker.addListener("mousedown"/"mouseup", (e) => {
if(e.domEvent.pointerType == "touch") console.log("touch");
else console.log("mouse/pen")
});
NOTE: e.domEvent.pointerType doesn't work for mousemove (which is BTW only available on map and not on markers) So I would recommend using the document.addEventListener() for mousemove/touchmove + flagging the current mouse/touch down/up state of the map/marker to spot the mousemove event type.
I am using the Map control in Windows Phone 8.
I need to implement a page where user can select his location using the map control.
I am trying to know when the app was first manipulated by the user.
Some background info:
I saw that when the control is shown, it automatically centers the world map, and CenterChanged event is raised.
I am not able to understand how ManipulationStarted, ManipulationDelta and ManipulationCompleted work.
the first time I drag, ManipulationStarted is not called, only ManipulationCompleted.
I could consider the first manipulation by user as being the 2nd time the CenterChanged is fired.
But this is a hack or a guess, I am not happy not having a good understanding how it works.
The Map control intercepts and handles Manipulation events and as such you don't get all of them. Remember, once routed events are marked at e.Handled=true they no longer bubble up.
Depending on your Scenario WP8 exposes the UseOptimizedManipulationRouting property which might prove useful. Setting UseOptimizedManipulationRouting=false causes Map, Pivot and other controls to not swallow events for nested controls.
If that doesn't help, have a look at the following Nokia Wiki article where the author ran into the same problem as you did and used Touch.FrameReported to get out of it # http://www.developer.nokia.com/Community/Wiki/Real-time_rotation_of_the_Windows_Phone_8_Map_Control
What I'm trying to do is very simple:
open the marker's info window only if the user has hovered on the marker for longer than x millisecond.
I can't find how to do this anywhere. I would appreciate a little code snippet to show me how to set this up!
The jQuery HoverIntent plugin might be able to help you
http://cherne.net/brian/resources/jquery.hoverIntent.html
hoverIntent is a plug-in that attempts to determine the user's intent... like a crystal ball, only with mouse movement! It works like (and was derived from) jQuery's built-in hover. However, instead of immediately calling the onMouseOver function, it waits until the user's mouse slows down enough before making the call.
Actually I finally found the solution to it on the Google Maps Group here: http://groups.google.com/group/google-maps-api/browse_thread/thread/73cf193d42a0bbfe/fa531a39b353d198?lnk=gst&q=open+hover#fa531a39b353d198
Best of luck to all the late night coders out there :)