带API密钥的Google Maps代码被拦截无法显示，求助技术排查

问题描述 #

拥有Google Maps API密钥，使用官方示例代码在页面展示地图，但地图始终无法显示，已在多主机、多浏览器测试均存在问题。

使用的代码 #

<iframe
  width="450"
  height="250"
  frameborder="0" style="border:0"
  referrerpolicy="no-referrer-when-downgrade"
  src="https://www.google.com/maps/embed/v1/MAP_MODE?key=KEY"
  allowfullscreen>
</iframe>
<script>
var myCenter=new google.maps.LatLng(53, -1.33);

var marker=new google.maps.Marker({
    position:myCenter,
    url: '/',
    animation:google.maps.Animation.DROP
});

function initialize()
{
var mapProp = {
    center:myCenter,
    zoom: 14,
    draggable: false,
    scrollwheel: false,
    mapTypeId:google.maps.MapTypeId.ROADMAP
};

var map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);

marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addListener(marker, 'click', function() {window.location.href = marker.url;});

</script>

错误提示 #

• 页面提示：Site www.google.com is blocked；Site www.google.com doesn't allow to set a connection，错误码ERR_BLOCKED_BY_RESPONSE
• 控制台报错：

Errors from console:
Uncaught ReferenceError: google is not defined
    at i.html:10:14
chromewebdata/:1 
       
       Failed to load resource: the server responded with a status of 404 ()
chromewebdata/:1 
        
       Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
(index):1957 
        
       crbug/1173575, non-JS module files deprecated.
(anonymous) @ (index):1957

解答 #

问题根源 #

1. 未加载Google Maps JS库：直接使用google.maps相关对象，但未引入官方JS脚本，浏览器找不到google全局对象，抛出google is not defined错误。
2. iframe与JS代码混用冲突：同时写了iframe嵌入和JS初始化地图的代码，两种方式不能混用；且iframe的src中MAP_MODE是占位符，需替换为具体模式（如view、place）。
3. X-Frame-Options限制：控制台的该错误是Google Maps部分页面不允许被嵌入iframe，但并非地图不显示的核心原因。

调整API密钥能解决吗？ #

单调整密钥无法直接解决当前问题，但密钥的正确配置是必要前提——需确保密钥启用了对应API服务、设置了允许的域名。先解决代码问题，再检查密钥配置。

修复方法 #

方法一：使用JS API（灵活度高，支持自定义交互）

• 先在页面引入Google Maps JS库，替换YOUR_API_KEY为你的密钥：

  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize" async defer></script>
  

• 页面需包含id="map-canvas"的容器用于放置地图：

  <div id="map-canvas" style="width:450px; height:250px;"></div>
  

• 删除多余iframe代码，调整JS部分：

  <script>
  let marker;
  
  function initialize() {
    const myCenter = new google.maps.LatLng(53, -1.33);
    const mapProp = {
      center: myCenter,
      zoom: 14,
      draggable: false,
      scrollwheel: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    const map = new google.maps.Map(document.getElementById("map-canvas"), mapProp);
    
    marker = new google.maps.Marker({
      position: myCenter,
      animation: google.maps.Animation.DROP
    });
    marker.setMap(map);
    
    // 点击标记跳转首页
    google.maps.event.addListener(marker, 'click', () => {
      window.location.href = '/';
    });
  }
  </script>
  

方法二：使用iframe嵌入（操作简单，适合无自定义交互场景）

• 替换iframe的src中MAP_MODE为具体模式（如view），并替换KEY为你的密钥：

  <iframe
    width="450"
    height="250"
    frameborder="0" style="border:0"
    referrerpolicy="no-referrer-when-downgrade"
    src="https://www.google.com/maps/embed/v1/view?key=YOUR_API_KEY&center=53,-1.33&zoom=14"
    allowfullscreen>
  </iframe>
  

• 删除所有JS API相关代码，避免冲突。

密钥配置检查 #

前往Google Cloud控制台确认：

• 使用JS API时，需启用Maps JavaScript API
• 使用iframe时，需启用Maps Embed API
• 密钥的「允许的引用网站」需添加当前域名，避免权限拦截。

内容的提问来源于stack exchange，提问作者profittech