ブートストラップカルーセルスライド上のGoogleマップマーカーを移動

Question

ブートストラップカルーセルスライド変更時にマーカーを移動しようとしています。私は正常にマーカーでマップを生成し、関数を呼び出すためにスライドをバインドするのに成功しました。だからユーザーがアドレス上をスライドすると、Googleマップはその特定の場所のマーカーを表示するはずです。ここに私が試したものです：

jQuery('#myCarousel').bind('slide.bs.carousel', function (e) { 
       updateMarker(); 
      }); 

をしかし、それはそのupdateMarker()ドン」のようになります。

<script type="text/javascript" > 
    google.maps.event.addDomListener(window, 'load', myMap); 
     function myMap() { 
     var mapProp = { 
      center:new google.maps.LatLng(-27.4698,153.0251), 
      zoom:11, 
      styles: [{featureType:"landscape",stylers:[{saturation:-100},{lightness:65},{visibility:"on"}]},{featureType:"poi",stylers:[{saturation:-100},{lightness:51},{visibility:"simplified"}]},{featureType:"road.highway",stylers:[{saturation:-100}, 
      {visibility:"simplified"}]},{featureType:"road.arterial",stylers:[{saturation:-100},{lightness:30},{visibility:"on"}]},{featureType:"road.local",stylers:[{saturation:-100},{lightness:40},{visibility:"on"}]},{featureType:"transit",stylers:[{saturation:-100}, 
      {visibility:"simplified"}]},{featureType:"administrative.province",stylers:[{visibility:"off"}]/**/},{featureType:"administrative.locality",stylers:[{visibility:"off"}]},{featureType:"administrative.neighborhood",stylers:[{visibility:"on"} 
      ]/**/},{featureType:"water",elementType:"labels",stylers:[{visibility:"on"},{lightness:-25},{saturation:-100}]},{featureType:"water",elementType:"geometry",stylers:[{hue:"#ffff00"},{lightness:-25},{saturation:-97}]}] 
     }; 
     var turbot = new google.maps.LatLng(-27.456730,153.029497); 
     var marker = new google.maps.Marker({ 
      position:turbot, 
      animation:google.maps.Animation.BOUNCE, 
      icon: 'images/marker.png' 
     }); 




     var map = new google.maps.Map(document.getElementById("map"),mapProp); 
     marker.setMap(map); 

     } 
     function updateMarker(map, marker) { 

     marker.setPosition(new google.maps.LatLng(-33.8688, 151.2093)); 
     map.panTo(new google.maps.LatLng(-33.8688, 151.2093)); 

     } 

    </script> 

ここで私はupdateMarker()その後、次のようにスライド変化にupdateMarker()を呼び出そうとしましたとするmyMap()後に関数を宣言していますマップとマーカオブジェクトを知っている。それは言う：

***Uncaught TypeError: Cannot read property 'setPosition' of undefined 

ヘルプがありますか？私は間違った場所でその機能を宣言していると確信しています。任意の助けてください

Answer 1

mapと引数をupdateMarker関数に渡すことを忘れました。ここで

あなたは `updateMarker`呼び出すと、あなたは、パラメータ「マーカー」にいくつかの値を渡す方法を更新マーカ位置へカルーセルスライドの変更に

google.maps.event.addDomListener(window, 'load', initMap); 
 

 

 
function initMap() { 
 

 
    var locations = [ 
 
     { "lat": 40.7055646, "lng": -74.1184291 }, 
 
     { "lat": 37.7576948, "lng": -122.4727052 } 
 
    ]; 
 

 

 
    var mapProps = { 
 
     zoom: 4 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById("map"), mapProps); 
 

 
    var marker = new google.maps.Marker({ 
 
     animation: google.maps.Animation.BOUNCE 
 
    }); 
 
    marker.setMap(map); 
 
    updateMarker(map,marker,locations[0]); 
 

 

 

 

 
    $('#myCarousel').bind('slide.bs.carousel', function (e) { 
 
     var slideIdx = $(e.relatedTarget).index(); 
 
     updateMarker(map,marker, locations[slideIdx]); 
 
    }); 
 
} 
 

 

 

 
function updateMarker(map, marker, pos) { 
 
    marker.setPosition(new google.maps.LatLng(pos.lat, pos.lng)); 
 
    map.panTo(marker.getPosition()); 
 
}

.item { 
 
    height: 90px; 
 
} 
 

 
.carousel { 
 
    height: 60px; 
 
} 
 

 
#map { 
 
    height: 240px; 
 
}

<script type="text/javascript" src="//code.jquery.com/jquery-2.0.2.js"></script> 
 
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"> 
 
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 

 

 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
     <li data-target="#myCarousel" data-slide-to="1" class=""></li> 
 
    </ol> 
 
    <div class="carousel-inner"> 
 
     <div class="item active"> 
 
      <div class="container"> 
 
       <div class="carousel-caption"> 
 
        <h1>New York</h1> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="item"> 
 
      <div class="container"> 
 
       <div class="carousel-caption"> 
 
        <h1>San Francisco</h1> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <!-- Carousel controls --> 
 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> 
 
    <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> 
 

 
</div> 
 
<div id="map"></div>