Problem with Google Map in WebView

Hi all,

I try to use Google Maps Javascript API in the HTML file and show it on QML WebView to show the map with specific coordinate. But it just displayed the constants size, I can't interact with it (e.g. Click, Zoom...), like below.
http://lh5.googleusercontent.com/-uE.../googlemap.PNG

This javascript code works fine on Symbian^3, but not with Symbian^1. I'm using N97 mini. Is there something wrong with it?

The html file is like below:

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Sample Widget</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" type="text/javascript" src="basic.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"> 
	var map;	
    var latlng = new google.maps.LatLng(54, -4.57);
	var directionDisplay = new google.maps.DirectionRenderer();
  function initialize() {
    var myOptions = { 
      zoom: 5, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP,	  
		panControl: false,
		zoomControl: false,
		scaleControl: false,
		mapTypeControl: false,
		streetViewControl: false
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	directionDisplay.setMap(map);
  }
</script>
 
<body onLoad="initialize()" BGCOLOR="#FFFFFF">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>