Google Map （外部から情報ウィンドウ開く
Google Maps API v3 において「地図外のHTMLから地図内の情報ウィンドウを開く」ということをやろうとしているのですが、どうにもうまくいきません。
下記コードにおいて、地図外にある「あいうえお商店」や「かきくけこ不動産」をクリックした際、地図内に情報ウィンドウが開くようにするためにはどのようにすればよいでしょうか。
すでに丸3日間悩んでおり、私の力ではどうにもならないと判断したため、皆さまのお力をお借りすることにしました。大変恐れ入りますが、貧弱な知識の私にどうか知恵を与えてやって下さい。どうぞよろしくお願い致します。
深みにはまって抜け出せないコードは以下の通りです。
----------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>test</title>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var currentInfoWindow = null; //最後に開いた情報ウィンドウを記憶
function initialize() {
var latlng = new google.maps.LatLng(35.67105, 139.743624);
var opts = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), opts);
// ***************１件目のデータ***************
var m_latlng1 = new google.maps.LatLng(35.675224, 139.737914);
var marker1 = new google.maps.Marker({position: m_latlng1,map: map,icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|3CFFF8|000000',title: '港区赤坂3-3-3'
});
var contentString1= '</p>あいうえお商店</p></div>';
var infowindow1 = new google.maps.InfoWindow({content: contentString1 });
// ***************１件目のデータ***************
// ***************２件目のデータ***************
var m_latlng2 = new google.maps.LatLng(35.670772, 139.733875);
var marker2 = new google.maps.Marker({position: m_latlng2,map: map,icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|3CFFF8|000000',title: '港区赤坂5-5-5'
});
var contentString2= '</p>かきくけこ不動産</p></div>';
var infowindow2 = new google.maps.InfoWindow({content: contentString2 });
// ***************２件目のデータ***************
google.maps.event.addListener(marker1 , 'click', function()
{ if (currentInfoWindow) {
currentInfoWindow.close();
}
infowindow1.open(map,marker1);
currentInfoWindow = infowindow1;
});
google.maps.event.addListener(marker2 , 'click', function()
{ if (currentInfoWindow) {
currentInfoWindow.close();
}
infowindow2.open(map,marker2);
currentInfoWindow = infowindow2;
});
}
function myclick(idx)
{
google.maps.event.trigger(marker[idx],'click');
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 700px; height: 500px"></div>
1 <a href="javascript:myclick(0)">あいうえお商店</a></p>
2 <a href="javascript:myclick(1)">かきくけこ不動産</a></p>
</body>
</html>
----------------------------------------------------------------
大変恐れ入りますが、どうぞよろしくお願い致します。
お礼
ご回答ありがとうございました。 ページの全体の仕切り（mainエリア、left、rightエリアなど）をテーブルで仕切ってあります。 マップのみをテーブルで囲ってはいないです。 しかし今からそれを変更することはで出来ないのでjsを使わずiframeにしたら閲覧できるようになりました。 googlemapsAPIは英語なので利用規約や説明書を読めませんし大変です。。