Google Maps JavaScript API报错：无法读取undefined的'null'属性

API 探路者

2026-7-30

Google Maps JavaScript API 报错修复指南

报错信息

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'null')
报错位置：JS文件中标记为//ERROR HERE的travelMode: google.maps.travelMode[selectedMode]代码行

问题根源及修复方案

1. 出行方式取值逻辑错误

你用document.getElementById("mode").ariaValueMax获取选中的出行方式，这是完全错误的用法——ariaValueMax是无障碍属性，和下拉框的选中值无关。正确做法是用value属性获取选中项：

const selectedMode = document.getElementById("mode").value;

2. 目的地输入框取值错误

代码里把终点设置成了起点输入框的值，等于起点终点完全一致，需改成读取to输入框的值：

destination: document.getElementById("to").value,

3. 出行方式选项拼写错误

HTML里的<option value="Biclying">拼写错误，正确拼写是Bicycling，Google Maps的TravelMode枚举中只有BICYCLING（大写），拼写错误会导致google.maps.travelMode[selectedMode]返回undefined，触发报错。修正后选项：

<option value="Bicycling">Bicycling</option>

4. 错误捕获逻辑无效

你定义了let status;但从未赋值，catch块里应该直接使用错误对象e来获取报错信息：

.catch((e) => {
    console.error(e);
    window.alert("路线请求失败：" + e.message);
});

5. HTML结构存在语法错误

嵌套了多余的<head>标签，删除内层重复的<head>
存在未闭合的</style>标签，直接删除
把<a href="../index.html">Back</a>移到<body>内部，避免结构错误
把traffic.js的引用移到Google Maps API脚本之后，确保google对象已加载

修正后的完整代码

HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DREAM MIRROR</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="stylesheet" href="traffic.css"> 
</head>
<body>
    <a href="../index.html">Back</a>
    <div id="floating-panel">
        <div>
            <div>
                <input type="text" id="from" placeholder="Origin">
            </div>
        </div>

        <div>
            <div>
                <input type="text" id="to" placeholder="Destination">
            </div>
        </div>
        <b>Mode of Travel</b>
        <select id="mode">
            <option value="Driving">Driving</option>
            <option value="Walking">Walking</option>
            <option value="Bicycling">Bicycling</option>
            <option value="Transit">Transit</option>
        </select>
    </div> <!--Floating panel Div-->

    <div id="map"></div>

    <script type="text/javascript" 
        src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap"
        async defer
    ></script>
    <script src="traffic.js"></script>
</body>
</html>

JS文件

window.initMap = function () {
    const directionsRenderer = new google.maps.DirectionsRenderer();
    const directionsService = new google.maps.DirectionsService();
    const map = new google.maps.Map(document.getElementById("map"), {
        zoom: 14,
        center: {lat: -34.397, lng: 150.644 },
    });

    directionsRenderer.setMap(map);
    // 初始加载时不自动计算路线，避免空值报错
    document.getElementById("mode").addEventListener("change", () => {
        calculateAndDisplayRoute(directionsService, directionsRenderer)
    });
}

function calculateAndDisplayRoute(directionsService, directionsRenderer){
    const selectedMode = document.getElementById("mode").value;
    const origin = document.getElementById("from").value;
    const destination = document.getElementById("to").value;

    // 先判断输入是否为空
    if (!origin || !destination) {
        window.alert("请输入起点和终点");
        return;
    }

    // 转换为Google Maps要求的大写枚举值
    const travelMode = google.maps.TravelMode[selectedMode.toUpperCase()];

    directionsService.route({
        origin: origin,
        destination: destination,
        travelMode: travelMode,
    })
    .then((response) => {
        directionsRenderer.setDirections(response);
    })
    .catch((e) => {
        console.error(e);
        window.alert("路线请求失败：" + e.message);
    });
}

CSS文件

/* styles.css */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-image: url("tasks2.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-size: 120%;
}

#floating-panel {
    background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
    color: #333;
    padding: 2em;
    border-radius: 30px;
    width: 100%;
    max-width: 420px;
    margin: 1em;
}

#floating-panel input {
    border: none;
    outline: none;
    padding: 0.4em 1em;
    border-radius: 24px;
    background: #7c7c7c2b;
    color: #333;
    font-family: inherit;
    font-size: 105%;
    width: calc(100% - 2em);
    margin: 0.5em 0;
}

#floating-panel input:focus {
    border-color: salmon;
}

#floating-panel select {
    border: none;
    outline: none;
    padding: 0.4em 1em;
    border-radius: 24px;
    background: #7c7c7c2b;
    color: #333;
    font-family: inherit;
    font-size: 105%;
    margin-top: 0.5em;
}

#map {
    height: calc(100% - 180px);
    margin: 1em;
    border-radius: 30px;
}

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