javascript - Using Geolocation to load a map in a bootstrap modal, the marker is not centered -

i trying center marker in map loaded in bootstrap modal based on geolocation getting current location of user. rest has been explained in fiddle ...
js fiddle

html:

<a href="#locate" data-toggle="modal">open modal</a> <div id="locate" class="modal fade" role="dialog">   <div class="modal-dialog modal-lg">                                    <div class="modal-content">       <div class="modal-header">         <button type="button" class="close" data-dismiss="modal">&times;</button>         <h4 class="modal-title-contact">my location</h4>       </div>       <div class="modal-body">                       <div id="map"></div>       </div>     </div>                             </div> </div> 

javascript:

function initmap(){    var loc = {lat:0,lng:0};   if (navigator.geolocation){   navigator.geolocation.getcurrentposition(showposition);   }   else {   alert("geolocation not supported browser.");   }  function showposition(position){    loc.lat=position.coords.latitude;   loc.lng=position.coords.longitude;   var geocoder = new google.maps.geocoder();   var latlng = new google.maps.latlng(loc.lat, loc.lng);   console.log(latlng);   if (geocoder) {     geocoder.geocode({ 'latlng': latlng}, function (results, status) {     if (status == google.maps.geocoderstatus.ok) {     var markeroptions = new google.maps.marker({     clickable: true,     flat: true,     map: map,     position: results[0].geometry.location,     title: "you here",     visible:true,     icon:'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',     });     var marker = new google.maps.marker(markeroptions);     map.setcenter(results[0].geometry.location);     }     else {       console.log("geocoding failed: " + status);       }     });   }    }    var latlong = new google.maps.latlng(loc.lat, loc.lng);   var mapoptions = {     center: latlong,     usecurrentlocation : true,     zoom: 8,     maptypeid: google.maps.maptypeid.roadmap     }; var map = new google.maps.map(document.getelementbyid("map"), mapoptions);  var bounds = new google.maps.latlngbounds(); bounds.extend(latlong); map.fitbounds(bounds);     var listener = google.maps.event.addlistener(map, "idle", function() {      if (map.getzoom() > 16) map.setzoom(16);    google.maps.event.removelistener(listener);      });  $('#locate').on('shown', function () {       google.maps.event.trigger(map, "resize");  }); } 

any appreciated.

store center of map before trigger resize-event , re-assign center after triggering resize-event:

$('#locate').on('shown.bs.modal', function () {    var center=map.getcenter();    google.maps.event.trigger(map, "resize");    map.setcenter(center); }); 

https://jsfiddle.net/doktormolle/9tr8dmax/