JavaScript调用Google地图无法显示，含绘制保存线条功能的问题求助

以下是导致地图无法显示的核心问题：

• 脚本加载顺序错误：谷歌地图JS SDK的引入位置放在了调用地图API的代码之后，执行地图相关逻辑时google全局对象尚未加载，直接触发引用错误。同时全局声明new google.maps.InfoWindow()的代码在谷歌SDK加载前就执行，也会直接报错。
• 执行时机错误：initialize()函数在页面DOM未完成渲染时就直接调用，此时id为map_canvas的DOM节点还不存在，地图无法挂载到对应节点上。
• HTML标签结构错误：代码缺少</head>闭合标签、<body>起始标签，标签不完整会导致浏览器渲染异常。
• CSS选择器不匹配：样式表中写的是#map-canvas（中横线），但实际地图容器ID是map_canvas（下划线），样式无法生效。

<!DOCTYPE html>
<html>
<head>
    <title>Draw </title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
    html,
    body,
    #map_canvas {
      height: 90%;
      margin: 0px;
      padding: 0px
    }
    </style>
    <!-- 谷歌地图SDK提前引入，添加callback参数，加载完成后自动调用初始化函数 -->
    <script src="https://maps.googleapis.com/maps/api/js?key=替换为你自己的API密钥&libraries=drawing&callback=initialize" async defer></script>
<script type="text/javascript">
            var map; // Global declaration of the map
            var iw; // 仅声明，初始化放到谷歌SDK加载完成后执行
            var lat_longs = new Array();
            var markers = new Array();
            var drawingManager;
            function initialize() {
                // 初始化放到这里，保证google对象已经存在
                iw = new google.maps.InfoWindow();
                var myLatlng = new google.maps.LatLng(40.9403762, -74.1318096);
                var myOptions = {
                    zoom: 13,
                    center: myLatlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                drawingManager = new google.maps.drawing.DrawingManager({
                    drawingMode: google.maps.drawing.OverlayType.POLYGON,
                    drawingControl: true,
                    drawingControlOptions: {
                        position: google.maps.ControlPosition.TOP_CENTER,
                        drawingModes: [google.maps.drawing.OverlayType.POLYGON]
                    },
                    polygonOptions: {
                        editable: true
                    }
                });
                drawingManager.setMap(map);
            
                google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) {
                    var newShape = event.overlay;
                    newShape.type = event.type;
                });

                google.maps.event.addListener(drawingManager, "overlaycomplete", function(event){
                    overlayClickListener(event.overlay);
                    $('#vertices').val(event.overlay.getPath().getArray());
                });
        }
        function overlayClickListener(overlay) {
            google.maps.event.addListener(overlay, "mouseup", function(event){
                $('#vertices').val(overlay.getPath().getArray());
            });
        }

        $(function(){
            $('#save').click(function(){
                // 此处添加保存逻辑
            });
        });
</script>
</head>
<!-- 补全body标签 -->
<body>
<div id="map_canvas" style="width:500px; height:450px;"></div>
<form method="post" accept-charset="utf-8" id="map_form">
    <input type="text" name="vertices" value="" id="vertices"  />
    <input type="button" name="save" value="Save!" id="save"  />
</form>
</body>
</html>

使用时只需将代码中替换为你自己的API密钥的位置替换为你申请的谷歌地图API密钥即可正常运行。

内容的提问来源于stack exchange，提问作者Sam Summers