title: Using Geolocation to load a map in a bootstrap modal, the marker is not centered
body: <p>I am trying to center a marker in a map loaded in a bootstrap modal based on geolocation for getting the current location of the user. The rest has been explained in this fiddle ...<br>
  <a href="https://jsfiddle.net/hilbi/n3Lgt63p/4/" rel="nofollow">JS FIDDLE</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;a href="#locate" data-toggle="modal"&gt;Open Modal&lt;/a&gt;
  &lt;div id="locate" class="modal fade" role="dialog"&gt;
    &lt;div class="modal-dialog modal-lg"&gt;                               
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
          &lt;h4 class="modal-title-contact"&gt;My Location&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;              
          &lt;div id="map"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;                          
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>function initMap(){
  
    var loc = {lat:0,lng:0};
    if (navigator.geolocation){
    navigator.geolocation.getCurrentPosition(showPosition);
    }
    else {
    alert("Geolocation is not supported by this 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 are 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() &gt; 16) map.setZoom(16); 
    google.maps.event.removeListener(listener); 
      });
  
  $('#locate').on('shown', function () {
        google.maps.event.trigger(map, "resize");
  
  });
  }
  </code></pre>
  
  <p>Any help would be much appreciated.</p>