2011-02-02 7 views
2

質問はかなり自明です。マーカーがGoogleマップに追加されると、DOM内で実際にマーカー画像の周りに折り返されたdivのように見えます。それらのdivが一意に識別できる場合は、私にとってはもっと簡単になります。 getElementById()などのマップで個々のマーカーを取得できます。私はGoogleマップv3を使用しています。Googleマップにマーカーを追加したときに作成されるdivにIDを追加する方法はありますか?

ありがとうございました。

+0

APIのバージョンを使用していますか? – anon

+0

実際、もっと良い解決策があるかもしれないという根本的な要件を説明したのではないかと思う。 –

+0

他にもdojoのツールチップを割り当てることができるようにしたいと思います。 – phaedryx

答えて

4

はい、カスタムオーバーレイクラスを作成してカスタムマークアップを含めることができます。幸いにも誰かがすでにそのアイデアを持っていて、それをやった。 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> 
関連する問題