[webkit-help] 2nd load of web view causes Googlemaps js to fail

Fri Feb 11 02:13:35 PST 2011

Hi,

I have a Cocoa application that presents a list of records in the master view, each of which represents a Google map.

When the user clicks on a row in the master view a Google map is loaded in a webView (detail view).

The Googlemap has a draggable marker, and a javascript observer registered on the "mouseup" event.

The HTML page is built up from an NSString as follows:

========
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
      	<title></title>
	<style type="text/css">
		html { height: 100%; width: 100%}
		body { height: 100%; width: 100%; margin: 0px; padding: 0px }
		#map { height: 100%; width: 100%; margin: 0px; padding: 0px }
	</style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">

var map;
var marker;
var infoWindow;

function load()
{
	var latlng = new google.maps.LatLng(LAT, LONG);  

	var mapOptions = {
		zoom: 13,
		mapTypeId: google.maps.MapTypeId.HYBRID,
		center: latlng,
		streetViewControl: false,
		mapTypeControl: true,
		mapTypeControlOptions:
		{
			style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
			position: google.maps.ControlPosition.TOP_RIGHT
		},
		navigationControl: true,
		navigationControlOptions:
		{
			style: google.maps.NavigationControlStyle.ZOOM_PAN,
			position: google.maps.ControlPosition.TOP_LEFT
		}
	};

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

	marker = new google.maps.Marker({
		map:map,
		draggable:true,
		position: latlng,
		title:"title"
		});

	google.maps.event.addListener(marker, 'mouseup', function(){
		var markerLatLng = marker.getPosition();
		window.CocoaClass.updateCoordinateWithLatitude_Longitude_(markerLatLng.lat(), markerLatLng.lng());
	});
};

    </script>
  </head>

<body onload="load()" onunload="Gunload()">
	<div id="map"><br/></div>
</body>

</html>
========

- and then loaded using:

[[[self mapView] mainFrame] loadHTMLString:htmlString baseURL:nil];

- in the Cocoa view controller class.

This all works fine for the first map.

However, when the user clicks on a second (or subsequent) row and the map gets loaded in the detail view the Googlemaps javascript callback doesn't work properly. What happens is that the event fires, but the marker position is offset from the mouse cursor.

Here's a screencast to show you what is happening:  http://dl.dropbox.com/u/160638/webkit.mov

The gap between the cursor and the marker after I've moved it looks roughly like double the distance I initially moved the marker.

I'm very new to WebKit. I'm wondering if when I load the second page into the detail view it is being loaded as a new frame, and then I have two frames loaded each with the same listener and that is clashing in some way? I can't work out why the event works fine the first load, but not subsequent loads.

FYI, if I comment out the listener code, dragging the marker works fine.

Any suggestions you could make would be very much appreciated.

Regards

Darren.