CODEWITHSUNDEEP
javascripthtmlgoogle-maps
Biribu
Biribu

Reputation: 3823

Embed google map is wrong displayed until resizing webpage

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.

Upvotes: 45

Views: 23539

Answers (5)

Md. A. Apu
Md. A. Apu

Reputation: 1250

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;

Upvotes: 0

Matthew
Matthew

Reputation: 1797

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

Upvotes: 0

&#193;lvaro Gonz&#225;lez
&#193;lvaro Gonz&#225;lez

Reputation: 146450

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

Upvotes: 0

WongKongPhooey
WongKongPhooey

Reputation: 394

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!

Upvotes: 9

Praveen
Praveen

Reputation: 56509

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.

Upvotes: 19

Related Questions