Googleマップのマーカーがモーダルポップアップの中央に表示されない

Question

モーダルポップアップでGoogleマップを表示するには、以下のコードを使用しています。しかし、Google Mapマーカーはモーダルの中央に表示されません。それは常に左隅に隠されています。

<script> 
    var geocoder; 
    var map; 
    function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(0.0, 0.0); 
    var mapOptions = { 
     zoom: 14, 
     center: new google.maps.LatLng(0.0, 0.0), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
    } 


    function codeAddress(i) {  

    var address = document.getElementById('address'+i).value; 
    geocoder.geocode({ 'address': address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
     map.setCenter(results[0].geometry.location); 
     var marker = new google.maps.Marker({ 
      map: map, 
      zoom:10, 
      position: results[0].geometry.location 
     }); 

     google.maps.event.addListenerOnce(map, 'idle', function() { 
     google.maps.event.trigger(map, 'resize'); 
     }); 

     } else { 
     alert('Geocode was not successful for the following reason: ' + status); 
     } 
    }); 

    } 

</script> 

またsee the code here

Answer 1

これもGoogle map modal issueに関連している可能性が。

@SSRで与えsolutionとしてモーダルイベントハンドラを使用してみてください：

ブートストラップモーダル地図問題解決方法：この関連SO postで

$(document).ready(function(){ 
    $('#locationMap').on('shown.bs.modal', function(){ 
    google.maps.event.trigger(map, 'resize'); 
    map.setCenter(new google.maps.LatLng(-33.8688, 151.2195)); 
    }); 
}); 

ソリューションも役立つかもしれません。