2017-07-30 12 views
0

私のコードをご覧ください。マーカーをクリックすると、divがサイズ変更されます。 divをサイズ変更した後に地図を再入力したいと思います。しかし、divのサイズ変更イベントをキャプチャできないようです。 (注:div clickイベントはうまくキャプチャできます。なぜサイズ変更イベントが機能しないのかわかりません)divのサイズを変更したときにdivのGoogleマップを再入力

私は以下の方法で地図を再調査しようとしました。それはうまくいかなかった。私はどんな助けにも感謝します。ここで

 var currCenter = map.getCenter(); 
     google.maps.event.trigger(map, "resize"); 
     map.setCenter(currCenter); 

が私のコードです:

<body> 
<div id="map_display"></div> 
<script language="JavaScript"> 

    var map; 
    var uluru = {lat: 43.657, lng: -79.384}; 

    var myicon = 'https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png'; 

    function initMap() { 

     map = new google.maps.Map(document.getElementById("map_display"), { 
      center: uluru, 
      zoom: 14, 
      zoomControl: false 
     }); 

     var marker = new google.maps.Marker({ 
      position: uluru, 
      map: map, 
      title: "bike station", 
      icon: myicon 
     }); 

     marker.addListener('click', function() { 
      $("#map_display").animate({width: '75%'}); 
     }); 
    } 

</script> 
<script language="JavaScript" async defer 
     src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxx&callback=initMap"></script> 
</body> 

答えて

0
  1. トリガーアニメーション後のマップ上resizeイベントは、(マップのサイズが変更されたGoogleマップのJavaScript APIを伝え
  2. センターを設定します。マップの位置に戻る。

コードスニペット:

var map; 
 
var uluru = { 
 
    lat: 43.657, 
 
    lng: -79.384 
 
}; 
 

 
var myicon = 'https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png'; 
 

 
function initMap() { 
 

 
    map = new google.maps.Map(document.getElementById("map_display"), { 
 
    center: uluru, 
 
    zoom: 14, 
 
    zoomControl: false 
 
    }); 
 

 
    var marker = new google.maps.Marker({ 
 
    position: uluru, 
 
    map: map, 
 
    title: "bike station", 
 
    icon: myicon 
 
    }); 
 

 
    marker.addListener('click', function() { 
 
    $("#map_display").animate({ 
 
     width: '75%' 
 
    }, function() { 
 
     google.maps.event.trigger(map, 'resize'); 
 
     map.setCenter(marker.getPosition()); 
 
    }); 
 
    }); 
 
}
html, 
 
body, 
 
#map_display { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="map_display"></div> 
 
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

+0

それは動作します。それは役に立ちます。私はあなたの助けに感謝します。 –

関連する問題