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

我有一个网站，里面嵌入了谷歌地图。这已经很好地工作了很多年，但突然之间，嵌入的地图试图加载谷歌地图页面，而不是仅仅嵌入地图

如果你加载链接，它最初会正确加载地图，但突然它会加载带有所有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>

---

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

---

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

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

但是你可以通过使用[谷歌地图v3]（现在使用了一天）来修复

删除
iframe
并尝试执行以下操作，然后使用谷歌地图JavaScript API v3

HTML:

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

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

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

Javascript:

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

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

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

函数初始化（）{
var mylatng=newgoogle.maps.LatLng（43.565529，-80.197645）；
变量映射选项={
缩放：8，
中心：myLatlng，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
//====初始化默认标记
var marker=new google.maps.marker({
职位：myLatlng，
地图：地图，
标题：“标记”
//====您甚至可以在此处自定义图标
});
//====初始化信息窗口
var infowindow=new google.maps.infowindow({
内容：“Skyway Dr”
});
//====InfoWindow的Eventlistener
google.maps.event.addListener（标记'click'，函数（）{
信息窗口。打开（地图、标记）；
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

我已经创建了一个供您参考的

希望你有一些想法


更新：

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

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

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

我认为问题在于
iframe
URL中的
wmode=transparent
。当我删除它的工作。检查和

请参阅1和2之间的差异。
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

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

但是你可以通过使用[谷歌地图v3]（现在使用了一天）来修复

删除

iframe

并尝试执行以下操作，然后使用谷歌地图JavaScript API v3

HTML:

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

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

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

Javascript:

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

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

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

函数初始化（）{
var mylatng=newgoogle.maps.LatLng（43.565529，-80.197645）；
变量映射选项={
缩放：8，
中心：myLatlng，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
//====初始化默认标记
var marker=new google.maps.marker({
职位：myLatlng，
地图：地图，
标题：“标记”
//====您甚至可以在此处自定义图标
});
//====初始化信息窗口
var infowindow=new google.maps.infowindow({
内容：“Skyway Dr”
});
//====InfoWindow的Eventlistener
google.maps.event.addListener（标记'click'，函数（）{
信息窗口。打开（地图、标记）；
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

我已经创建了一个供您参考的

希望你有一些想法

---

更新：

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

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

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

我认为问题在于

iframe

URL中的

wmode=transparent

。当我删除它的工作。检查和

请参阅1和2之间的区别。

清理页面（第85行）：

window.onload=function（）{
var frames=document.getElementsByTagName（“iframe”）；
对于（变量i=0；i

负责加载完整的谷歌地图页面。 您可以通过使用googlemaps-

iframe

元素创建一个空页面来轻松检查这一点（将起作用） 然后添加

窗口。从您的页面加载

顺便说一句：contact/tooltip.css丢失。
清理页面（第85行）：

window.onload=function（）{
var frames=document.getElementsByTagName（“iframe”）；
对于（变量i=0；i

负责加载完整的谷歌地图页面。
您可以通过使用googlemaps-
iframe
元素创建一个空页面来轻松检查这一点（将起作用）
然后添加
窗口。从您的页面加载

顺便说一句：contact/tooltip.css丢失。
这只是一个简单的嵌入地图，没有地理编码等。问题中的代码只是从Google提供的嵌入地图的代码中提取出来的。@Rob为什么需要地理编码来显示静态位置。这里
var mylatng=new google.maps.LatLng（43.565529，-80.197645）
是您所在位置的地理编码部分。请参阅更新的问题，我以前从未需要这样做，在我添加的屏幕截图中，它显示了我如何始终添加地图。@Rob FYI:我没有复制google的示例代码。这是每个人都必须遵循的程序。为您准备一把小提琴大约需要20分钟。@user1671639好的，谢谢。在原始代码中，它实际上没有
wmode=transparent
，我也尝试添加它以防万一，但仍然没有成功。它只是一个简单的嵌入式地图，没有地理编码等。问题中的代码只是取自谷歌给你的嵌入地图的代码。@Rob为什么你需要地理编码来显示静态位置。这里
var mylatng=new google.maps.LatLng（4