Google Map V3 not centering, displays only part of map

Question

Hi,

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

Answer 1

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...