Insert a google map does not display correctly until the web page is resized.

Question

I am trying to display a map on my web page to get the coordinates from it. It works fine, I can drag the marker and get the coordinates in the input field.

But my problem arises when I load a webpage. Everything is well displayed, but the map, here you can see how the map is displayed:

But if at this moment I change the size of the web page, I mean, if it were a full screen, set it to half. Or make it a little bigger or smaller if it were just part of the screen. Then you will see the correct map:

(This is not the place I know. I took an image from 2 reboots)

I am creating a webpage in HTML, but I call it as if they are different webpages. When you load the index, you get a button with this

href:<a href="#openMap"> 

And, the part shown will be:

 <div data-role="page" id="openMap" data-theme="e"> <div data-role="header" data-id="fixedNav" data-position="fixed"> blablabla <div data-role="content"> <form action=""> <div id="map_canvas" style="width:500px; height:300px"></div> blablabla 

And all divs, forms ... are properly closed. I have many input fields and fields that I have not added here.

Then on my google map script I have the following:

 var map; function initializeNewMap() { var myLatlng = new google.maps.LatLng(43.462119485,-3.809954692009); var myOptions = { zoom: 14, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var marker = new google.maps.Marker({ draggable: true, position: myLatlng, map: map, title: "Your location" }); } 

But I have no idea why I need to resize. Is this a way to solve this problem?

EDIT: I am adding additional information:

I call the part of the web page that has this map:

 $(document).on("pageinit", '#openMap', function() { 

I tried to put

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

right after him, but nothing happens.

DECISION:

I found a solution in another question ( Downloading Google Maps v3 partially in the upper left corner, the resize event does not work , message by Jan Devlin):

As one user said, I need to resize the map. But this line does not work. I added this code at the end of the initialization function:

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

Thus, it is called only after the map is displayed.

Answer 1

I also ran into this problem, I solved it by raising the Google resize event.

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

Update:

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

I hope you understand.

Answer 2

I had a similar problem, but you could not see any card (the whole box was gray).

For me, it decided that the div containing the map started as hidden using

 display:none; 

If you use

 visibility:hidden; 

Div keeps its size while it is still displayed as hidden, so the map uses the correct height and width when initializing, not 0 values

Hope this helps!

Answer 3

If you use JavaScript-based layout helpers (such as Foundation Equalizer ), you need to make sure the map container is the final size before you load the map so you don't get the infamous gray map, and some attributes like center worked like expected, or use third-party plug-in events to trigger a custom callback that fixes the card. For example:.

 var map = new google.maps.Map(/*...*/); $(document).on("after-height-change.fndtn.equalizer", function(){ google.maps.event.trigger(map, 'resize'); }); 

Answer 4

My map was hidden in the Twitter tab of Bootstrap , and therefore it was not visible when the map was initialized, so I needed to resize when the tab was selected like this:

 $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { google.maps.event.trigger(map, 'resize'); }) 

Answer 5

How this should be fixed:

You need to initialize the map after the container (where you place the map) becomes visible,

Remember that loading and visibility are not the same; you need visibility.

For example, I have many tabs, and the last tab contains a map. I fixed this problem:

 $('#map-tab').click(function() { // init map }); 

Here, I first made sure that the container gets visibility (since clicking on this element shows that the section contains a map), then the map is initialized

It worked for me