8

問題: Google マップの情報ウィンドウ内にスライダー (カルーセル) を統合しようとしています。

1. スライダーの JQuery コード:

<head>
...
    <script src="js/jquery.anythingslider.js"></script>
    <script>
       // Set up Sliders
        // **************         
        $(function(){
            $('#mySlider').anythingSlider({
                mode                : 'f',   // fade mode - new in v1.8!
                resizeContents      : false, // If true, solitary images/objects in the panel will expand to fit the viewport
                expand              : true,
                navigationSize      : 3,     // Set this to the maximum number of visible navigation tabs; false to disable

                onSlideBegin: function(e,slider) {
                    // keep the current navigation tab in view
                    slider.navWindow( slider.targetPage );
                }
            });
        });
    </script>
  ...
 </head>

2. HTML コード。これは、スライダーが通常の HTML ページ内でどのように機能するかです。

 <div style="width:450px;height:150px;">        
    <ul id="mySlider">  <!-- id corresponds to id used in Jquery code  -->

       <li>
         Content of Slide 1
       </li>
       <li>
          Content of Slide 2
       </li>
       <li>
          Content of slide 3
       </li>

     </ul>
  </div>

今、私は JavaScript の経験があまりないので、情報ウィンドウ内で jquery コードにアクセスできるようにするにはどうすればよいですか。言い換えれば、スライダーコードをどこに置くべきですか?

編集： これは私がこれまでに試したことですが、運がありません

(function() {  
// Defining variables that need to be available to some functions
var map, infoWindow;
window.onload = function() {
    // Creating a map
    var options = {
        zoom: 3,
        center: new google.maps.LatLng(37.09, -95.71),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map'), options);
    // Adding a marker to the map
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(40.756054, -73.986951),
        map: map,
        title: 'Click me'
    });
    google.maps.event.addListener(marker, 'click', function() {


        // add some content to userLi1 
        var userLi1 = '<li>Some awesome content for the 1st list item</li>';

        // add some content userLi2
        var userLi2 = '<li>Some awesome content for the 2nd list item</li>'


        // Check to see if an InfoWindow already exists
        if (!infoWindow) {
            infoWindow = new google.maps.InfoWindow();

        }


        // Setting the content of the InfoWindow to the detail map
        //infoWindow.setContent(detailDiv);

        infoWindow.setContent('<div style = "width:450px;height:150px;"><ul id="mySlider">' + userLi1 + userLi2 + '</ul></div>');

        // Opening the InfoWindow
        infoWindow.open(map, marker);   

    });

    // initiate slider here
    $('#mySlider').anythingSlider({
        mode                : 'f',   // fade mode - new in v1.8!
        resizeContents      : false, // If true, solitary images/objects in the panel will expand to fit the viewport
        expand              : true,
        navigationSize      : 3,     // Set this to the maximum number of visible navigation tabs; false to disable

        onSlideBegin: function(e,slider) {
            // keep the current navigation tab in view
            slider.navWindow( slider.targetPage );
        }
    });
};
})();

コードを実行すると、Jquery がまったくトリガーされません。

編集 2:解決策 McMaster コードを使用し、関連する jquery コードを次のようにラップすることで問題を解決しました

 google.maps.event.addListener(infowindow, 'domready', function(){
 });

したがって、これはコード全体です。

 $(document).ready(function() {   // runs jquery when document is ready

function initialize() {
    var mapDiv = document.getElementById('map');
    map = new google.maps.Map(mapDiv, {
        zoom: 3,
        center: new google.maps.LatLng(37.09, -95.71),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    infowindow = new google.maps.InfoWindow({
        content: "holding..."
    });

    // looks for map, when tiles are loaded, fire function addmarkers                 
    google.maps.event.addListenerOnce(map, 'tilesloaded', addMarkers);

}

function addMarkers() {
    var lat =37.09;
    var lng = -95-71;
    var latLng = new google.maps.LatLng(
        lat,
        lng);
    var marker = new google.maps.Marker({
        position: latLng,
        map: map
    });
    // add some content to userLi1
    var userLi1 = '<li>Some awesome content for the 1st list item</li>';

    // add some content userLi2
    var userLi2 = '<li>Some awesome content for the 2nd list item</li>'
    // set marker content
    marker.html = '<div style = "width:450px;height:150px;"><ul id="mySlider">' + userLi1 + userLi2 + '</ul></div>';
    // add listener
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(marker.html);
        infowindow.open(map, marker);
    });

}

initialize();      
google.maps.event.addListener(infowindow, 'domready', function(){
    // initiate slider here
    $('#mySlider').anythingSlider({
        mode                : 'f',   // fade mode - new in v1.8!
        resizeContents      : false, // If true, solitary images/objects in the panel will expand to fit the viewport
        expand              : true,
        navigationSize      : 3,     // Set this to the maximum number of visible navigation tabs; false to disable

        onSlideBegin: function(e,slider) {
            // keep the current navigation tab in view
            slider.navWindow( slider.targetPage );
        }
    });
}); 


});
4

1 に答える 1

5

あなたは実際にドキュメント上で直接DOM要素を作成しています

次のようなものを使用する必要があります。

infoWindow.setContent('<div id="mySlider"><ul><li>' + userLi1 + '</li><li>' + userLi2 + '</li></ul></div>');

編集：

これは、ニーズに合わせて私のプロジェクトの 1 つから変更された、完全に機能するスクリプトです。

$(document).ready(function() {   // runs jquery when document is ready

     function initialize() {
            var mapDiv = document.getElementById('map');
            map = new google.maps.Map(mapDiv, {
                 zoom: 3,
                center: new google.maps.LatLng(37.09, -95.71),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            infowindow = new google.maps.InfoWindow({
                content: "holding..."
            });

           // looks for map, when tiles are loaded, fire function addmarkers                 
            google.maps.event.addListenerOnce(map, 'tilesloaded', addMarkers);

          }

          function addMarkers() {
                var lat =37.09;
                var lng = -95-71;
              var latLng = new google.maps.LatLng(
                                                lat,
                                                lng);
              var marker = new google.maps.Marker({
                position: latLng,
                map: map
              });
             // add some content to userLi1 
            var userLi1 = '<li>Some awesome content for the 1st list item</li>';

            // add some content userLi2
            var userLi2 = '<li>Some awesome content for the 2nd list item</li>'
              // set marker content
              marker.html = '<div style = "width:450px;height:150px;"><ul id="slider2">' + userLi1 + userLi2 + '</ul></div>';
             // add listener 
             google.maps.event.addListener(marker, 'click', function() {
                    infowindow.setContent(marker.html);
                  infowindow.open(map, marker);
                });

          }

          initialize();      
          // initiate slider here
        $('#mySlider').anythingSlider({
            mode                : 'f',   // fade mode - new in v1.8!
            resizeContents      : false, // If true, solitary images/objects in the panel will expand to fit the viewport
            expand              : true,
            navigationSize      : 3,     // Set this to the maximum number of visible navigation tabs; false to disable

            onSlideBegin: function(e,slider) {
                // keep the current navigation tab in view
                slider.navWindow( slider.targetPage );
            }
        });

});​
于 2012-09-17T18:51:45.637 に答える