Googleマップは、ブートストラップモードで左上中央のパスを開始します

Question

私はGoogleマップで作業しています。 Onclickイメージ、latlngを使ってルートパスを表示するためのブートストラップモーダルのGoogleマップ表示。すべての機能は正常に動作していますが、

地図の開始位置マーカーは、マップがロードされているときにマーカ位置を中心にしたいと考えています。これはちょうど画像あたりです。開始点は左上隅にあります。私は非常に多くの例をチェックしましたが、すべて私のコードで動作していません。

はまた、私は、サイズ変更トリガ機能を使用してみました。

google.maps.event.trigger(map, 'resize'); 

map = new google.maps.Map(document.getElementById("map_canvas"), { 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

HTML

<a href="#mapModal" data-toggle="modal">Click</a> 

モーダルとスクリプトは

<div id="mapModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true"> 
     <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
        <h4 class="modal-title" id="gridModalLabel">Map Display</h4> 
       </div> 
       <div class="modal-body"> 
        <div class="container-fluid bd-example-row"> 
         <div class="row"> 

          <div id="map_polyline" style="width: 100%; height: 655px;"></div> 

          <script type="text/javascript"> 
           function initialize() { 

            var mapProp = new google.maps.Map(document.getElementById('map_polyline'), { 
             zoom: 15, 
             maxZoom: 30, 
             minZoom: 1, 
             streetViewControl: false, 
             center: new google.maps.LatLng(23.01780,72.53076), 
             mapTypeId: google.maps.MapTypeId.ROADMAP 
            }); 

            var myTrip=new Array(); 

            myTrip.push(new google.maps.LatLng(23.01780,72.53076)); 
            myTrip.push(new google.maps.LatLng(23.01846,72.52987)); 
            myTrip.push(new google.maps.LatLng(23.01909,72.53054)); 
            myTrip.push(new google.maps.LatLng(23.01954,72.52991)); 
            myTrip.push(new google.maps.LatLng(23.02060,72.53064)); 
            myTrip.push(new google.maps.LatLng(23.02125,72.53006)); 
            myTrip.push(new google.maps.LatLng(23.02237,72.53076)); 
            myTrip.push(new google.maps.LatLng(23.02306,72.52988)); 
            myTrip.push(new google.maps.LatLng(23.02438,72.53021)); 
            myTrip.push(new google.maps.LatLng(23.02467,72.52899)); 
            myTrip.push(new google.maps.LatLng(23.02486,72.52769)); 
            myTrip.push(new google.maps.LatLng(23.02555,72.52695)); 
            myTrip.push(new google.maps.LatLng(23.02616,72.52656)); 
            myTrip.push(new google.maps.LatLng(23.02704,72.52641)); 
            myTrip.push(new google.maps.LatLng(23.02868,72.52664)); 
            myTrip.push(new google.maps.LatLng(23.03068,72.52700)); 
            myTrip.push(new google.maps.LatLng(23.03173,72.52555)); 

            var flightPath=new google.maps.Polyline({ 
             path:myTrip, 
             strokeColor:"#0000FF", 
             strokeOpacity:0.8, 
             strokeWeight:2 
            }); 
            flightPath.setMap(mapProp); 
            google.maps.event.trigger(mapProp, 'resize'); 
           } 

           google.maps.event.addDomListener(window, 'load', initialize); 
          </script> 
         </div> 
        </div> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 1

てみthis

$('#myMapModal').on('show.bs.modal', function() { 
    resizeMap(); 
}) 

function resizeMap() { 
    if(typeof map =="undefined") return; 
    setTimeout(function(){resizingMap();} , 400); 
} 

function resizingMap() { 
    if(typeof map =="undefined") return; 
    var center = map.getCenter(); 
    google.maps.event.trigger(map, "resize"); 
    map.setCenter(center); 
}