Google Maps JS API: Unhandled Promise Rejection: TypeError: null is not an object (Safari Mac)

Question

我花了最后几个小时试图弄清楚为什么在 MacOS Safari 12.1.2 上会发生这种情况，但没有成功，所以我希望有人可能遇到过它并知道答案。

问题

我在网站建设中使用 Google 地图 JavaScript API v3。没什么特别的，只是一些自定义样式和一些标记、集群和信息窗口。它在 Chrome、Firefox 和 IE 中运行良好，但在 Safari 中地图显示为空白。

我在控制台中收到以下错误：

Unhandled Promise Rejection: 
    TypeError: null is not an object (evaluating 'a:firstChild')

它引用了ch - js:2393

JS是在HTML文件底部调用的，所以DOM对象在加载前应该已经存在。

测试Link：https://site.303mullenlowe.agency/hawaiian-templates/

代码

<script src="scripts/main.js"></script>
<script src="scripts/_markerclusterer.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap" defer></script>

HTML:

<section class="panel panel--map">
    <h1 class="panel__heading panel__heading--map heading__section-name"><span>Find Your Local Hawaiian</span></h1>
    <div class="map__wrapper">
        <div id="mapAllProperties" class="map map--all-properties"></div>
        <div id="mapInset" class="map__inset">
            <a class="map__inset-link" href="https://www.cablebeachclub.com/">
                <img class="map__inset-image" src="images/map__inset--cable-beach@2x.png" alt="Cable Beach location">
                <p class="map__inset-label">Cable Beach Club Resort &amp; Spa, Broome</p>
            </a>
        </div>
    </div>
</section>

JS:

var map;
var markers = [];
var propertyContent = []

var properties = [
    ['Hawaiian\'s Bassendean', -31.903431, 115.95346, 'shopping-centre', 'https://bassendean.hawaiian.com.au', '2 West Rd, Bassendean', '(08) 9426 8893', 'bassendean'],
    ['Claremont Quarter', -31.98466, 115.78137, 'claremont-quarter', 'https://claremontquarter.com.au', '9 Bay View Terrace, Claremont', '(08) 9286 5885','claremont-quarter'],
    ['Darling Ridge Shopping Centre', -31.88545, 116.04222 ,'shopping-centre-generic', 'https://darlingridge.hawaiian.com.au', '309 Morrison Rd, Swan View', '(08) 9426 8888', 'darling-ridge'],
    ['Duncraig Shopping Centre', -31.83153, 115.76906, 'shopping-centre-generic', 'https://duncraig.hawaiian.com.au', '50 Marri Rd, Duncraig', '(08) 9426 8888', 'duncraig'],
    ['Hawaiian\'s Forrestfield', -31.98682, 116.00977, 'shopping-centre', 'https://forrestfield.hawaiian.com.au', '20 Strelitzia Ave, Forrestfield', '(08) 9426 8882', 'forrestfield'],
    ['Hawaiian\'s Melville', -32.03391, 115.7914, 'shopping-centre', 'https://melville.hawaiian.com.au', '380 Canning Hwy, Bicton', '(08) 9426 8886', 'melville'],
    ['Hawaiian\'s Mezz', -31.92091, 115.83946, 'shopping-centre', 'https://themezz.hawaiian.com.au', '148 Scarborough Beach Rd, Mount Hawthorn', '(08) 9426 8864', 'mezz'],
    ['Newpark Shopping Centre', -31.8356, 115.82978, 'shopping-centre-generic', 'https://newpark.hawaiian.com.au', '64 Marangaroo Dr, Girrawheen WA', '(08) 9426 8881', 'newpark'],
    ['Hawaiian\'s Noranda', -31.876545, 115.89535, 'shopping-centre', 'https://noranda.hawaiian.com.au', 'Benara Road, Noranda', '(08) 9426 8892', 'noranda'],
    ['Hawaiian\'s Park Centre', -31.98461, 115.90144, 'shopping-centre', 'https://parkcentre.hawaiian.com.au', '789 Albany Hwy, East Victoria Park', '(08) 9426 8891', 'park-centre'],
    ['Parmelia House', -31.95426, 115.85334, 'office-building', 'https://parmeliahouse.hawaiian.com.au', '191 St Georges Terrace, Perth', '(08) 9426 8888', 'parmelia-house'],
    ['London House', -31.95285, 115.85283, 'office-building', 'https://londonhouse.hawaiian.com.au', '216 St Georges Terrace, Perth', '(08) 9426 8888', 'london-house'],
    ['235 St Georges', -31.95386, 115.85099, 'office-building', '#', '235 St Georges Terrace, Perth', '(08) 9426 8888', '235-st-georges'],
    ['Parmelia Hilton', -31.95455, 115.8532, 'hotel-and-resort', '#', '14 Mill St, Perth', '(08) 9215 2000', 'parmelia-hilton'],
    ['Terrace Hotel', -31.9533, 115.85127, 'hotel-and-resort', '#', '237 St Georges Terrace, Perth', 'N/A', 'terrace-hotel']
];

function setMarkers(map) {

    var infowindow = new google.maps.InfoWindow({
        maxWidth: 300,
        pixelOffset: new google.maps.Size(-5,-10),
        zIndex: 1000
    });

    for (var i = 0; i < properties.length; i++) {
        var property = properties[i];
        propertyContent.push('<div class="map__popup"><img src="images/map__location--' + property[7] + '.jpg" alt="Photo of ' + property[0] + '" class="map__popup-image"><h2 class="map__popup-name">' + property[0] + '</h2><p class="map__popup-address">' + property[5] + '</p><p class="map__popup-phone">Phone: ' + property[6] + '</p><a class="map__popup-link button" href="' + property[4] + '">Visit Website</a>    </div>');

        var marker = new google.maps.Marker({
            position: {lat: property[1], lng: property[2]},
            map: map,
            title: property[0],
            icon: { url: 'images/map__marker--' + property[3] + '.png', size: new google.maps.Size(50, 61), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(0, 61) },
            info: propertyContent[i]
        })

        markers.push(marker);

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.setContent(this.info);
            infowindow.open(map, this);
        });

    }

    var clusterOptions = {
        minimumClusterSize: 4,
        styles: [{
            anchorText: [50,0],
            textSize: 14,
            url: 'images/map__marker--cluster-1.png',
            width: 60,
            height: 70
        }]
    }

    var markerCluster = new MarkerClusterer(map, markers, clusterOptions);

}

function setBounds() {

    var bounds = new google.maps.LatLngBounds(null);

    for (var i = 0; i < properties.length; i++) {
        var property = properties[i];

        bounds.extend({ lat: property[1], lng: property[2] })

        map.setCenter(bounds.getCenter());
        map.panToBounds(bounds);
        map.fitBounds(bounds, 0);
    }

}

function initMap() {

    var styledMapType = new google.maps.StyledMapType(
        [
            {"elementType": "geometry", "stylers": [{ "color": "#f1edde" }]},
            {"elementType": "labels.icon", "stylers": [{ "visibility": "off" }]},
            {"elementType": "labels.text.fill", "stylers": [{ "color": "#998A59" }]},
            {"elementType": "labels.text.stroke", "stylers": [{ "visibility": "off" }]},
            {"featureType": "administrative.land_parcel", "elementType": "labels", "stylers": [{ "visibility": "off" }]},
            {"featureType": "landscape", "elementType": "geometry.fill", "stylers": [{ "color": "#f1edde" }]},
            {"featureType": "poi", "elementType": "geometry", "stylers": [{ "visibility": "off" }]},
            {"featureType": "poi", "elementType": "labels.text", "stylers": [{ "visibility": "off" }]},
            {"featureType": "poi", "elementType": "labels.text.fill", "stylers": [{ "visibility": "off" }]},
            {"featureType": "poi.business", "stylers": [{ "visibility": "off" }]},
            {"featureType": "poi.park", "elementType": "geometry", "stylers": [{ "visibility": "off" }]},
            {"featureType": "road", "elementType": "geometry.fill", "stylers": [{ "color": "#e2d7be" }]},
            {"featureType": "road", "elementType": "labels.icon", "stylers": [ { "visibility": "off" }]},
            {"featureType": "road.arterial", "elementType": "labels", "stylers": [{ "visibility": "off" }]},
            {"featureType": "road.highway", "elementType": "geometry", "stylers": [{ "color": "#e2d7be" }]},
            {"featureType": "road.highway", "elementType": "labels", "stylers": [{ "visibility": "off" }]},
            {"featureType": "road.local", "elementType": "geometry.fill", "stylers": [{ "visibility": "off" }]},
            {"featureType": "transit", "stylers": [{ "visibility": "off" }]},
            {"featureType": "transit.line", "elementType": "geometry", "stylers": [{ "visibility": "off" }]},
            {"featureType": "transit.station", "elementType": "geometry", "stylers": [{ "visibility": "off" }]},
            {"featureType": "water", "elementType": "geometry.fill", "stylers": [{ "color": "#ffffff" }]},
            {"featureType": "water", "elementType": "labels.text.fill", "stylers": [{ "visibility": "off" }]}
        ],
        {name: 'Styled Map'}
    )

   map = new google.maps.Map(document.getElementById('mapAllProperties'), {
       center: {lat: -31.900675, lng: 115.849444},
       zoom: 12,
       mapTypeControl: false,
       streetViewControl: false,
       rotateControl: false,
       fullscreenControl: false,
       zoomControl: true,
       mapTypeControlOptions: {
           mapTypeIds: ['roadmap','styled_map'],
       }
   });

   map.mapTypes.set('styled_map', styledMapType);
   map.setMapTypeId('styled_map');
   setMarkers(map);
   setBounds(map);

   var mapInset = document.getElementById('mapInset');  
   map.controls[google.maps.ControlPosition.TOP_LEFT].push(mapInset);

}

Answer 1

我找到了解决方案。事实证明，即使我的 initMap 的 3 个实例位于单独的 if statements 中，Safari 只是运行最后一个，而不是它所在页面的特定实例。其他浏览器似乎能很好地理解需要什么。

解决方案是给每个 initMap 函数一个唯一的名称。

Google Maps JS API: Unhandled Promise Rejection: TypeError: null is not an object (Safari Mac)

Google Maps JS API: Unhandled Promise Rejection: TypeError: null is not an object (Safari Mac)

javascript

safari

macos

google-maps

google-maps-api-3