使用 AWS Cloudfront 进行 Google Maps 异步加载答案

【问题标题】：Google Maps asynchronous loading with AWS Cloudfront使用 AWS Cloudfront 进行 Google Maps 异步加载
【发布时间】：2014-10-02 22:46:48
【问题描述】：

我的 google-map 仅在页面重新加载或 HTTP 重定向后异步加载。对于第一次加载，它不会出现——没有调用任何 javascript。

在 Rails 开发模式下，它可以正常工作。同样，如果我在本地提供资产，则地图会在生产模式下异步加载。 但是当我配置 Amazon Web Services 的 Cloudfront CDN 时，它在第一个页面加载时失败。

这是调用地图的视图中的 javascript：

  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script>


  <script type="text/javascript">

function initialize() {

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 4,
  streetViewControl: false,
  overviewMapControl: false,
  mapTypeControl: false,
  zoomControlOptions: {
    style: google.maps.ZoomControlStyle.DEFAULT,
  },
  center: new google.maps.LatLng(39.82, -98.58),
});


// Info Window Content
var infoWindowContent = <%= raw @content %>;
var locations = <%= raw @location %>;

 // Display multiple markers on a map

var infowindow = new google.maps.InfoWindow(), marker, i;

var marker, i;
var markers = new Array();

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });

  markers.push(marker);

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(infoWindowContent[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

}
   function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' +
    'callback=initialize';
document.body.appendChild(script);
  }

    window.onload =loadScript;
     </script>

知道 AWS Cloudfront 上的代码可能出了什么问题吗？

【问题讨论】：

标签： ruby-on-rails ajax google-maps amazon-web-services amazon-cloudfront

【解决方案1】：

哇。终于解决了。

出了一些问题。

首先，AWS S3 和 Cloudfront 默认不允许 CORS 或跨域资源共享。这意味着您不能调用任何一方提供的 AJAX 资源——它不起作用。也就是说，您可以将两者都配置为允许 CORS。为此，您需要编辑 S3 存储桶权限并添加 CORS 配置（AWS 在帮助页面上提供了很好的示例）。接下来，您需要将 Cloudfront 分配上的“Origin”标头列入白名单。这将允许 cloudfront 将 Origin 标头从请求转发到响应，并允许 CORS。（我没有完全让它工作。查看 CORS 上的 AWS 帮助资源以获取更多信息）

其次，我注意到即使我的 AJAX 脚本是在本地提供的，而不是由 Cloudfront 提供的，一个不同的 javascript 文件是：我的 Turbolinks js 文件。事实证明，Rails Asset Pipeline 所需的 Turbolinks gem 创建了一个 js 文件，最终被上传到我的发行版（application.js 文件中默认需要它）。如果您阅读 Turbolinks 文档，您会看到 Turbolinks 确保仅重新加载 html 正文和头部的标题。这是自述文件中的内容：

 "Instead of letting the browser recompile the JavaScript and CSS between each page
  change, it keeps the current page instance alive and replaces only the body and 
  the title in the head"

事实证明，Turbolinks 干扰了本地 AJAX 并阻止了 Google 地图的异步加载。由于 AWS CORS 配置避开了我，我只是添加了关闭 turbolinks 的选项以关闭指向 Google 地图页面的链接：

data: { no_turbolink: true }

制作完整链接：

<%=link_to "/map", data: { no_turbolink: true } %>

在没有 turbolinks 的情况下，该页面从未使用 Cloudfront Turbolinks.js 文件调用，因此本地 AJax 可以加载 Google 地图。

我希望这可以帮助你们疲惫的旅行者！

【讨论】：