如何在HTML模板的Google Maps API JS中正确使用Django视图变量？

在Django视图的search_places函数中，已将dict_users、barycenter等变量传递到index.html模板，但在JavaScript代码中直接使用{{ VARIABLE }}语法引用时出现TemplateSyntaxError，需要解决如何正确在JS中调用这些Django上下文变量。

方法1：使用json_script模板标签（推荐，安全无XSS风险） #

Django内置的json_script标签会自动将Python对象转换为合法的JSON字符串，嵌入到带指定ID的<script>标签中，同时处理转义、安全等问题，是最稳妥的实现方式。

实现步骤：

1. 在HTML模板的<body>区域（脚本代码之前）添加json_script标签：

{% json_script "barycenter" barycenter %}
{% json_script "dict_users" dict_users %}

2. 在JavaScript中通过ID获取内容并解析为JSON对象：

async function initMap() {
  // 解析重心坐标数据
  const barycenterData = JSON.parse(document.getElementById('barycenter').textContent);
  const barycenter = { lat: barycenterData[0], lng: barycenterData[1] };

  // 解析用户标记数据
  const markerPositions = JSON.parse(document.getElementById('dict_users').textContent);

  // 初始化地图库
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerView } = await google.maps.importLibrary("marker");

  // 创建地图实例
  map = new Map(document.getElementById("map"), {
    zoom: 14, // 建议调整为城市级缩放比例，原4过小
    center: barycenter,
    mapId: "DEMO_MAP_ID",
  });

  // 添加用户标记
  markerPositions.forEach((user) => {
    new AdvancedMarkerView({
      map: map,
      position: { lat: user.lat, lng: user.lng },
      title: user.name, // 使用用户名替代索引，更直观
    });
  });
}

方法2：手动转JSON并标记安全（仅适用于可信数据） #

如果变量是完全可控的内部数据（无用户输入内容），可以直接用json过滤器将Python对象转为JSON字符串，再通过safe标签告知Django不要转义内容：

async function initMap() {
  // 直接引用重心坐标的元素
  const barycenter = { lat: {{ barycenter.0 }}, lng: {{ barycenter.1 }} };
  
  // 直接解析用户标记数组
  const markerPositions = {{ dict_users|json:"safe" }};

  // 后续地图初始化代码不变...
}

注意：该方式存在XSS攻击风险，禁止在包含用户输入的公开应用中使用。

额外修正：API Key的正确引用 #

模板中Google Maps API的两处Key引用需替换为Django上下文变量：

<!-- 头部静态加载API的script标签 -->
<script src="https://maps.googleapis.com/maps/api/js?key={{ google_api_key }}&libraries=places" defer></script>

<!-- 动态加载API的脚本配置 -->
<script>(g=>{/* 原有API加载代码 */})
  ({key: "{{ google_api_key }}", v: "beta"});
</script>

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