嵌入谷歌地图是错误的显示，直到调整大小的网页 [英] Embed google map is wrong displayed until resizing webpage

问题描述

我试图在我的网页上显示地图以从中获取坐标。它工作正常，我可以拖放一个标记，并在输入框中获得坐标。

但我的问题出现在我加载网页时。一切都很好地显示，但地图，在这里你可以看到地图是如何显示：

但是如果在这一刻我调整了网页大小，我的意思是，如果它是全屏的话，就把它放一半。或者，如果它只是屏幕的一部分，则可以稍大或小一点。然后，您将看到正确的地图：

（我知道这是不一样的地方，我从2次重新载入图片）

我用HTML创建网页，但我称之为就好像它们是不同的网页一样。当你加载索引时，你会得到一个带有这个

的按钮：

  href：< a href =＃openMap> 
  

并且，显示的部分将是：

 < div data-role =pageid =openMapdata-theme =e> 
< div data-role =headerdata-id =fixedNavdata-position =fixed> 
 blablabla 
< div data-role =content> 
< form action => 
< div id =map_canvasstyle =width：500px; height：300px>< / div> 
 blablabla 
  

所有divs，forms ...都已正确关闭。

然后，在我的谷歌地图脚本中，我有这个：

  var map; 
函数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：您的位置
}）; 
 
} 
  

但我不知道为什么我需要调整大小。这是一种解决它的方法吗？

编辑：我添加更多信息：

我称之为具有这种映射的网页：

  $（document）.on（pageinit，'#openMap'，function （）{
  

我试着把

  google.maps.event.trigger（map，'resize'）; 
  

$ b $

解决方案：

我在其他问题中找到了解决方案（ Google地图v3一些用户在这里说过，我需要调整地图大小，但是，我在这个初始化函数的最后添加了这段代码：

  google.maps.event。 addListenerOnce（map，'idle'，function（）{
 google.map s.event.trigger（地图，'resize'）; 
}）; 
  

所以它只是在地图显示后调用。

解决方案

我也遇到过这个问题，我通过触发Google地图来解决它 resize 事件。

  google.maps.event.trigger（map，'resize'） ; 
  

更新：

  var map; 
函数initializeNewMap（）{
 //添加您的代码
 map = new google.maps.Map（document.getElementById（map_canvas），myOptions）; 
 google.maps.event.trigger（地图，'resize'）; 
} 
  

希望您能理解。

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.

解决方案

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.

这篇关于嵌入谷歌地图是错误的显示，直到调整大小的网页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！