Embed google map is wrong displayed until resizing webpage

Question

I am trying to display a map in my webpage to get coordinates from it. It works fine, I can drag and drop a marker and get coordinates in input boxes.

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

But if in this moment I resize the webpage, I mean, if it was full screen, put it half. Or make it a little big bigger or smaller if it was just a part of the screen. Then, You will see the correct map:

(It is not the same place, I know. I took the image from 2 reloads)

I create the webpage in HTML but I call it as if they were distinct webpages. When you load the index, you get a button with this

href:<a href="#openMap"> 

And, the part showed 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... properly closed. I have many input boxes and fields which I haven't put them here.

Then, in my google map script I have this:

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 it a way to solve it?

EDIT: I add more info:

I call the part of the webpage which has the map this way:

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

I tried to put

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

just after it but nothing happens.

SOLUTION:

I found the solution in other question (Google Maps v3 load partially on top left corner, resize event does not work, Ian Devlin post):

As one user said here, I need to resize map. But just that line didn't work. I added this code at the end of the initialize function:

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

So it is just called after the map is shown.

Answer 1

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.

Answer 2

I had a similar issue but you couldn't see any of the map (the entire box was grey).

What solved it for me was realising that the div that contained the map was starting off as hidden using

display:none; 

If you instead use

visibility:hidden; 

The div retains its size while still appears as hidden, so the map when initialised uses its correct height and width, rather than 0 values

Hope this helps!