Question

我的联系页面上有一张Google地图，工作正常，没有控制台错误。但是在其他页面上，我收到以下错误消息，大概是因为它无法找到地图：

Uncaught TypeError: Cannot read property 'firstChild' of null
    at Object._.$f (js?key=MY-KEY:81)
    at new tg (js?key=MY-KEY:87)
    at init (main.js:292)

我已经看过一些帖子，但大多数帖子似乎记录了让地图工作/显示，但在这种情况下，并不意味着要成为网页上的地图。

我想这可以通过在联系页面上调用javascript来解决，但脚本位于我的全局.js文件中，并且它已加载到每个页面上。

有没有办法解决此错误，将脚本保存在全局外部文件中？

这是我的Google地图脚本供参考：

/* 
 * When the window has finished loading create our google map below.
 */

google.maps.event.addDomListener(window, 'load', init);

/* 
 * Basic options for a simple Google Map. For more options see:
 * https://developers.google.com/maps/documentation/javascript/reference#MapOptions
 *
 * 1. How zoomed in you want the map to start at (always required)
 * 2. The latitude and longitude to center the map (always required).
 * 3. How you would like to style the map. This is where you would paste any
 *    style found on Snazzy Maps.
 * 4. Prevent map from being draggable.
 * 5. Hide map/satellite toggle.
 * 6. Hide "Street View" button.
 */

function init() {

    var mapOptions = {
        zoom: 15, /* [1] */ 
        center: new google.maps.LatLng(LAT-VALUE, LNG-VALUE), /* [2] */ 
        draggable: false, /* [4] */
        mapTypeControl: false, /* [5] */
        streetViewControl: false, /* [6] */
        styles: /* [3] */
            [{"stylers":[{"saturation":-100},{"gamma":1}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"all","elementType":"geometry.fill","stylers":[{"weight":"2.00"}]},{"featureType":"all","elementType":"geometry.stroke","stylers":[{"color":"#9c9c9c"}]},{"featureType":"all","elementType":"labels.text","stylers":[{"visibility":"on"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"landscape","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"color":"#eeeeee"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#7b7b7b"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"fill","stylers":[{"weight":"1.00"}]},{"featureType":"transit","elementType":"labels.icon","stylers":[{"visibility":"on"},{"hue":"#a3cd39"},{"gamma":1},{"saturation":"50"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#46bcec"},{"visibility":"on"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"color":"#c8d7d4"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#070707"}]},{"featureType":"water","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]}]
    };

    /* 
     * Get the HTML DOM element that will contain your map. We are using a div with
     * id="map" seen below in the <body>
     */

     var mapElement = document.getElementById('map');

    /* 
     * Create the Google Map using our element and options defined above.
     *
     * 1. Map varible.
     * 2. Marker variable so we can specify a retina image and resize.
     */

    var map = new google.maps.Map(mapElement, mapOptions); /* [1] */
    var mapIcon = new google.maps.MarkerImage("img/interface/map-marker@2x.png", null, null, null, new google.maps.Size(100,78)); /* [2] */

    /* 
     * Let's also add a marker while we're at it.
     */

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(LAT-VALUE, LNG-VALUE),
        map: map,
        flat: true,
        title: 'TITLE-HERE',
        icon: mapIcon
    });
}

希望有人可以提供帮助！

Answer 1

如果一个简单的if / else查询检测到页面上是否存在'map'id标记，会解决错误吗？

例如：

var mapElement = document.getElementById('map');
if (mapElement !== null) {
    // draw the map
}

或者：

if (document.getElementById('map')) {
    // draw the map
}

Answer 2

var mapElement = document.getElementById（'map'）;

if(mapElement != undefined || mapElement != '')
{
     var map = new google.maps.Map(mapElement, mapOptions); /* [1] */
     var mapIcon = new google.maps.MarkerImage("img/interface/map-           marker@2x.png", null, null, null, new google.maps.Size(100,78));

  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(LAT-VALUE, LNG-VALUE),
    map: map,
    flat: true,
    title: 'TITLE-HERE',
    icon: mapIcon
  });
}

未显示/使用Google地图时出现控制台错误

2 个答案: