javascriptで困っています。教えてください
jQueryMobileを使って地図を表示したいと思っています。
４か所にマーカーを表示させ、そのマーカーをクリックするとそれぞれのurlに飛ぶようにしたいのですが、うまくいきません。for文の中のgoogle.maps.event.addListener(myMarker,'click',function(event){location.href=data[i].url;});のところがおかしいのでしょうか？myMarkerを名前を変えながらgoogle.maps.event.addListenerをしていかないとだめなのでしょうか？教えてください。よろしくお願いします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Google マップの表示</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css">
<style type="text/css">
<!--
#map_canvas {
width:100%;
height:400px;
}
-->
</style>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script>
$(function() {
var data = new Array();//マーカー位置の緯度経度
data.push({position: new google.maps.LatLng(35.681382, 139.766084), content: '東京駅', url:'http://www.jreast.co.jp/estation/stations/1039.html'});
data.push({position: new google.maps.LatLng(34.809445,135.532408), content: '太陽の塔', url:'http://park.expo70.or.jp/'});
data.push({position: new google.maps.LatLng(43.062584,141.353627), content: '時計台', url:'http://www15.ocn.ne.jp/~tokeidai/'});
data.push({position: new google.maps.LatLng(26.694183,127.877963), content: '美ら海水族館', url:'http://oki-churaumi.jp/'});
var latlng = new google.maps.LatLng(36.449567,137.636719);
var myOptions = {
zoom: 4,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
for (i = 0; i < data.length; i++) {
var myMarker = new google.maps.Marker({
position: data[i].position,
map: map,
icon: "km.png"
});
google.maps.event.addListener(myMarker,'click',function(event){location.href=data[i].url;});
}
$('#map_content').live('pageshow',function(){
google.maps.event.trigger(map, 'resize');
map.setCenter(Latlng);
});
});
</script>
</head>
<body>
<div data-role="page" id="map">
<div data-role="header">
<h1>Google マップの表示</h1>
</div>
<div data-role="content" id="map_content">
<div id="map_canvas"></div>
</div>
<div data-role="footer">
<h4>© map</h4>
</div>
</div>
</body>
</html>
