説明
通常のマーカーより高機能なものを提供したい場合には以下のPdMarkerを利用するとよいでしょう。マーカー上にマウスが乗ったときにマーカー画像を変更したり、リンク先／メッセージを表示することが手軽にできます。Internet ExplorerではttLeft, ttTopプロパティに表示位置を設定しないとエラーになることがあります。
http://www.pixeldevelopment.com/pdmarker.asp
サンプルコード [実行]
<!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>Sample</title>
<style type="text/css"><!--
.tips1 {
background-color:white;
font-weight:900;
border:1px solid black;
width:150px;
height:32px;
}
.tips2 {
background-color:white;
font-weight:900;
border:1px solid black;
width:200px;
height:50px;
}
--></style>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAasAJryKxWJnBFVJa487d9hTHGAxTVT7IRADYa-JdYz7xQ8IQZBSthgDZdggYpQHsmm6WYtHstQFfLA" type="text/javascript"></script>
<script type="text/javascript" src="pdmarker.js"></script>
<script type="text/javascript">
//<![CDATA[
window.onload = function() {
var lng = 137.94934630393982;
var lat = 36.111703232034756;
map = new GMap2(document.getElementById("gmap"));
map.setCenter(new GLatLng(lat, lng), 6);
map.addControl(new GLargeMapControl());
marker = new PdMarker(new GLatLng(lat, lng));
marker.setTooltip("<div class='tips1'>OpenSpace</div>");
var html = "<div class='tips2'><a href='http://www.openspc2.org'>OpenSpace</a>のページを表示します。</div>";
marker.ttLeft = 50;
marker.ttTop = 150;
marker.setDetailWinHTML(html);
marker.setHoverImage("highlight.gif");
map.addOverlay(marker);
}
//]]>
</script>
</head>
<body>
<div id="gmap" style="width: 500px; height: 500px"></div>
</body>
</html>