AJAX加载的页面上的谷歌地图 - 如何初始化？

Question

我在获取谷歌地图以在 AJAX 加载的页面上初始化时遇到了一些麻烦。

实时测试页面（开发中）： http://dma.nz/practice/

地图位于页面底部附近。

目前它可以工作 - 地图在直接或通过 AJAX 加载页面时初始化，但是它在控制台中给了我以下错误：

未捕获的类型错误：无法读取 null 的属性“firstChild”

在我的页脚中有：

<script src="/js/map.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBpC5JE9ZmQduEXiGbiNxZsws8OLMiC-Bw&callback=initMap" async defer></script>
<script src="/js/init.js"></script>

map.js 包含：

function initMap() {

  var mapOptions = {
      zoom: 17,
      center: new google.maps.LatLng(-36.85855, 174.754944), 
      disableDefaultUI: true,
      styles: [
        {"featureType":"administrative",
        "elementType":"labels.text.fill",
        "stylers":[{"gamma":"0.00"},{"weight":"0.01"},{"visibility":"off"}]
        },
        {"featureType":"landscape",
        "elementType":"all",
        "stylers":[{"color":"#ffffff"}]
        },
        {"featureType":"landscape.natural",
        "elementType":"geometry",
        "stylers":[{"visibility":"on"}]
        },
        {"featureType":"landscape.natural.terrain",
        "elementType":"geometry.stroke",
        "stylers":[{"visibility":"on"}]
        },
        {"featureType":"poi",
        "elementType":"all",
        "stylers":[{"visibility":"off"}]
        },
        {"featureType":"road",
        "elementType":"all",
        "stylers":[{"saturation":"-100"},{"lightness":"32"},{"visibility":"on"}]
        },
        {"featureType":"road",
        "elementType":"labels.text",
        "stylers":[{"visibility":"off"}]
        },
        {"featureType":"road.highway",
        "elementType":"all",
        "stylers":[{"visibility":"simplified"}]
        },
        {"featureType":"road.highway",
        "elementType":"geometry",
        "stylers":[{"visibility":"on"},{"lightness":"63"}]
        },
        {"featureType":"road.highway",
        "elementType":"labels.text",
        "stylers":[{"visibility":"off"}]
        },
        {"featureType":"road.highway",
        "elementType":"labels.icon",
        "stylers":[{"visibility":"off"}]
        },
        {"featureType":"road.arterial",
        "elementType":"labels.icon",
        "stylers":[{"visibility":"off"}]
        },
        {"featureType":"transit",
        "elementType":"all",
        "stylers":[{"visibility":"off"}]
        },
        {"featureType":"transit.station",
        "elementType":"all",
        "stylers":[{"visibility":"off"}]
        },
        {"featureType":"water",
        "elementType":"all",
        "stylers":[{"visibility":"on"},{"color":"#eeeeee"}]
        }
      ]
  };

  // Get the HTML DOM element that will contain your map 
  var mapElement = document.getElementById('google-map');

  // Create the Google Map using our element and options defined above
  var map = new google.maps.Map(mapElement, mapOptions);

  // Add marker
  var marker = new google.maps.Marker({
    icon: '/img/icons/map-pin.svg',
    position: new google.maps.LatLng(-36.858749, 174.754944),
    map: map,
    title: 'DMA'
  });
}

然后是init.js的相关部分

ajaxLoad = function(html) {
    init();
    // init google map
    initMap();
    // change html title
    var HTMLtitle = $(".content > section:first-of-type").attr("data-title");
    $(document).prop('title', HTMLtitle);
    document.title = HTMLtitle;
    // Used for popState event (back/forward browser buttons)
    changedPage = true;   }

如果直接加载页面，我的 google maps API 脚本调用的回调似乎可以正确初始化地图。如果页面由不起作用的 AJAX 加载，那么我在其中添加了行 initMap(); 以在通过 AJAX 加载新内容后加载地图。

这是有效的，但抛出一个错误，我担心这个错误会导致我页面上的其他脚本无法正常工作。

关于如何修改它以便无论页面是直接加载还是通过 AJAX 加载，地图都会初始化，并且不会产生任何 JS 错误的任何想法？谢谢！

Answer 1

当我从http://dma.nz/practice/ 页面切换到http://dma.nz/projects/ 页面时，我重现了错误。

正如我所见，您尝试在 map.js 的第 82 行初始化地图实例。这里的问题是缺少 id 为“google-map”的元素。加载项目页面时，您没有任何 ID 为“google-map”的 DOM 元素。所以你尝试在 map 构造函数中传递 null。

为避免此错误，请检查 id 为“google-map”的 DOM 元素是否存在。

// Get the HTML DOM element that will contain your map 
var mapElement = document.getElementById('google-map');

if (mapElement) {
    // Create the Google Map using our element and options defined above
    var map = new google.maps.Map(mapElement, mapOptions);

    // Add marker
    var marker = new google.maps.Marker({
        icon: '/img/icons/map-pin.svg',
        position: new google.maps.LatLng(-36.858749, 174.754944),
        map: map,
        title: 'DMA'
    });  
}