mvc google map in bootstrap partial view modal does not work

Question

Iam doing an MVC Bootstrap Google Map V3 application.

When user enter a Full Address it is shown in a Google Map . If the div when it is shown is in a Partial View . It looks fine.

But, when that Partial View is in a Bootstrap Modal View. It does not show anything.

This is the case when it Works..

  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MyKey&sensor=false"></script> <script type="text/javascript"> var geocoder; var map; var address = "Full Address "; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 14, center: latlng, // mapTypeControl: true, // mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, // navigationControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("dvMap"), myOptions); if (geocoder) { geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { if (status != google.maps.GeocoderStatus.ZERO_RESULTS) { map.setCenter(results[0].geometry.location); var infowindow = new google.maps.InfoWindow( { content: '<b>'+address+'</b>', size: new google.maps.Size(150,50) }); var marker = new google.maps.Marker({ position: results[0].geometry.location, map: map, title:address }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); } else { alert("No results found"); } } else { alert("Geocode was not successful for the following reason: " + status); } }); } } </script> <div style="width: 600px; height:400px"> @Html.Partial("~/Views/Shared/_ShowMap.cshtml") </div> 

this is the call to my Partial View

My partial View in this case is simple

The case that does not work is like this.

I add this line at bootom of JavaScript function...

 $("#myModalMapa").modal();

HTML Div is like this.

And my partial view looks like this.

Answer 1

As I sow in differents questions, I made same changes to my scripts

  $(document).ready(function () { $('#myModalMapa').on('shown.bs.modal', function () { var currentCenter = map.getCenter(); // Get current center before resizing google.maps.event.trigger(map, "resize"); map.setCenter(currentCenter); // Re-set previous center }); });