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:

Wrong map

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: right 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.

possible duplicate of [Google maps api - map sometimes appears only on upper left corner of its div](http://stackoverflow.com/questions/8803323/google-maps-api-map-sometimes-appears-only-on-upper-left-corner-of-its-div) — Dr.Molle, Sep 25 '13 at 11:25
I think the answer is the resize trigger but it doesn't work. I added info about the initializing way of that part of the webpage. Because I don't know where to put the trigger line. — Biribu, Sep 25 '13 at 11:32
possible duplicate of http://stackoverflow.com/questions/16470980/unable-to-get-google-maps-api-v3-to-completely-load-on-jquery-mobile — Dr.Molle, Sep 25 '13 at 11:42
possible duplicate of http://stackoverflow.com/questions/15391478/after-changing-page-in-jquery-mobile-google-map-loads-just-partly — Dr.Molle, Sep 25 '13 at 11:45
This is the right way to do it but if this only happens on the initial draw, shouldn't you run clearListeners just before triggering the resize event? Otherwise, every idle event triggers an unnecessary resize. — strattonn, Mar 28 '18 at 02:17
This should never happen unless something is setup wrong, I can almost bet the DOM is not ready and the map-canvas object does not have a proper dimension set.. I've never ever had to use resize.. Make sure you load google maps in the correct fashion and this will not occur... This is a bug due to being loaded way to early. — Angry 84, Oct 11 '18 at 23:15

Praveen · Accepted Answer · 2013-09-25T11:47:12.317

19

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.

edited Sep 25 '13 at 11:47

answered Sep 25 '13 at 11:12

Praveen

55,303
33
133
164

Where do you call this event? – Biribu Sep 25 '13 at 11:22
I tried to put it outside initialize function but after it and nothing happends – Biribu Sep 25 '13 at 11:28
@Biribu add this code at the end of the `initializeNewMap`function – Praveen Sep 25 '13 at 11:36
As shown in the question, idle is a better event than resize. – strattonn Mar 28 '18 at 02:14

score 9 · Answer 2 · answered May 05 '16 at 11:01

9

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!

answered May 05 '16 at 11:01

WongKongPhooey

398
1
5
20

I thought I would add to say that I had to add the map initialisation to a callback on the big reveal of the page contents otherwise the fadein animation didn't finished before I tried to reveal the map and it still wouldn't work. $('#Results').fadeIn(function(){ var mapDiv = document.getElementById('map'); var map = new google.maps.Map(mapDiv, {center: {lat:latitude, lng:longitude}, zoom: 17}); }); – TimSmith-Aardwolf Jul 07 '16 at 14:57
1

I have found the best answer for today, thank you so much! – Anph Jan 24 '18 at 03:58
Easy, simple and accurate! Also setting `height: 0px;` together with `visibility:hidden;` will prevent any div displaying its original placeholder. – FotisK May 03 '18 at 11:57
do you mean set hidden firstly, then after loading, set the visibility not hidden? – tim Jan 08 '19 at 01:22

score 0 · Answer 3 · answered Sep 01 '16 at 08:30

If you use JavaScript-based layout helpers (such as Foundation Equalizer) you need to ensure that the map container has the definitive size before you load the map so you don't get the infamous grey map and certain attributes like center work as expected—or use the third-party plug-in's events to trigger a custom callback that fixes the map. E.g.:

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

score 0 · Answer 4 · answered Sep 21 '17 at 23:57

My map was hidden in a Twitter Bootstrap tab, and so wasn't visible when the map initialised, so I needed to call resize when the tab was selected like so:

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

score 0 · Answer 5 · edited Jun 20 '20 at 09:12

How it should be fixed:

You must have to initialize the map after the container (where you place the map) get's visible,

Remember that loading and visibility is not same, you need visibility.

Like, I have many tabs & last tab contains the map, I fixed this issue by:

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

Here, I first making sure that the container gets visibility (as clicking that element reveals the section contains the map) then initialized the map

This worked fine for me;

Embed google map is wrong displayed until resizing webpage

SOLUTION:

5 Answers5

How it should be fixed:

Linked