How to Resize a Google Map With JavaScript After It Has Loaded

How do I resize a Google Map with JavaScript after it has loaded?

If you're using Google Maps v2, call checkResize() on your map after resizing the container. link

UPDATE

Google Maps JavaScript API v2 was deprecated in 2011. It is not available anymore.

google map show after screen resize?

call google.maps.event.trigger(map, 'resize') when your "div id=map" will be visible.
Please see How do I resize a Google Map with JavaScript after it has loaded?

Embed google map is wrong displayed until resizing webpage

I too faced this issue, I solved it by triggering the Google maps resize event.

google.maps.event.trigger(map, 'resize');

Updates:

var map;
function initializeNewMap() {
 // add your code
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
  google.maps.event.trigger(map, 'resize');
}

Hope you understand.

Google maps responsive resize

Move your map variable into a scope where the event listener can use it. You are creating the map inside your initialize() function and nothing else can use it when created that way.

var map; //<-- This is now available to both event listeners and the initialize() function
function initialize() {
  var mapOptions = {
   center: new google.maps.LatLng(40.5472,12.282715),
   zoom: 6,
   mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function() {
 var center = map.getCenter();
 google.maps.event.trigger(map, "resize");
 map.setCenter(center); 
});

Why does loading a Google Map on my page resize everything on the page that uses the Roboto font?

Google Maps uses Roboto for it’s fonts, and because it’s not an iframe the Roboto font stylesheet needs to be imported if the site isn’t using it. The problem with this is that it also imports the stylesheet even when the site already has Roboto. Not only that, but the stylesheet is injected at the top of the head, meaning that it will override whatever Roboto fonts the site is already using. In my case, I was using the font weight 900, which Google Maps doesn’t use. This meant that all my 900 weighted fonts would adjust down to 700 once the maps initialised.

I found this solution
https://stackoverflow.com/a/35993046/2153273

The accepted answer no longer works, but there is a working solution a bit farther down. The direct link should take you to it.

Google Maps v3 load partially on top left corner, resize event does not work

I've had this issue before too and fixed it by waiting for the map's 'idle' state (i.e. when it's finished) and then calling the resize:

google.maps.event.addListenerOnce(map, 'idle', function() {
   google.maps.event.trigger(map, 'resize');
});

google map isn't loaded until changing the window size

When the Google map is initiated

 var map1 = new google.maps.Map(document.getElementById('location_incident'+id),mapOption);

It'll try to render a map in the size of your parent container. But from your code, it looks like, when your code is executed,

<script>locationOfIncident('3');</script>

the parent div's height and width are zero, since the modal is shown only after you open the modal(otherwise, it's hidden).

Solution: On the modal show event, ie:

shown.bs.modal

Trigger map resize event:

google.maps.event.trigger({{map name}}, 'resize');