當試圖初始化谷歌地圖通過對象字面模式時，谷歌未定義

Question

我試圖通過使用它來製作一個簡單的網站來處理對象字面模式。這個網站的一部分是一個聯繫我們頁面，其中包含一張地圖，我試圖用這個模式進行初始化。簡單的東西，或者我想。所以mapControl.init（）函數就是拋出這個錯誤的函數，我只是不知道爲什麼。如果我使用它的initMap（）函數。

var mapControl = { 
    lat: 52.626562, 
    long: -8.664159, 
    $map: $('#map'), 
    zoom: 8, 
    defaultUiOff: true, 
    init: function() { 
     var map; 
     map = new google.maps.Map(mapControl.$map, { 
      center: { lat: mapControl.lat, lng: mapControl.long }, 
      zoom: mapControl.zoom, 
      disableDefaultUI: mapControl.defaultUiOff 
     }); 
    } 
} 

mapControl.init(); 

function initMap() { 
    var map; 
    map = new google.maps.Map(document.getElementById('map'), { 
     center: { lat: 52.626562, lng: -8.664159 }, 
     zoom: 15, 
     disableDefaultUI: true 
    }); 
} 

任何幫助將不勝感激

Answer 1

$('#map')返回一個數組，谷歌地圖API期望一個單一的HTML元素，可使用：

$map: $('#map')[0], 

proof of concept fiddle

代碼段：

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map"></div> 
 
<script> 
 
    var mapControl = { 
 
    lat: 52.626562, 
 
    long: -8.664159, 
 
    $map: $('#map')[0], 
 
    zoom: 8, 
 
    defaultUiOff: true, 
 
    init: function() { 
 
     var map; 
 
     map = new google.maps.Map(mapControl.$map, { 
 
     center: { 
 
      lat: mapControl.lat, 
 
      lng: mapControl.long 
 
     }, 
 
     zoom: mapControl.zoom, 
 
     disableDefaultUI: mapControl.defaultUiOff 
 
     }); 
 
    } 
 
    } 
 
    mapControl.init(); 
 
</script>