Google maps api v3 no smooth drag

I started to implement my software using api v3 cards. Unfortunately, I found out that the v3 API has some serious problems that distract me from the bussiness license.

My clients use monitors with a resolution of HD, which is 1920x1080, and the card occupies 90% of the screen. Unfortunately, this is where the problem I'm talking about arises. When I click on the map and start dragging it, it’s not smooth , and it’s really annoying. All the fun goes away.

I tried several different scenarios using Windows XP, Windows 7, and Windows 8. The browsers I work with are the latest versions of Firefox, Chrome, and IE . Here are the results when I try to drag a map:

  • 320x240 low screen resolution: Firefox, Chrome, and IE handle it very well. It is impossible to notice that the drag is not smooth.
  • Small screen resolution of 320x240 with 10 polylines on the map: Chrome and IE handle it well, but if you have experience with API v2, you will notice the difference. Firefox is a nightmare, dragging and dropping isn't quite smooth.
  • The average screen resolution is 1024x768. Firefox - There is some intermittent lag. Chrome and IE are smooth drag and drop, but if you move the mouse, things get worse.
  • Average screen resolution of 1024x768 with 10 polylines on the map. Firefox is a nightmare. Chrome and IE - you begin to notice that there is some delay, but at the same time it looks pretty smooth.
  • High resolution screen 1920x1080. Firefox is a huge lag. Chrome and IE are slightly better, but there is still a noticeable lag. 6) High resolution screen 1920x1080 with polylines on the map: Firefox, Chrome ad IE - NIGHTMARE. Dragging a card is almost impossible.

Interesting Facts:

I think I described the problem as deeply as possible, and no matter how I tried to get around it, I could not find a solution.

I would be glad if someone shares their opinion on this issue.

PS Unfortunately, I do not have a key for v2, so I can’t create an example where you can view the map outside my local host, but I found a website that has a side-by-side comparison (v2 and v3). Try dragging cards to see VERY difference.

http://www.wolfpil.de/v2-v3-sidebyside.html

The resolution of the maps is very small and, most likely, inexperienced users may not see the difference, so I will give you separate links to the maps as well, and you just need to use firebug or a similar debuger to make the canvas resolution bigger. .

+6
source share
2 answers

The same thing here. What I noticed is that v3 fires a lot of events when panning the map, and the browser tends to suffocate (especially FF). I say this because I also used the Bing Maps API and the number of events per second for viewchange (the equivalent for center_changed on Google) is much less. They also provide the addThrottledHandler() method, with which you can reduce the number of events generated.

From what I can tell, Google Maps seems to center_changed one center_changed event for each mousemove event and before updating the map. Thus, you get a lot of generated events, but none of them are replicated on the screen; browser chokes on the map view screen, or it may be that the card is waiting until there are no changes, and only after that it will update the view.

Edit: if we do not allow some of the mousemove events mousemove reach Google Maps, the browser will not suppress the mousemove events and all other events that Google Maps emits from this event, for example center_changed , and the map will move smoothly.

To do this, add an event listener to the div #map (we can also add it to the body tag). We are adding an event for the capture phase. When the mouse moves around the screen, the body tag first receives the event, then our #map div, and then the Google Maps elements (div, tiles). This is the capture phase. This is followed by a phase of bubbles, in which the event returns from Google Map elements to our #map div, and then to the body tag. Typically, event handlers are registered for the bubbling phase, so if we register a handler for the capture phase, we can cancel the event, and therefore there will be no bubbling phase for this event. It also means that Google Maps will not receive the event.

You can increase the period and space parameters to kill more events. Killing too many events means that the card will begin to move from one position to another. Killing too little means that all events have reached Google Maps, and the browser will strangle the newly created events from Google Maps, and therefore the map will move from one position to another. Some middle ground works best.

Now, after all this, Google Maps will not be as smooth as Bing Maps. This is because Bing cards use inertia: when you move the card violently, the card will slowly follow the mouse, and then faster and faster. It really creates a very smooth panorama.

An interesting fact that I discovered is that Google Chrome and Opera / Chrommium will generate about one mousemove event per second, even if the mouse does not move! This code will also kill these events (because distance is zero for these events).

http://jsfiddle.net/uNm57/ (check the js console in Firefox, you will see some stopped events and one resolved event)

 <html> <head> <style type='text/css'> #map { position: absolute; width: 100%; height: 100%; margin: 20px; } </style> <script type='text/javascript'> var last = {time : new Date(), // last time we let an event pass. x : -100, // last x position af the event that passed. y : -100}; // last y position af the event that passed. var period = 100; // ms - don't let pass more than one event every 100ms. var space = 2; // px - let event pass if distance between the last and // current position is greater than 2 px. function init_map() { map_div = document.getElementById("map") // map var map_options = { center: new google.maps.LatLng(45.836454, 23.372497), zoom: 8 }; map = new google.maps.Map(document.getElementById("map"), map_options); // register event handler that will throttle the events. // "true" means we capture the event and so we get the event // before Google Maps gets it. So if we cancel the event, // Google Maps will never receive it. map_div.addEventListener("mousemove", throttle_events, true); }; function throttle_events(event) { var now = new Date(); var distance = Math.sqrt(Math.pow(event.clientX - last.x, 2) + Math.pow(event.clientY - last.y, 2)); var time = now.getTime() - last.time.getTime(); if (distance * time < space * period) { //event arrived too soon or mouse moved too little or both console.log("event stopped"); if (event.stopPropagation) { // W3C/addEventListener() event.stopPropagation(); } else { // Older IE. event.cancelBubble = true; }; } else { console.log("event allowed: " + now.getTime()); last.time = now; last.x = event.clientX; last.y = event.clientY; }; }; </script> </head> <body onload = "init_map()"> <div id="map"></div> </body> </html> 
+5
source

I encountered this problem only in mobile browsers. Drag and drop was smooth in desktop browsers, but when it came to mobile devices, when the user dragged the map, there was a delay. I spent about 3 hours on it and finally realized that the reason was the missing meta tag.

Basically, if you do not include this meta tag

<meta name="viewport" content="width=device-width, initial-scale=1">

the problem is coming. I feel incredibly stupid after realizing this after 3 hours or not adding the meta tag in the first place. But anyway, if someone else makes this mistake, I hope I saved a little of your time.

0
source

Source: https://habr.com/ru/post/945399/


All Articles