Javascript 代码未生成 Google Map API答案

【问题标题】：Javascript code not generating a Google Map APIJavascript 代码未生成 Google Map API
【发布时间】：2017-06-06 17:40:05
【问题描述】：

脚本没有渲染地图。

<!DOCTYPE html>
<html>
  <head>
    <style>
       #map-canvas {
        margin: 0;
        padding: 0;
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div style= "Height:100% Width:100%;">
      <div id ="map-canvas"></div></div>
    <script
    src="https://maps.googleapis.com/maps/api/js?key=API_Key&callback=initMap">
        //I am not sure what going on for some reason the map will not load and I am not sure if it is because of issues with my formatting or what, but I am lost. 
    </script>
    <script type ="text/javascript">
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: {lat: -27.3818611, lng: 152.7130136},
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
         var places = [
                      {lat: -25.363, lng: 131.044, Name: "Uluru"},
                      {lat:-24.363, lng: 131.044, Name: "Placeland"}];
        var marker, i;
        var markers = new Array();
        for(var i=0; i<crimes.length; i++){
            var marker = new google.maps.Marker({
                      position: places[i].lat, places[i].lng, 
                      map: map,
                      title: places[i].Name
                //I am trying to get a marker with this but am not sure if the code is incorrect.
                      });
                      }
      }
        
                      
    </script>
    
  </body>
</html>

【问题讨论】：

标签： javascript html google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

document.getElementById('map') 应该是document.getElementById('map-canvas')

【讨论】：

是的，这可能是罪魁祸首，当您将 null 传递给初始化函数时，我很惊讶 google maps api 不会（？）给您一个警告/错误。无论如何，我认为 OP 应该检查他的控制台是否有警告

【解决方案2】：

没关系，我修好了。

<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script type ="text/javascript">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -24.363, lng: 131.044},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var places = [
{lat: -25.363, lng: 131.044, Name: "Uluru"},
{lat:-24.363, lng: 131.044, Name: "Placeland"}];
var marker, i;
var markers = new Array();
for(var i=0; i<places.length; i++){
var marker = new google.maps.Marker({
position: places[i],
map: map,
title: places[i].Name
//I am trying to get a marker with this but am not sure if the code is incorrect.
});
}
} 
    </script>
    <script
    src="https://maps.googleapis.com/maps/api/js?key=APIKey&callback=initMap">
        //I am not sure what going on for some reason the map will not load and I am not sure if it is because of issues with my formatting or what, but I am lost. 
    </script>
    </body>
</html>

问题在于没有右括号等。

【讨论】：