时间戳

首页 > 解决方案 > 将 https 添加到站点后，我的网页谷歌地图显示空白

javascript - 将 https 添加到站点后，我的网页谷歌地图显示空白

问题描述

将 https 添加到站点后，我的网页谷歌地图显示为空白控制台中没有显示错误。我更改了与 https 相关的所有内容。在谷歌云控制台的 api key credential 部分中包含 https url。将 api url 更改为 https

仍然没有地图显示。

jQuery(function($) {
// Asynchronously Load the map API 
var script = document.createElement('script');
script.src = "https://maps.googleapis.com/maps/api/js?callback=initialize&key=MY_API_KEY";
document.body.appendChild(script);
});

function attachClickHandler(marker){
google.maps.event.addListener(marker, 'click', function() {
  var elem = $(marker.url);
  console.log(marker.title);
  $('html, body').animate({
    scrollTop: elem.offset().top - 200
  }, 1000 );        
});
}

function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
    mapTypeId: 'roadmap'
};

map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

var markers = new Array();
<?php $i= 1; foreach($locations as $l):  ?>
  var marker = ['<?php echo $i; ?>', <?php echo $l->latitude; ?>, <?php echo $l->longitude; ?>, '#<?php echo $i; ?>'];
  markers.push(marker);
<?php $i++; endforeach; ?>

var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();  

for( i = 0; i < markers.length; i++ ) {
  var position = new google.maps.LatLng(markers[i][1], markers[i][2]);

  marker = new google.maps.Marker({
      position: position,
      map: map,
      title: markers[i][0],
      url: markers[i][3],
      label: {color: '#fff', fontSize: '16px', fontWeight: '600', text: markers[i][0]}
  });
  bounds.extend(position);

  attachClickHandler(marker);   


}
map.fitBounds(bounds);
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
    this.setZoom(8);
    google.maps.event.removeListener(boundsListener);
});

}

标签： javascriptgoogle-mapsgoogle-maps-api-3google-api

解决方案

要排除与 API 密钥限制相关的问题，请尝试在 Google 的 Cloud Console 中取消对 API 密钥的限制。如果您的地图在使用不受限制的 API 密钥时成功加载，则意味着您需要为您的域添加正确的HTTP 引荐来源网址。例如：

https://*.example.com/*
https://example.com/*

如果您设置了API 限制，请确保您允许 JavaScript API 。

如果地图仍然无法使用不受限制的密钥加载，则说明其他问题，例如您的结算帐户有问题，您向网站添加了错误的 API 密钥，您的项目中禁用了 JavaScript API...

如果在仔细检查所有这些后问题仍然存在，您可能需要联系 Google 的技术支持团队。

希望这可以帮助！

推荐阅读