Google Maps停留在左上角-桌面解决方案不适用于移动设计

Question

I have had a problem with Google Maps where I am rendering the map inside a hidden DIV element. The map rendered but only the left top corner was showing, even after I move the map.

The solution to this as I found was to wait with rendering the map, and the points until user actually displays the map. I do this by having a interval counter iterating every half second to see if user clicked the button to open/display the element.

This works on desktop browser, but it doesn't solve the same problem for the mobile browsers. The corner is still stuck, and I'm not sure how to handle this from the mobile perspective.

<script type="text/javascript">
    var locations = [SOME DATA];

    var map;
    var bounds;

    function initialize() {
        var myLatlng = new google.maps.LatLng(0, 0);
        var mapOptions = {
            zoom: 5,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        bounds = new google.maps.LatLngBounds();

        for (var i = 0; i < locations.length; i++) {
            var entity = locations[i];
            var myLatLng = new google.maps.LatLng(entity[6], entity[7]);

            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                icon: pinBase + pin
            });

            if(entity[8] < 5) {
                bounds.extend(marker.position);
            }

            var infowindow = new google.maps.InfoWindow({});

            if(entity[5] == "0") {
                entity[5] = "N/A";
            }

            contentString = "<div class=\"mapBaloon\"><b>" + entity[0] + "</b><br />WWW: <a href=\"http://" + entity[2] + "\">http://" + entity[2] + "</a><br />City: " + entity[3] + "<br />State: " + entity[4] + "<br />Phone: " + entity[5] + "<br />Distance: " + entity[8] + " miles</div>";
            bindInfoWindow(marker, map, infowindow, contentString);
        }

        map.fitBounds(bounds);
    }

    function bindInfoWindow(marker, map, infowindow, html) {
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(html);
            infowindow.open(map, marker);
        });
    } 

    var myVar = setInterval(function() {
        google.maps.event.addDomListener(window, 'load', initialize);

        if($(".commArea2").is(":visible")) {
            clearInterval(myVar);
            google.maps.event.trigger(map, 'resize');
            map.fitBounds(bounds);
        }
    }, 500);         
</script>

Answer 1

I had a similar issue for mobile use. I called the initialize() function when the div was triggered to display.

$('#open_btn').bind('touchstart', function(event){
    initialize();
})

Answer 2

Off the top of my head there are a few possible causes which could lead to this. Because it worked on the desktop, and not mobile, I would suspect you've got a race condition. The desktop is faster, it is going to load the Google Maps Javascript faster. Your delay of 500 milliseconds doesn't sound like enough of a time to wait on a mobile device. BUT, you don't raise the setInterval. Just get rid of it.

Google provides the ability to add a callback to your "

https://developers.google.com/maps/documentation/javascript/examples/map-simple-async

The other issue I've encountered is that you really have to make sure there is an explicit width / height on the map before doing anything. Either setting the width/height properties, doing a "position:absolute" with all top/left/bottom/right defined, or something else. But if Maps API can't figure out the explicit width of the parent element, you will get a nice box in the corner. But like you said, it works in one place so likely this isn't the issue. Just make sure you're to using something in HTML or CSS that isn't supported on your mobile browser.