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 — Dr.Molle
– Dr.Molle, Commented Sep 25, 2013 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
– Biribu, Commented Sep 25, 2013 at 11:32
possible duplicate of stackoverflow.com/questions/16470980/… — Dr.Molle
– Dr.Molle, Commented Sep 25, 2013 at 11:42
possible duplicate of stackoverflow.com/questions/15391478/… — Dr.Molle
– Dr.Molle, Commented Sep 25, 2013 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
– strattonn, Commented Mar 28, 2018 at 2:17

Praveen · Accepted Answer · 2013-09-25 11:47:12Z

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, 2013 at 11:47

answered Sep 25, 2013 at 11:12

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Biribu Over a year ago

Where do you call this event?

Biribu Over a year ago

I tried to put it outside initialize function but after it and nothing happends

Praveen Over a year ago

@Biribu add this code at the end of the initializeNewMapfunction

strattonn Over a year ago

As shown in the question, idle is a better event than resize.

WongKongPhooey · Accepted Answer · 2016-05-05 11:01:27Z

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 5, 2016 at 11:01

WongKongPhooey

3791 gold badge7 silver badges20 bronze badges

4 Comments

TimSmith-Aardwolf Over a year ago

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}); });

Anph Over a year ago

I have found the best answer for today, thank you so much!

FotisK Over a year ago

Easy, simple and accurate! Also setting height: 0px; together with visibility:hidden; will prevent any div displaying its original placeholder.

tim Over a year ago

do you mean set hidden firstly, then after loading, set the visibility not hidden?

Álvaro González · Accepted Answer · 2016-09-01 08:30:56Z

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'); });

Matthew · Accepted Answer · 2017-09-21 23:57:18Z

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'); })

Community · Accepted Answer · 2020-06-20 09:12:55Z

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;

Collectives™ on Stack Overflow

Embed google map is wrong displayed until resizing webpage

SOLUTION:

5 Answers 5

4 Comments

4 Comments

Comments

Comments

How it should be fixed:

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

SOLUTION:

5 Answers 5

4 Comments

4 Comments

Comments

Comments

How it should be fixed:

Comments

Linked

Related