0

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

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

有没有因为我们很久没有接触过这个网站而被谷歌改变了。我怎样才能解决这个问题？

这是它嵌入的图像：

在此处输入图像描述

这是我嵌入的代码：

<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>

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

在此处输入图像描述

4

2 回答 2

2

包含iframeURL

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);

我创建了一个简单的小提琴供您参考。

希望你有一些想法。

更新：

我认为问题出wmode=transparent在iframeURL 中。当我删除它时，它正在工作。检查fiddle1和fiddle2

请参阅 1 和 2 之间的差异。

于 2013-07-12T14:06:26.750 回答
1

Clean up your page (line ~85):

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

is responsible the loading of the complete google maps page. You can easily check this by creating an empty page with the google maps-iframe element only (will work) and than adding the window.onload from your page.

BTW: contact/tooltip.css is missing.

于 2013-07-12T14:44:40.207 回答