Google Maps v3 and jQTouch

gistfile1.phtml

<div id="map-detail" class="notransform">

	<div class="toolbar">
		<h1>Map Details</h1>
		<a href="#" class="back">Back</a>
	</div>

	<div id="map-container" class="notransform">
		<div id="map-info">
			<div>	
				<h2>Building Title</h2>
				<p class="address">
				Line 1<br />
				Line 2<br />
				Line 3
				</p>
			</div>
		</div>

		<div id="map-overflow" style="overflow: hidden; padding: 0; border: 0;" class="notransform">
			<div id="map_canvas" style="margin-left: -20px; margin-top: -20px;" class="notransform"></div>
		</div>

		<script type="text/javascript">
			function map_initialize() {	

				// when first loading the window make sure map_canvas & map are set to appropriate
				// dimensions based on the iphone's orientation when loading the map
				if ((window.orientation == (-90)) || (window.orientation == (90))) {
					var width = 520; var height = 285;
					$('#map_canvas').css("width",width+"px");
					$('#map_canvas').css("height",height+"px");
					$('#map-overflow').css("width",(width-40)+"px");
					$('#map-overflow').css("height",(height-10)+"px");
				} else {
					var width = 360; var height = 435;
					$('#map_canvas').css("width",width+"px");
					$('#map_canvas').css("height",height+"px");
					$('#map-overflow').css("width",(width-40)+"px");
					$('#map-overflow').css("height",(height-10)+"px");
				}

				// create the map
				var latlng = new google.maps.LatLng(['latitude'],['longitude']);
				var myOptions = {
					zoom: 16,
					center: latlng,
					disableDefaultUI: true,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				};

				map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

				// load the marker, BUG: the shadow doesn't line up properly
				var image = new google.maps.MarkerImage("/path/to/marker.png",new google.maps.Size(32, 37));
				var shadowi = new google.maps.MarkerImage("/path/to/shadow.png",new google.maps.Size(51, 37));
				var myLatLng = new google.maps.LatLng(['latitude'],['longitude']);
				var beachMarker = new google.maps.Marker({
														position: myLatLng,
														map: map,
														shadow: shadowi,
														icon: image
													});

				// fixing a bug with setCenter which doesn't seem to do anything on second load
				if (map_loaded == true) {
					map.panBy(-180,-247); 
				} else {
					map_loaded = true;
				}

				return map;
			}
		</script>
	</div>
</div>