Google Maps does not update tiles while dragging

Question

I have to use the google maps javascript api in a webview. The problem is that while dragging the map the missing tiles won't be loaded. In a browser on my desktop pc I can't get the same behaviour but loading the tiles while dragging the map around. In the picture I hold the map and nothing happens till I release my finger.

I have found an issue (not perfectly fitting on my problem but kinda close) in the gmaps bugtracker and tried all the solutions mentioned: https://code.google.com/p/gmaps-api-issues/issues/detail?id=1448

This is what I've tried so far:

// Setting the maps div container to a fixed size #map-canvas {     height: 600px;     width: 600px; }  // Emit resize trigger on mouse move $(document).ready(function () {     $("#map-canvas").mousemove(function (event) {         setTimeout(function () {              google.maps.event.trigger(map,'resize');             map.setZoom(map.getZoom());         }, 100);     }); });  // loading Google Maps API after document has been loaded function loadScript() {   var script = document.createElement('script');   script.type = 'text/javascript';   script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +       'callback=initialize';   document.body.appendChild(script); } window.onload = loadScript; 

The code is working and the mousemove event gets fired. I am using android:minSdkVersion="19" on my nexus 10 device.

Answer 1

Try this... This problem raise only when map get resized.

google.maps.event.addDomListener( map, 'drag', function(e) {     google.maps.event.trigger(map,'resize');     map.setZoom(map.getZoom()); });