Bootstrap modal inside google map is not working

Question

I am trying to add google map in bootstrap modal but its not working for me. When i click on link, it opens modal window but map is not showing properly, it is working fine without modal , but i dont know, what happened now.

  <script type="text/javascript"> $(document).on("click", ".open-AddBookDialog", function () { var myBookId = $(this).data('id'); $(".modal-body #bookId").val(myBookId); }); </script> <!-- MAP --> <script type="text/javascript"> $(function () { var lat = 13.034118, lng = 77.5679959; latlng = new google.maps.LatLng(lat, lng), image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png'; //zoomControl: true, //zoomControlOptions: google.maps.ZoomControlStyle.LARGE, var mapOptions = { center: new google.maps.LatLng(lat, lng), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP, panControl: true, panControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT }, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.LARGE, position: google.maps.ControlPosition.TOP_left } }, map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions), marker = new google.maps.Marker({ position: latlng, map: map, icon: image }); var input = document.getElementById('searchTextField'); var autocomplete = new google.maps.places.Autocomplete(input, { types: ["geocode"] }); autocomplete.bindTo('bounds', map); var infowindow = new google.maps.InfoWindow(); google.maps.event.addListener(autocomplete, 'place_changed', function (event) { infowindow.close(); var place = autocomplete.getPlace(); if (place.geometry.viewport) { map.fitBounds(place.geometry.viewport); } else { map.setCenter(place.geometry.location); map.setZoom(17); } moveMarker(place.name, place.geometry.location); $('.MapLat').val(place.geometry.location.lat()); $('.MapLon').val(place.geometry.location.lng()); }); google.maps.event.addListener(map, 'click', function (event) { $('.MapLat').val(event.latLng.lat()); $('.MapLon').val(event.latLng.lng()); infowindow.close(); var geocoder = new google.maps.Geocoder(); geocoder.geocode({ "latLng":event.latLng }, function (results, status) { console.log(results, status); if (status == google.maps.GeocoderStatus.OK) { console.log(results); var lat = results[0].geometry.location.lat(), lng = results[0].geometry.location.lng(), placeName = results[0].address_components[0].long_name, latlng = new google.maps.LatLng(lat, lng); moveMarker(placeName, latlng); $("#searchTextField").val(results[0].formatted_address); } }); }); function moveMarker(placeName, latlng) { marker.setIcon(image); marker.setPosition(latlng); infowindow.setContent(placeName); //infowindow.open(map, marker); } }); </script> 

 <style type="text/css"> @import url('http://getbootstrap.com/dist/css/bootstrap.css'); </style> 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="http://maps.google.com/maps/api/js?libraries=places&region=uk&language=en&sensor=true"></script> <a data-toggle="modal" data-id="ISBN564541" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog" data-toggle="modal" data-target="#myModal">Click</a><br> Address:<input id="searchTextField" type="text" size="50" style=""> <br> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> <!-- <img width="241" height="72" style="top: 0px; width: 241px; height: 72px;" src="img/logos/logo.png" data-sticky-top="41" data-sticky-height="36" data-sticky-width="135" alt="srisankaramatrimony-franchisee"> --> <div id="map_canvas" style="height: 300px;width: 100%;margin: 0.6em;"></div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> 

Answer 1

Google Maps displays "Grey" area's when it's placed inside a dynamic element (for example: One that resizes, fades etc.). Triggering the "resize" function, which should be called once the animation is complete (the shown event ) should do the trick:

$("#myModal").on("shown.bs.modal", function () {
    google.maps.event.trigger(map, "resize");
    map.setCenter(latlng);
});

  <script type="text/javascript"> $(document).on("click", ".open-AddBookDialog", function () { var myBookId = $(this).data('id'); $(".modal-body #bookId").val(myBookId); }); </script> <!-- MAP --> <script type="text/javascript"> $(function () { var lat = 13.034118, lng = 77.5679959; latlng = new google.maps.LatLng(lat, lng), image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png'; //zoomControl: true, //zoomControlOptions: google.maps.ZoomControlStyle.LARGE, var mapOptions = { center: new google.maps.LatLng(lat, lng), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP, panControl: true, panControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT }, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.LARGE, position: google.maps.ControlPosition.TOP_left } }, map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions), marker = new google.maps.Marker({ position: latlng, map: map, icon: image }); var input = document.getElementById('searchTextField'); var autocomplete = new google.maps.places.Autocomplete(input, { types: ["geocode"] }); autocomplete.bindTo('bounds', map); var infowindow = new google.maps.InfoWindow(); google.maps.event.addListener(autocomplete, 'place_changed', function (event) { infowindow.close(); var place = autocomplete.getPlace(); if (place.geometry.viewport) { map.fitBounds(place.geometry.viewport); } else { map.setCenter(place.geometry.location); map.setZoom(17); } moveMarker(place.name, place.geometry.location); $('.MapLat').val(place.geometry.location.lat()); $('.MapLon').val(place.geometry.location.lng()); }); google.maps.event.addListener(map, 'click', function (event) { $('.MapLat').val(event.latLng.lat()); $('.MapLon').val(event.latLng.lng()); infowindow.close(); var geocoder = new google.maps.Geocoder(); geocoder.geocode({ "latLng":event.latLng }, function (results, status) { console.log(results, status); if (status == google.maps.GeocoderStatus.OK) { console.log(results); var lat = results[0].geometry.location.lat(), lng = results[0].geometry.location.lng(), placeName = results[0].address_components[0].long_name, latlng = new google.maps.LatLng(lat, lng); moveMarker(placeName, latlng); $("#searchTextField").val(results[0].formatted_address); } }); }); function moveMarker(placeName, latlng) { marker.setIcon(image); marker.setPosition(latlng); infowindow.setContent(placeName); //infowindow.open(map, marker); } $("#myModal").on("shown.bs.modal", function () { google.maps.event.trigger(map, "resize"); map.setCenter(latlng); }); }); </script> 

 <style type="text/css"> @import url('http://getbootstrap.com/dist/css/bootstrap.css'); </style> 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="http://maps.google.com/maps/api/js?libraries=places&region=uk&language=en&sensor=true"></script> <a data-toggle="modal" data-id="ISBN564541" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog" data-toggle="modal" data-target="#myModal">Click</a><br> Address:<input id="searchTextField" type="text" size="50" style=""> <br> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> <!-- <img width="241" height="72" style="top: 0px; width: 241px; height: 72px;" src="img/logos/logo.png" data-sticky-top="41" data-sticky-height="36" data-sticky-width="135" alt="srisankaramatrimony-franchisee"> --> <div id="map_canvas" style="height: 300px;width: 100%;margin: 0.6em;"></div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> 

Answer 2

Got it working here: http://plnkr.co/edit/J10GYavKTPwVgspAfntH?p=preview

$(document).on("click", ".open-AddBookDialog", function() {
  $('#map_canvas').html($('#test').clone());
  var myBookId = $(this).data('id');
  $(".modal-body #bookId").val(myBookId);
});

I took another div where map was loaded on page load and later cloned it to modal body map_canvas div on anchor click.