嵌入我的Google地图后，它会在我的网站上完全缩小，但直接关注该链接时，它会被正确放大

Question

我刚刚在google.maps上创建了一个自定义公开地图 以下是指向它的链接：my custom map 正如你所看到的那样，我用我的自定义图标放大了当地的位置。 但是，当我把它嵌入我的网站时，它缩小到目前为止我可以看到从克罗地亚到土耳其，它甚至没有集中在我的位置。

亲眼看看：

这是我用来嵌入地图的代码

<iframe id="mapframe" src="https://www.google.com/maps/d/embed?mid=zDPZ70Xno_3g.k5EUl8d_poK0" width="700" height="400" frameborder="0" frameborder="0" style="border:0"></iframe>

然后在css我所拥有的是#mapframe{float:left;}

我还注意到，在Chrome浏览器中，当我多次刷新页面时，地图会正确放大，但不会在Safari或Firefox中放大..如果您想在此处看到它，请访问我的网站D&P profimedia您首先必须单击midle中的圆圈，然后将鼠标悬停在页面顶部中心的 i 上，然后单击＆＃34; KONTAKT＆＃34;

我的大部分时间都在寻找解决方案，但我没有尝试过任何工作。

地图位于我页面上隐藏的全屏覆盖图中，仅在用户点击信息按钮后显示，可能与地图没有正确放大有关吗？

我非常感谢你给我的任何提示和想法。

更新3 我刚尝试用iframe替换embed代码，它确实在Safari和Chrome中解决了这个问题，至少在我的Mac上是这样。但Firefox现在只显示一个灰色框，其中包含＃34;缺少插件＆＃34;在中心(screenshot)。我发现我应该将embed放入具有相同属性的object中，所以我这样做，所以我现在的代码看起来像这样：

<object class="mapframe" type="text/html" data="https://www.google.com/maps/d/embed?mid=zDPZ70Xno_3g.k5EUl8d_poK0" height="400" width="700" frameborder="0" style="border:0;">
    <embed class="mapframe" src="https://www.google.com/maps/d/embed?mid=zDPZ70Xno_3g.k5EUl8d_poK0" height="400" width="700" frameborder="0" style="border:0;">
</object>

但有了它，它现在在Chrome (result)中完全不起作用，并且在Firefox和Safari (like this)中就像以前一样缩小了。

我真的不明白为什么......

Answer 1

我不确定为什么这是错的。我的工作是Google Maps JavScript API v3。您需要的代码：

HTML（head）：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

HTML（正文）：

<div id="map-canvas"></div>

Javacsript：

var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(50.2333136, 12.8448827)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);

将zoom数组中的mapOptions更改为您想要的内容。