如何在MVC中显示谷歌地图？

Question

我想在我的网站上显示谷歌地图，我的代码如下，但在浏览器中加载我的页面后，出现此错误：

Oops! Something went wrong.
This page didn't load Google Maps correctly. See the JavaScript console for  
technical details.

我在 Chrome 中查看了它，发现了这个：

Google Maps API error: MissingKeyMapError 
https://developers.google.com/maps/documentation/javascript/error-
messages#missing-key-map-error

什么是 MissingKeyMap？

我的代码：

在标题标签中：

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
<link href="~/Content/Site.css" rel="stylesheet" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?
 sensor=false"></script>


<script type="text/javascript">

    function initialize() {

        var canvas = $("#map_canvas");

        var latitude = 35.78334;
        var longitude = 51.42511;

        var latlng = new google.maps.LatLng(latitude, longitude);
        var options = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(canvas[0], options);

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(latitude, longitude),
            map: map
        });
    }

    $(function () {
        initialize();
    });

  </script>

在我看来：

<div style="width: 100%; height: 100%">
    <div id="map_canvas" style="width:100%; height:100%; margin-left:   100px"></div>
 </div>

Answer 1

在你的谷歌地图js代码中，你可能会发现这样的东西 https://maps.googleapis.com/maps/api/js?key=YOURKEYHERE&callback=initMap

替换YOURKEYHERE为您自己的 google API 密钥。转到此链接以获取您自己的密钥并将其替换为YOURKEYHERE，它应该可以正常工作。