setCenter() et setPosition() ne fonctionne pas pour google maps affiché dans un bootstraps modal - pour les utilisateurs smarty

Question

Je souhaite afficher la position d'un utilisateur sur une carte google dans un modal bootstrap. ** La carte est affichée mais ne place pas les infoWindows et les marqueurs dans la position requise ** Les fenêtres infoWindows sont placées en haut à gauche de la carte et la carte n'a pas le bon centre.

Je ne sais pas ce qui ne va pas avec les codes suivants:

<div class="modal-header"> 
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
<h5 class="modal-title"> 
    <a href="{$system['system_url']}/{$__user['user_name']}"> 
     <img class="data-avatar" src="{$__user['user_picture']}" alt="{$__user['user_fullname']}"> 
    </a> 

</h5> 
</div> 
<div class="modal-body"> 
<button id="startMap" class="hidden js_load-map" latone="{$__user['location_lat']}" lattwo="{$user->_data['location_lat']}" lngone="{$__user['location_long']}" lngtwo="{$user->_data['location_long']}" uone="{$__user['user_fullname']}" utwo="{$user->_data['user_fullname']}"></button> 
<div id="map" style="height:600px;"></div> 

</div> 
{literal} 
<script async defer 
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBoVJsENlIwPErOfpORfos-ktpIwvzAYw8&callback=initMap"> 
</script> 
<script type="text/javascript"> 

    _this = $("#startMap"); 
    latone = _this.attr('latone'); 
    lattwo = _this.attr('lattwo'); 
    lngone = _this.attr('lngone'); 
    lngtwo = _this.attr('lngtwo'); 
    uone = _this.attr('uone'); 
    utwo = _this.attr('utwo'); 
    var map; 
    var lat1 = latone; 
     var lng1 = lngone; 
     var pos1 = new google.maps.LatLng(lat1,lng1); 
    var lat2 = lattwo; 
     var lng2 = lngtwo; 
     // alert(lat2+' and '+lng2); 
     var pos2 = new google.maps.LatLng(lat2,lng2); 



function initMap() { 

     map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: -34.397, lng: 150.644}, 
     zoom: 150, 
     panControl:true, 
     zoomControl:true, 
     mapTypeControl:true, 
     scaleControl:true, 
     streetViewControl:true, 
     overviewMapControl:true, 
     rotateControl:true, 
     mapTypeId:google.maps.MapTypeId.HYBRID 
    }); 
    var infoWindow1 = new google.maps.InfoWindow({map: map}); 
    var infoWindow2 = new google.maps.InfoWindow({map: map}); 





     infoWindow1.setPosition(pos1); 
      infoWindow1.setContent(uone); 

      infoWindow2.setPosition(pos2); 
      infoWindow2.setContent(utwo); 



      // var marker1=new google.maps.Marker({ 

      // position:pos1, 
      // // icon:'1.jpg', 
      // animation:google.maps.Animation.BOUNCE 
      // }); 

      // marker1.setMap(map); 

      // var marker2=new google.maps.Marker({ 

      // position:pos2, 
      // // icon:'2.jpg', 
      // animation:google.maps.Animation.BOUNCE 
      // }); 

      // marker2.setMap(map); 



    } 
    $('#modal').on('shown.bs.modal', function() { 
      google.maps.event.trigger(map, 'resize'); 

      map.setCenter(pos1); 
     }); 

</script> 
{/literal} 

Je suivre de nombreux cas similaires, tels que:

• Load google map dynamicly in twitter bootstrap modal
• Bootstrap modal inside google map is not working

Suite à ces tutoriels m'a fait de l'annonce d les codes suivants:.

$ ('# modal') sur ('shown.bs.modal', function() {

google.maps.event.trigger (carte, « redimensionner ');

map.setCenter (pos1);

});

mais il n'a pas encore travaillé pour moi.

S'il vous plaît pour votre aide ..

Answer 1

Ceci est démonstration pour montrer le modèle ouvert et initialiser carte google avec map.setCenter(latlng);

Remarque ce n'est pas le code exact ci-dessus, mais il montre la fonctionnalité

Fiddle

var geocoder; 

var map; 

function initialize() { 

    geocoder = new google.maps.Geocoder(); 

    var address = "new delhi"; 

    geocoder.geocode({ 
    'address': address 
    }, function(results, status) { 

    if (status == google.maps.GeocoderStatus.OK) { 

     var latitude = results[0].geometry.location.lat(); 

     var longitude = results[0].geometry.location.lng(); 
     var latlng = new google.maps.LatLng(latitude, longitude); 

     var mapOptions = { 

     zoom: 8, 

     center: latlng, 

     mapTypeId: google.maps.MapTypeId.ROADMAP 

     } 

     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

     var latlng = new google.maps.LatLng(latitude, longitude); 
     map.setCenter(latlng); //setCenter 

     var marker = new google.maps.Marker({ 

     map: map, 

     position: latlng, 
     title: 'Hello World!' 

     }); 
     marker.setPosition(latlng); //setPosition 
    } 

    }); 
} 
//google.maps.event.addDomListener(window, 'load', initialize); 
$('#myModal').on('shown.bs.modal', function() { 
    initialize(); 
});