谷歌地圖嵌入網站加載谷歌頁面，而不是地圖

我有這個網站 - http://www.gyroontario.ca/contact/其中嵌入了谷歌地圖。這個工作很好，但突然間，嵌入式地圖試圖加載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

來源

2013-07-12 Rob

清理你的頁面（線〜85）：

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

負責完整的谷歌地圖網頁的加載速度。你可以通過創建一個空的頁面來輕鬆檢查這個頁面，只有谷歌地圖 - iframe元素（將工作）並從您的頁面添加window.onload。

BTW：contact/tooltip.css丟失。

來源

2013-07-12 14:44:40 mrak

的iframe包含URL

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地圖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供您參考。

希望你有一些想法。

更新：

我認爲這個問題是在iframe URL wmode=transparent。當我刪除它正在工作。檢查fiddle1和fiddle2

看到1和2之間的區別。

來源

2013-07-12 14:06:26 Praveen

這只是一個簡單的嵌入式地圖，沒有地理編碼等問題中的代碼只是從谷歌給你的代碼嵌入地圖。 – Rob

@Rob爲什麼你需要地理編碼來顯示一個靜態的地方。這裏'var myLatlng = new google.maps.LatLng（43.565529，-80.197645）;''是你所在位置的地理編碼部分。 – Praveen

查看更新的問題，我從來沒有必要這樣做，在我添加的截圖中顯示了我總是添加地圖的方式。 – Rob

谷歌地圖嵌入網站加載谷歌頁面，而不是地圖

回答

相關問題