google не определяется при попытке инициализировать карты Google через шаблон литерала объекта

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') возвращает массив, то Google Maps 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>