Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 361
Biribu Avatar asked Sep 25 '13 11:09

Biribu


People also ask

How do I center an embedded Google Map in my website?

How to center embedded Google map on webpage? How do I get the map centered? Hi Michael, You can simply add text-align: center to the paragraph element that is around the iframe.

How do I zoom in on an embedded Google Map?

Click on the chain-link "Share" icon, clicking back and forth between "Customize and preview embedded map" and your map itself until the result is to your liking, including zoom factor.


2 Answers

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.

like image 115
Praveen Avatar answered Oct 11 '22 19:10

Praveen


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!

like image 38
WongKongPhooey Avatar answered Oct 11 '22 19:10

WongKongPhooey