Google地图中心位于左上角 [英] Google Map Centers at top left corner

问题描述

我一直在关注这个问题的许多不同的例子，问题和其他事情，我似乎无法找到任何东西，所以我最终会问一个问题。

我的地图不居中，甚至没有显示。它指向左上角。看到这里： http://i.imgur.com/Cc1ZK.png

我有联系信息的选项卡系统。当有人点击一个标签时，地图和信息会下滑并显示出正确的标记（4张单独的地图），但是我无法获得第一张标签，因此我无法复制/粘贴。

以下是我的代码：

脚本：

  var latlng = new google.maps.LatLng（42.3535727，-83.0591444）; 
 var options = {
 zoom：14，
 center：latlng，
 mapTypeId：google.maps.MapTypeId.ROADMAP，
}; 
 var map = new google.maps.Map（document.getElementById（'detroit_map'），options）; 
 marker1 = new google.maps.Marker（{
 position：new google.maps.LatLng（42.3535727，-83.0591444），
 map：map 
}）; 
 map.setCenter（latlng）; 
  

Html：

 < div id =detroit_mapstyle =width：270px; height：170px;>< / div> 
  

PS，我在chrome开发人员工具中没有遇到任何错误。

希望这是我忽视的一件非常简单的事情。

感谢

为未来的观众找到答案：

b
$ b

原来，我的标签导致了块之间的显示，没有一个让我的地图加载变得很奇怪。我为每个函数都做了初始化函数，并且调用了setTimout（'functionName'，1000）;调用地图加载。

我改变了我的地图代码，但是我们可以在他们的教程下的w3school上找到一切。

解决方案

点击标签后初始化地图。当在标签中使用时，这也适用于iframe谷歌地图。

I've been looking at many different examples, problems, and other things regarding this and I can't seem to find anything, so i'll finally ask a question.

The map I have does not center the marker and doesn't even display it. The point it the very top left corner. See here: http://i.imgur.com/Cc1ZK.png

I have a tab system for contact information. When someone clicks a tab, the map and info slides down and shows up the proper marker (4 separate maps), however I can't get the first one to work so I can't copy/paste it.

Here is my code:

Script:

var latlng = new google.maps.LatLng(42.3535727, -83.0591444);
var options = {  
      zoom: 14,  
      center: latlng,  
      mapTypeId: google.maps.MapTypeId.ROADMAP,
    };
var map = new google.maps.Map(document.getElementById('detroit_map'), options);
marker1 = new google.maps.Marker({  
            position: new google.maps.LatLng(42.3535727, -83.0591444),
            map: map
          }); 
map.setCenter(latlng);

Html:

<div id="detroit_map" style="width:270px;height:170px;"></div>

P.S, I get no errors in chrome developer tools.

It's hopefully something really simple that I overlooked.

Thanks

Found the answer for future viewers:

Turns out, my tabs causing the display between block, and none were making my map load weird. I made an initialize function for each, and called setTimout('functionName', 1000); to call the maps to load.

I changed my map code a little bit, but everything can we found on w3schools under their tutorial.

解决方案

Initialize the map after the tab is clicked. This also works for the iframe google map, when used inside a tab.

这篇关于Google地图中心位于左上角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！