Google Map V3 not centering, displays only part of map

Question

I'm developing a jQTouch-based app for the iPhone and part of it uses the Google Maps API (V3). I want to be able to pass the geolocation coordinates to the map and have it center the location with a marker. What I'm getting now is the map at the proper zoom level but the desired center-point appears in the upper-righthand corner. It's also showing only about a third of the map area (the rest is gray) and it behaves somewhat erratically when you pan or zoom. Here's the code:

var coords = { latitude : "35.510630", longitude : "-79.255374" };
var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
var myOptions = {
    zoom: 12,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($("#map_canvas").get(0), myOptions);
var marker = new google.maps.Marker({
    position: latlng, 
    map: map, 
});     

BTW: It looks and behaves the same on other platforms/browsers as well.

Thoughts?

Thanks in advance,

Mark

---

Added Here's a link that'll show exactly what's happening: Screen shot of iPhone emulator

Electrodynamic

Answer 1

I'm guessing you're using AJAX to display the map, or have the map hidden at some point and then display it based on an action?

In this case Google doesn't know the size of the map container and it will draw only part of the map, usually off-centered.

To fix this, resize the map, then re-center on your lat/lng. Something like this:

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

// Recenter the map now that it's been redrawn               
var reCenter = new google.maps.LatLng(yourLat, yourLng);
map.setCenter(reCenter);

Frierson

Answer 2

The solution for getting the map renedered correctly is to execute your Maps-Code on pageAnimationEnd-Event of jQTouch.

Example within Page #div:

    <div id="map_canvas" style="width:100%; height:100%; min-height:400px; background:#ccc;"></div>
    <script type="text/javascript"> 

    $('#map').bind('pageAnimationEnd', function() {

        var mapOptions = {
            zoom: 13,
            disableDefaultUI: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map =  new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                    var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)

                    var marker = new google.maps.Marker({
                        map: map,
                        draggable: false,
                        position: pos
                    });

                    map.setCenter(pos);
                }, function() {
                    console.log('Device Environment Capable of Geolocation but not Available - Geolocation failed');
                }
            );
        } else {
            console.log('Device Environment Not Capable of Geolocation - Geolocation failed');
        }
    });
    </script>

Though, i find myself having trouble to make the Map fullscreen-height. Any help in this case is appreciated. Note that im using DataZombies bars extension for fixed footer navigation.

Xenon

Answer 3

see my answer on Google Maps API 3 & jQTouch

basically, your #map_canvas div is not visible at the time you're constructing the map as the div it's in has been hidden by jqtouch. the api can't deal with this and get's the size wrong.

would be much easier if gmaps v3 allowed setting explicit size in the constructor (as v2 did).

anyway, delay constucting map until 'pageAnimationEnd'.

Gamopetalous

Answer 4

Make sure you have set the width/height of the canvas absolutely (i.e.)

$("#map_canvas").width(window.innerWidth).height(window.innerHeight - $('.toolbar').height());

Of course that assumes you have the jqtouch toolbar up and running...

Nonlegal

Thanks, Kris. The problem isn't one of getting the canvas to the proper size, its the actual map within the canvas. I've linked to a screen show above. – Electrodynamic

Hmmm, we'll I've used code almost exactly the same as that and my only problem was setting absolute size on the canvas. Can't help you with that one, then... – Nonlegal

Answer 5

Had the same exact issue loading a map with directions after loading content with AJAX and showing and hiding the map-canvas div.

You have to trigger the resize event, like Brett DeWoody says, but I found that my global variable went out of scope and I had to refer to them, i.e. the google map variable, INSIDE my functions explicitly on the window object. Here's what I have inside my directionsService response:

if (status == google.maps.DirectionsStatus.OK) {

    directionsDisplay.setDirections(response);

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

}

Gearbox

Answer 6

Brett DeWoody's solution worked, but as I'm showing the map in modal the only solution for me was to add setTimeout like this:

setTimeout(function() {
    google.maps.event.trigger(map, 'resize');
    var reCenter = new google.maps.LatLng(lat, lng);
    map.setCenter(reCenter);
}, 500);

After adding setTimeout the map renders and centers perfectly.

Schaab