2

私はjavascriptにかなり慣れていないので、学習しながら学習しているので、これが単純な場合は申し訳ありません。

私が持っているのは、マップ上に表示されている一連のマーカーです。これらは配列からロードされ、関数とともに表示されます。私がやりたいのは、クリックされたマーカーに関連する特定のdivポップアップを作成することです。別のマーカーがクリックされると、その前のdivが閉じ、新しいdivが開きます。

これは私が今までやってきたことの概念を得るために私が持っているものです。

「「マーカーA」がクリックされたら「divA」を開き、「マーカーA」が開いているときに「マーカーB」がクリックされたら「DivA」を閉じる関数を作成したいと思います。 'そして'DivB'を開きます。

これが私のJavaScriptです。

 var markers = [
['Saving Grace', 43.652659,-79.412284],
['Starving Artist', 43.660281,-79.443570]
];

  // Standard google maps function
    function initialize() {
    var myLatlng = new google.maps.LatLng(43.655826,-79.383116);
    var image = 'http://www.brunchtoronto.com/images/marker-blue.png';
    var myOptions = {
        zoom: 13,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


    // Current Toggle function which displays Feature Box when marker is clicked
    function opendiv() {
        var ele = document.getElementById("div-feature");
                    ele.style.display = "block";                            
            } 


    var infowindow = new google.maps.InfoWindow();
    var marker, i;


    for (i = 0; i < markers.length; i++) {  
    marker = new google.maps.Marker({
    position: new google.maps.LatLng(markers[i][1], markers[i][2]),
    map: map,
    icon: image
    });


    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            map.panTo(marker.getPosition());
            infowindow.setContent(markers[i][0]);
            infowindow.open(map, marker);
            opendiv();
            }   
        })(marker, i));
    }



}

そして私のHTML

<!-- Featued Window -->

    <div class="featured_window" id="div-feature" style="display: none">

                Stuff to display

    </div>

<!-- Saving Grace -->

    <div class="featured_window" id="div-sg" style="display: none">

        Stuff to display

    </div>
4

1 に答える 1

1

マーカーとdivの間に関係がある必要がありますが、現在は関係がありません。

このようなIDの代わりに、div-sgたとえばdiv0、番号はマーカーのインデックスを示します。

次に、divにアクセスするのに問題はありません。

   //access the node
 var content=document.getElementById('div'+i)
   //create a copy of the node
 .cloneNode(true);
   //remove the id to avoid conflicts
 content.removeAttribute('id');
   //make it visible  
 content.style.display='block';
   //apply the content  and open the infoWindow 
 infowindow.setContent(content);
 infowindow.open(map, marker);
于 2013-01-17T21:43:19.123 に答える