Question

我有这个网站 - http://www.gyroontario.ca/contact/，其中嵌入了Google地图。多年来一直运行良好，但是嵌入式地图突然试图加载Google地图页面，而不是仅仅嵌入地图。

如果您加载了该链接，它最初会正确加载地图，但突然之后它会加载包含所有Google主菜单和侧边栏的地图页面。

谷歌有没有改变过的东西，因为我们很久没有触及过该网站了。我该如何解决这个问题？

这是它嵌入的图像：

enter image description here

这是我嵌入的代码：

<iframe width="525" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=50+Skyway+Drive,+Guelph,+ON+N1H+6H8&amp;aq=&amp;sll=51.502241,-3.19941&amp;sspn=0.260515,0.380058&amp;ie=UTF8&amp;hq=&amp;hnear=Skyway+Dr,+Guelph,+Wellington+County,+Ontario+N1H+6H8,+Canada&amp;t=m&amp;ll=43.565031,-80.19762&amp;spn=0.021767,0.045061&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>

这就是我获取代码的方式，只是一个简单的谷歌嵌入代码：

enter image description here

Answer 1

iframe包含网址

https://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=50+Skyway+Drive,Guelph,+ON+N1H+6H8&aq=&sll=43.361335,-79.923517&sspn=1.217084,1.520233&gl=uk&ie=UTF8&hq=&hnear=Skyway+Dr,+Guelph,+Wellington+County,+Ontario+N1H+6H8,+Canada&t=m&ll=43.565031,-80.19762&spn=0.012438,0.023861&z=14&iwloc=A&output=embed?wmode=transparent

直接引用英国的谷歌地图。我不确定它最初是如何工作的，后来又改变了。

但您可以使用[ Google maps v3 ]（现在使用一天）（https://developers.google.com/maps/documentation/javascript/examples/map-simple）来修复。

删除iframe并尝试执行以下操作并使用 Google Maps JavaScript API v3 。

<强> HTML：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<div id="map-canvas"></div>

<强> CSS：

#map-canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }

<强>使用Javascript：

function initialize() {
    var myLatlng = new google.maps.LatLng(43.565529, -80.197645);
    var mapOptions = {
        zoom: 8,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

     //=====Initialise Default Marker    
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'marker'
     //=====You can even customize the icons here
    });

     //=====Initialise InfoWindow
    var infowindow = new google.maps.InfoWindow({
      content: "<B>Skyway Dr</B>"
  });

   //=====Eventlistener for InfoWindow
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

我创建了一个simple fiddle供您参考。

希望你有所了解。

<强>更新

我认为问题出在wmode=transparent网址中的iframe。当我删除它是有效的。查看fiddle1和fiddle2

见1和2之间的差异。

Answer 2

清理你的页面（第~85行）：

window.onload = function() {
    var frames = document.getElementsByTagName("iframe");
    for (var i = 0; i < frames.length; i++) {
        frames[i].src += "?wmode=transparent";
    }
}

负责加载完整的Google地图页面。您可以通过使用Google地图创建一个空页面来轻松检查这一点 - 仅iframe元素（可以使用）而不是从您的网页添加window.onload。

BTW：缺少联系人/ tooltip.css。

谷歌地图嵌入网站加载谷歌页面而不是地图

2 个答案: