Google Maps API 未在 MVC5 中显示答案

【问题标题】：Google Maps API not showing up in MVC5Google Maps API 未在 MVC5 中显示
【发布时间】：2015-06-05 01:28:33
【问题描述】：

我关注this tutorial 在我的 ASP.NET MVC5 项目中创建 Google 地图 API。

我已将此代码添加到我的_Layout.cshtml（在底部，<html> 部分下方 - 已尝试按照建议 here 将它们移动到 <head> 部分，但没有任何区别）：

<script type="text/javascript" 
        src="http://maps.google.com/maps/api/js?sensor=false">
</script>  
<script type="text/javascript">  
   $(document).ready(function () {  
     initialize();  
   });  
   function initialize() {  
     var mapOptions = {  
       center: new google.maps.LatLng(6.9167, 79.8473),  
       zoom: 10,  
       mapTypeId: google.maps.MapTypeId.ROADMAP  
     };  
     var map = new google.maps.Map(document.getElementById("map_canvas"),  
       mapOptions);  
     // create a marker  
     var latlng = new google.maps.LatLng(6.9167, 79.8473);  
     var marker = new google.maps.Marker({  
       position: latlng,  
       map: map,  
       title: 'My Place'  
     });  
   }  
</script>

此代码显示在我的视图中（在我希望地图显示的位置）：

<div id="map_canvas" style="width: 640px; height: 480px;">  
</div>

在我的 _Layout <body> 部分的底部，我有：

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

在我的注册捆绑功能中（我知道它正在工作，因为在其他地方渲染其他捆绑正在工作）我有：

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
    "~/Scripts/jquery-{version}.js"));

但它不起作用。我得到的是这样的空白区域（如果需要，请单击更大的版本）：

但没有地图。

我已经查看了页面源代码，并且两段代码都出现在其中。我不知道还有什么可以看或尝试的，如果我错过了一些关键步骤，如果我需要为 MVC5 做一些不同的事情（本教程是针对 MVC4），如果谷歌 API 再次发生变化并且您需要再次使用密钥才能使用它，或者如果问题完全是其他问题。

更新： 上面的代码在 this fiddle 中工作（感谢 HoangHieu 让我开始使用 JSFiddle），所以问题肯定出在设置或链接在一起，而不是 JavaScript/ JQuery 本身。

【问题讨论】：

$(document).ready(function () { initialize(); }); 改成 window.onload = initialize;
@HoangHieu 完成。那并没有改变什么。理由是什么？
什么意思？？？在您的更改地图无法显示之后？或显示???
@HoangHieu 我的意思是改变后的行为和上面描述的完全一样（没有地图，大的空白）。

标签： javascript html google-maps google-maps-api-3 asp.net-mvc-5

【解决方案1】：

演示：http://jsfiddle.net/uL2Lshu6/

更新DEMO：DEMO：http://jsfiddle.net/uL2Lshu6/2/

如果你想使用 $(document)，你必须包含 "jQuery" 到 html代码你有没有包含 jQuery

我有零钱

$(document).ready(function () {  
     initialize();  
   });

到

window.onload = initialize;

它奏效了。我认为这是 JavaScript 的 window.onload 和 JQuery 的 $(document).ready() 之间的区别

更多：window.onload vs $(document).ready()

ready 事件在 HTML 文档加载后发生，而 onload 事件在稍后发生，此时所有内容（例如图像）也已加载。

onload 事件是 DOM 中的标准事件，而 ready 事件是 jQuery 特有的。就绪事件的目的是在文档加载后尽早发生，以便向页面中的元素添加功能的代码不必等待所有内容加载。

他的变化http://maps.google.com/maps/api/js?sensor=false 到https://maps.google.com/maps/api/js?sensor=false 它修复了..

【讨论】：

如果我的问题是地图需要很长时间才能加载，那将是有道理的。但问题是它根本没有出现。我对这两个函数之间的区别有了新的了解，所以感谢您花时间写一个答案，但不幸的是它并没有解决我遇到的问题。
另外，如果我在你的小提琴中将window.onload = initialize; 改回$(document).ready(function () { initialize(); }); 并点击运行，it still displays a map，这意味着这条线不会是问题所在。（这也意味着问题不在于脚本本身，而在于我将所有内容捆绑在一起的方式或某处的设置或其他地方 - 感谢您帮助我缩小范围。）
查看我的更新网址DEMO，不能使用$(document).ready
我没有看到“DEMO”和“UPDATE DEMO”之间有任何变化？
Revision 5 显示了我的问题的更新。我有一个包含 JQuery .js 文件的 JQuery 包，该包呈现在 _Layout.cshtml 的底部。这足以包含 JQuery 吗？

【解决方案2】：

原来这一行

<script type="text/javascript" 
    src="http://maps.google.com/maps/api/js?sensor=false">

正如我所关注的教程和其他几个在线教程中给出的那样，是不正确的。也许谷歌地图自编写以来已经更新。在任何情况下，src 属性都应该使用 https URL，而不是 http。

我只是把它改成了

<script type="text/javascript" 
    src="https://maps.google.com/maps/api/js?sensor=false">

一切正常。

Here 是来自 Google 的一些文档，可能会对未来的读者有所帮助：

HTTPS 或 HTTP

我们认为网络安全非常重要，建议尽可能使用 HTTPS。作为我们努力提高网络安全性的一部分，我们已通过 HTTPS 提供所有 Google Maps API。使用 HTTPS 加密可以让您的网站更安全，更能抵御窥探或篡改。

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY" type="text/javascript"></script>

如果需要，您可以通过请求http://maps.googleapis.com/ 或中国用户的http://maps.google.cn 通过 HTTP 加载 Google Maps JavaScript API。

【讨论】：