I know this has been asked a lot, but I still cant get this resolved. I have a button, when a user clicks on it, a bootstrap modal shows up, which displays a input filed with a google maps. But the google maps doesn't show up, UNLESS I RESIZE THE WINDOW , then it appears.
Here is my button with modal:
<!-- Bootstrap trigger to open modal -->
<a data-toggle="modal" href="#addLocation" data-target=".bs-example-modal-lg">
<button class="btn btn-primary">Add Location</button>
</a>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" id="addLocation" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Create Task</h4>
</div>
<div class="modal-body">
<!-- The async form to send and replace the modals content with its response -->
<form class="form" data-async data-target="#addLocation" action="" method="POST">
{{ csrf_field() }}
<div class="form-group {{ $errors->has('location') ? ' has-error' : '' }}">
<label for="location">Create Location:</label>
<input type="text" name="location" id="pac-input" class="form-control" placeholder="Create a location on the map"> @if($errors->has('location'))
<span class="help-block">{{ $errors->first('location') }}</span> @endif
</div>
<div id="map" style="height: 500px; width: 100%"></div>
<div class="form-group{{ $errors->has('lat') ? ' has-error' : '' }}">
<label for="lat">Lat:</label>
<input type="text" class="form-control input-sm" name="lat" id="lat" value="{{ old('lat') }}"> @if($errors->has('lat'))
<span class="help-block">{{ $errors->first('lat') }}</span> @endif
</div>
<div class="form-group{{ $errors->has('lng') ? ' has-error' : '' }}">
<label for="lng">Lng:</label>
<input type="text" class="form-control input-sm" name="lng" id="lng" value="{{ old('lng') }}"> @if($errors->has('lng'))
<span class="help-block">{{ $errors->first('lng') }}</span> @endif
</div>
<br />
<button type="submit" class="btn btn-primary" id="create">Create</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
And here is my Google maps code:
<script async defer src="https://maps.googleapis.com/maps/api/js?key={MY-KEY-IS-HERE}&libraries=places&callback=initAutocomplete"></script>
<script>
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 34.173985,
lng: -83.107242
},
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: {
lat: 34.3630003,
lng: -84.332207
},
map: map,
animation: google.maps.Animation.DROP,
draggable: true
});
var searchBox = new google.maps.places.SearchBox(document.getElementById('pac-input'));
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
var bounds = new google.maps.LatLngBounds();
var i, place;
for (i = 0; place = places[i]; i++) {
bounds.extend(place.geometry.location);
marker.setPosition(place.geometry.location);
}
map.fitBounds(bounds);
map.setZoom(14);
});
google.maps.event.addListener(marker, 'position_changed', function() {
var lat = marker.getPosition().lat();
var lng = marker.getPosition().lng();
$('#lat').val(lat);
$('#lng').val(lng);
});
} // I even added this, but still doesnt work
$('#addLocation').on('shown', function() {
google.maps.event.trigger(map, 'resize');
})
</script>
This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.
From the Docs: Modal Events
It should be:
$("#addLocation").on("shown.bs.modal", function() {
google.maps.event.trigger(map, "resize");
});
Working Example Snippet.
function initAutocomplete() { var map = new google.maps.Map(document.getElementById('map'), { center: { lat: 34.173985, lng: -83.107242 }, zoom: 9, mapTypeId: google.maps.MapTypeId.ROADMAP }); var marker = new google.maps.Marker({ position: { lat: 34.3630003, lng: -84.332207 }, map: map, animation: google.maps.Animation.DROP, draggable: true }); var searchBox = new google.maps.places.SearchBox(document.getElementById('pac-input')); google.maps.event.addListener(searchBox, 'places_changed', function() { var places = searchBox.getPlaces(); var bounds = new google.maps.LatLngBounds(); var i, place; for (i = 0; place = places[i]; i++) { bounds.extend(place.geometry.location); marker.setPosition(place.geometry.location); } map.fitBounds(bounds); map.setZoom(14); }); google.maps.event.addListener(marker, 'position_changed', function() { var lat = marker.getPosition().lat(); var lng = marker.getPosition().lng(); $('#lat').val(lat); $('#lng').val(lng); }); } $("#addLocation").on("shown.bs.modal", function() { google.maps.event.trigger(map, "resize"); }); google.maps.event.addDomListener(window, 'load', initAutocomplete);
#map { height: 500px; width: 100%; } .pac-container { z-index: 2000; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <a data-toggle="modal" href="#addLocation" data-target=".bs-example-modal-lg"> <button class="btn btn-primary">Add Location</button> </a> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" id="addLocation" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span> </button> <h4 class="modal-title">Create Task</h4> </div> <div class="modal-body"> <!-- The async form to send and replace the modals content with its response --> <form class="form" data-async data-target="#addLocation" action="" method="POST"> <div class="form-group"> <label for="pac-input">Create Location:</label> <input type="text" name="location" id="pac-input" class="form-control" placeholder="Create a location on the map"> <span class="help-block"></span> </div> <div id="map"></div> <div class="form-group"> <label for="lat">Lat:</label> <input type="text" class="form-control input-sm" name="lat" id="lat" value=""> <span class="help-block"></span> <div class="form-group"> <label for="lng">Lng:</label> <input type="text" class="form-control input-sm" name="lng" id="lng" value=""> <span class="help-block"></span> </div> <br /> <button type="submit" class="btn btn-primary" id="create">Create</button> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?&libraries=places"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.