未顯示/使用Google地圖時的控制檯錯誤

我的聯繫人頁面上有Google地圖，並且工作正常，沒有控制檯錯誤。然而在其他頁面上，我得到以下錯誤消息，大概是因爲它無法找到地圖：未顯示/使用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文件中，並且它被加載到每個頁面上。

有沒有辦法解決這個錯誤，將腳本保存在全局的外部文件中？

這裏是我的谷歌地圖的腳本供參考：

/* 
* 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/[email protected]", 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 
    }); 
}

希望有人能幫助！

來源

2017-02-20 user1406440

行'google.maps.event.addDomListener（window，'load'，init）''不會失敗嗎？我認爲不應該定義Google對象（或'google.maps'）。 –

將簡單的if/else查詢檢測頁面上是否存在'map'id標記可解決錯誤？

例如：

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

或者：

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

來源

2017-02-20 13:21:43 CodeMacabre

這兩種方法有沒有優先選擇？我想我只需要包裝'google.maps.event.addDomListener（window，'load'，init）;'在裏面？ – user1406440

兩者大致相同;在我看來，頂層方法更具可讀性。如果地圖ID不存在，底部也會返回'null'（參見[這裏]（https://developer.mozilla.org/en-US/docs/Glossary/Falsy）瞭解更多關於Falsy值的信息）。 – CodeMacabre

感謝的人，似乎做的工作！ :) – user1406440

變種mapElement =的document.getElementById（ '映射'）;

if(mapElement != undefined || mapElement != '') 
{ 
    var map = new google.maps.Map(mapElement, mapOptions); /* [1] */ 
    var mapIcon = new google.maps.MarkerImage("img/interface/map-   [email protected]", 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 
    }); 
}

來源

2017-02-20 13:49:53

請給我的答案添加描述。 –

未顯示/使用Google地圖時的控制檯錯誤

回答

相關問題