Google Maps Javascript Reload in Modal

I've got a problem that I've run into before, but I must not be handling it right this time around.

I've got a modal (code below) in my laravel project, when it opens, everything is fine except that the google map is off slightly and it hasn't rendered the underlay.

My modal:

<div class="modal fade" id="scan" name="scan" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">

    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Scan Documents</h4>
      </div>
      <div class="modal-body">

        @include('layouts.scanner.shipmentAttachments')


      </div>
      <div class="modal-footer">
          Platform &amp; Browser Support:
Internet Explorer 6 or above (32 bit/64 bit), any version of Chrome (32 bit/64 bit), any version of Firefox on Windows; Safari, Chrome and Firefox on Mac OS X 10.6 or later; Chrome and Firefox v27 or above (64 bit) on Ubuntu 10-16, Debian 8, or Fedora 19+.
      </div>
    </div>

  </div>
</div>

And I was pretty sure I'd be using the right script, but I'm not sure now since it fails to work:

<script>
$('#scan').on('shown', function() {   // When modal is displayed...
    var map = googleMaps[0],
    center = map.getCenter();
    google.maps.event.trigger(map, 'resize');         // fixes map display
    map.setCenter(center);                            // centers map correctly
});
</script>

If you could help, I'd be extremely appreciative!

Also the code specifically for the google map inside the (layouts.scanner.shipmentAttachments) file is:

 <div class="form-group">
    <label for[="us3-address">Location:</label>
      <input type="text" class="form-control" id="us3-address" />

  <div id="us3" style="width: 100%; height: 200px;"></div>

           <table style="width:100%;">
            <tbody>
               <tr>
                <td style="width:50%;">
                   <div class="form-group" id="latitude">
    <label for="us3-lat">Latitude:</label>
      <input type="text" class="form-control" id="us3-lat" name="us3-lat" />
                    </div>
                   </td>
                   <td style="width:50%">
                     <div class="form-group" id="longitude">
    <label for="us3-lon">Longitude:</label>
      <input type="text" class="form-control" id="us3-lon" name="us3-lon" />
    </div>

                   </td>
                </tr>
               </tbody>
            </table>  
      </div>
<script>
var locationPickerRef = $('#us3').locationpicker({
  location: {
    latitude: 39.777541,
    longitude: -104.942502
  },
  radius: 40,
  inputBinding: {
    latitudeInput: $('#us3-lat'),
    longitudeInput: $('#us3-lon'),
    locationNameInput: $('#us3-address')
  },
  enableAutocomplete: true
})
var mapContext = $('#us3').locationpicker('map');
mapContext.map.set('styles', [
      {
        stylers: [
          {hue: '#890000'},
          {visibility: 'simplified'},
          {gamma: 0.5},
          {weight: 0.5}
        ]
      },
      {
        elementType: 'labels',
        stylers: [{visibility: 'off'}]
      },
      {
        featureType: 'water',
        stylers: [{color: '#890000'}]
      }
    ]);

console.log(locationPickerRef);

</script>

Thanks in advance!

Best -

Matt

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/2CsZpTN
via IFTTT