原生JS可用的谷歌地图代码在Flask模板中无法显示如何解决

核心问题1：Flask模板继承语法错误 #

Flask要求{% extends %}指令必须放在模板文件的第一行，你当前把它放在了DOCTYPE、head标签之后，会导致模板渲染逻辑异常，前面写的HTML内容要么被layout.html覆盖，要么生成结构错乱的最终HTML。
同时你在子模板中重复写了<!DOCTYPE html>、<html>、<head>、<body>等顶层标签，继承layout.html的前提下，这些标签应该统一放在父模板layout.html中，子模板只需要写{% block %}内部的内容即可，重复写会导致最终渲染出的HTML存在多套顶层标签，浏览器解析异常。

核心问题2：地图容器未设置明确宽高 #

谷歌地图要求承载地图的div必须明确设置宽高属性，默认情况下div的高度为0，就算JS逻辑正常执行，地图也无法渲染显示。

修正步骤 #

1. 调整模板文件结构，将{% extends 'layout.html' %}放在文件最开头，删除多余的顶层HTML标签
2. 给id为map的div添加宽高样式
3. 确保initMap函数暴露在全局作用域，可被谷歌地图SDK的回调逻辑访问到

修正后的子模板代码示例 #

{% extends 'layout.html' %}
{% block content %}
    <div id="map" style="width: 100%; height: 600px;"></div>
    <script type="text/javascript">
        // 确保initMap挂载到window对象，避免SDK找不到回调函数
        window.initMap = function(){
            let map = new google.maps.Map(document.getElementById("map"), {
                center: { lat: -8.6478, lng: 115.1385 },
                zoom: 14,
              });
              var pointOfInterest = [
                {
                  position: {lat: -8.6595, lng: 115.1301},
                  price : '1000000',
                },
                {
                  position:{lat: -8.654355373797795, lng: 115.12441781895892},
                  price: '49999999'
                }
              ]
                pointOfInterest.map(prop =>{
                    console.log(prop);
                })
        }
    </script>
    <script
    src="https://maps.googleapis.com/maps/api/js?key=[你的API密钥]&callback=initMap&v=weekly"
    async
    ></script>
{% endblock content %}

额外排查点 #

如果修改后仍无法正常加载，按以下顺序排查：

• 打开浏览器控制台，查看是否有JS报错，比如API密钥权限不足、initMap函数未定义等
• 检查layout.html中是否有全局CSS重置了div的宽高、定位属性，影响地图容器展示
• 确认谷歌地图SDK的加载地址没有被网络环境拦截

内容的提问来源于stack exchange，提问作者Fredi Tansari