質問はかなり自明です。マーカーがGoogleマップに追加されると、DOM内で実際にマーカー画像の周りに折り返されたdivのように見えます。それらのdivが一意に識別できる場合は、私にとってはもっと簡単になります。 getElementById()などのマップで個々のマーカーを取得できます。私はGoogleマップv3を使用しています。Googleマップにマーカーを追加したときに作成されるdivにIDを追加する方法はありますか?
ありがとうございました。
質問はかなり自明です。マーカーがGoogleマップに追加されると、DOM内で実際にマーカー画像の周りに折り返されたdivのように見えます。それらのdivが一意に識別できる場合は、私にとってはもっと簡単になります。 getElementById()などのマップで個々のマーカーを取得できます。私はGoogleマップv3を使用しています。Googleマップにマーカーを追加したときに作成されるdivにIDを追加する方法はありますか?
ありがとうございました。
はい、カスタムオーバーレイクラスを作成してカスタムマークアップを含めることができます。幸いにも誰かがすでにそのアイデアを持っていて、それをやった。 Google Map Utility Libraries(ページの下部にある)のRichMarkerとStyledMarkerをチェックすると、カスタムマークアップ/ cssクラスをマーカーマークアップに配置することができます。
マーカーにツールチップを添付したい場合は、作成時にツールヒントのテキストなどのカスタムプロパティをマーカーに付加し、mouseoverイベントハンドラを追加してそのプロパティを読み取り、それ。
例:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps Markers</title>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
//your tooltips
msg = ['Yeah Right', 'oompa oompa','I feel good']
var marker;
function initialize() {
var chicago = new google.maps.LatLng(41.875696,-87.624207);
var myOptions = {
zoom: 11,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
marker = new google.maps.Marker({
map:map,
position: chicago,
title: "<h2>Sample Tooltip</h2>", //title can also be used for custom tooltips
myCustomIndex:2 //storing index of a tooltip
})
//if you have multiple markers pls read about event closures http://code.google.com/apis/maps/documentation/javascript/events.html#EventClosures
//attach an event to the marker
google.maps.event.addListener(marker, 'mouseover', function() {
//you could also use the title property of the marker to hold the text of the tooltop
showFakeTooltip(marker.title)
//or you could show it by accessing a custom property
showTooltip(marker.myCustomIndex);
});
}
function showFakeTooltip(title) {
$(".fakeTooltip").html(title);
}
function showTooltip(index) {
alert(msg[index])
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 900px;height: 600px;"></div>
<div class="fakeTooltip"></div>
</body>
</html>
APIのバージョンを使用していますか? – anon
実際、もっと良い解決策があるかもしれないという根本的な要件を説明したのではないかと思う。 –
他にもdojoのツールチップを割り当てることができるようにしたいと思います。 – phaedryx