Google Maps does not update tiles while dragging

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.

Answers


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());
});

Could you perhaps buffer a larger map, and only show a portion in the viewport? EG load the map into a 1200x1200 div inside the 600x600 one, with overflow: hidden?


touch event are differs from mouse events, you can use touch event bindings like touch-start,touch-end,etc or try to use hammer.js

http://hammerjs.github.io/


I have same issue of not centring, and displays only part of map on map canvas. This line fixed my problem:

google.maps.event.trigger(map, 'resize');

Should not trigger it when mouseover, need have this line after map.initialize(); and then do setCenter and setZoom

map.setCenter(myLatlng);
map.setZoom(10);

try this it works

google.maps.event.addListenerOnce(map, 'tilesloaded', function () {
    google.maps.event.addListenerOnce(map, 'tilesloaded', function () {
        google.maps.event.trigger(map, 'resize');
    });
});

Have you tried using drag?

google.maps.event.addDomListener( map, 'drag', function(e) {
    //Code that runs consistantly everytime the user drags the map
    //load map tiles if not loaded yet
});

I've no experience coding for the Android version, but maybe this could be a step in the right direction?


//Create One Div as 'map_canvas'

    var htmldesign = '<table><tr><td>India</td></tr></table>';
    var locationdetails = 'India';
    var popdetail = 'India';
    var zoomper = 5;
    GetLocation(locationdetails, popdetail, zoomper);

    function GetLocation(address, popdetail, zoomper) {
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var latitude = results[0].geometry.location.lat();
                var longitude = results[0].geometry.location.lng();
                initialize(latitude, longitude, popdetail, zoomper);
            } else {
                initialize(21.0000, 78.8718, 'India', zoomper);
            }
        });
    };

    function initialize(lat, lon, popdetail, zoom) {

        var myLatlng = new google.maps.LatLng(lat, lon) // This is used to center the map to show our markers
        var mapOptions;
        mapOptions = {
            center: myLatlng,
            zoom: zoom,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            marker: true
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        var marker = new google.maps.Marker({
            animation: google.maps.Animation.BOUNCE,
            position: myLatlng
        });
        if (popdetail != 'India') {
            popdetail = '<div style="font-size:small;font-family:@Arial Unicode MS;border-radius: 6px;" class="phoneytext"> ' + popdetail + '</div>';
            infoBubble = new InfoBubble({
                map: map,
                content: popdetail,
                position: new google.maps.LatLng(lat, lon),
                shadowStyle: 1,
                padding: 10,
                backgroundColor: '#E6E6E6',
                borderRadius: 6,
                arrowSize: 30,
                borderWidth: 1,
                borderColor: '#2c2c2c',
                disableAutoPan: false,
                hideCloseButton: true,
                arrowPosition: 10,
                backgroundClassName: 'phoney',
                arrowStyle: 2
            });
            marker.setMap(map);
            infoBubble.open(map, marker);
        }
        else {
            marker.setMap(map);
        }
    }
</script>

i have answered this one before. check out this jsfiddle

http://jsfiddle.net/cQTdc/

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
  function initialize() {
    var map_canvas = document.getElementById('map_canvas');
    var map_options = {
      center: new google.maps.LatLng(51.372658, 1.354386),
      zoom:16,
      mapTypeId: google.maps.MapTypeId.HYBRID
    }
    var map = new google.maps.Map(map_canvas, map_options)
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
  #map_canvas {
    width: 500px;  
    height:400px;
    border:1px solid #888888;
    margin-bottom:20px;
    box-shadow: 2px 2px 2px #888888;
  }
</style>   
</head>
<body>
<div id="map_canvas"></div>
</body>

you will need to change here for the longitude and latitude for your location. You can get this from google maps. the part to change is "new google.maps.LatLng(51.372658, 1.354386)"


Need Your Help

pandas - how to access cell in pandas, equivalent of df[3,4] in R

indexing pandas dataframe

If I have a pandas DataFrame object, how do I simply access a cell? In R, assuming my data.frame is called df, I can access the 3rd row and 4th column by

CSRF state token does not match one provided FB PHP SDK 3.1.1 Oauth 2.0

facebook facebook-graph-api facebook-php-sdk oauth-2.0 csrf

My server logs show a "CSRF state token does not match one provided" error which seems to happen for almost every user. However, the users are created and/or authenticated and I am able to retrieve...