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

问题描述

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

但是当我加载网页时我的问题就出现了.除了地图，一切都显示得很好，在这里你可以看到地图是如何显示的:

但如果此时我调整网页大小，我的意思是，如果它是全屏的，则将其减半.或者，如果它只是屏幕的一部分，则将其放大或缩小一些.然后，您将看到正确的地图:

(这不是同一个地方，我知道.我从 2 次重新加载中获取图像)

我用 HTML 创建网页，但我称它为不同的网页.当你加载索引时，你会得到一个带有这个

的按钮

href:

而且，显示的部分将是:

<div data-role="header" data-id="fixedNav" data-position="fixed">布拉布拉布拉<div data-role="内容"><form action=""><div id="map_canvas" style="width:500px; height:300px"></div>布拉布拉布拉

所有 div、表单...都正确关闭.我有很多输入框和字段，我没有放在这里.

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

var map;函数 initializeNewMap() {var myLatlng = new google.maps.LatLng(43.462119485,-3.809954692009);var myOptions = {缩放:14，中心:myLatlng，mapTypeId: google.maps.MapTypeId.ROADMAP}map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);var 标记 = 新的 google.maps.Marker({可拖动:真实，位置:myLatlng，地图:地图，标题:您的位置"});}

但我不知道为什么需要调整大小.有办法解决吗?

我添加了更多信息:

我以这种方式调用具有地图的网页部分:

$(document).on("pageinit", '#openMap', function() {

我试着放

google.maps.event.trigger(map, 'resize');

就在它之后，但什么也没发生.

解决方案:

我在其他问题中找到了解决方案(Google Maps v3 在左上角部分加载，调整大小事件不起作用，Ian Devlin 发表):

正如一位用户在这里所说，我需要调整地图大小.但只是那条线不起作用.我在初始化函数的末尾添加了这段代码:

google.maps.event.addListenerOnce(map, 'idle', function() {google.maps.event.trigger(map, 'resize');});

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

解决方案

我也遇到了这个问题，我通过触发谷歌地图resize事件解决了.>

google.maps.event.trigger(map, 'resize');

更新:

var map;函数 initializeNewMap() {//添加你的代码map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);google.maps.event.trigger(map, '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屋！