setCenter() and setPosition() NOT working for google maps displayed in a bootstraps modal - for smarty users

Question

I want to display a user's position on a google map in a bootstrap modal. **The map is being displayed but not putting infoWindows and markers to the required position ** The infoWindows sticks at the top-left of the map and the map is not having the correct center too.

I don't know what is wrong with the following codes:

<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}

I have follow many similar cases, such as:

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

Following those tutorials made me to add the following codes:

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

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

map.setCenter(pos1);

});

But it did NOT still worked for me.

Please for your help..

Answer 1

This is demo for showing model open and initialize google map with map.setCenter(latlng);

Note this is not the exact code in above but it is showing functionality

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();
 });