Google maps в Joomla 3 error

Question

Я пытался разработать модуль Joomla, отображая карту с одним маркером. У меня есть javascript-файл, который отлично работает в HTML, но я не могу заставить реализацию Joomla работать. После многих bughunting, мой текущий код:

default.php

<?php 
// No direct access 
defined('_JEXEC') or die; ?> 
<div id="map" style="width:200px;height:50px"></div> 
<?php $document = JFactory::getDocument(); 
    $document->addScript('https://maps.googleapis.com/maps/api/js?key=[key]&signed_in=true&libraries=places'); 
    $document->addScript('/modules/mod_helloworld/maps.js'); 
    $document->addScriptDeclaration('window.onload(jQuery("map").googleMaps());')?> 
<?php echo $hello; ?> 

Ключ API установлен в живой версии, но здесь опущено для удобства чтения.

helper.php

<?php 
class modHelloWorldHelper 
{ 
    public static function getHello($params) 
    { 
     return 'Hello, World!'; 
    } 
} 
?> 

mod_google_maps.php

<?php 
// no direct access 
defined('_JEXEC') or die; 
// Include the syndicate functions only once 
require_once(dirname(__FILE__) . '/helper.php'); 

$hello = modHelloWorldHelper::getHello($params); 
require(JModuleHelper::getLayoutPath('mod_helloworld')); 
?> 

Когда я загрузить этот модуль на мой сайт Joomla и активировать модуль, он будет отображать "Hello, World!" на боковой панели, как и предполагалось (проверяя, работает ли модуль), но сама карта не отображается. Консоль возвращается:.

Uncaught TypeError: Cannot read property 'offsetWidth' of null 
    Xi 
    Jj 
    $.fn.googleMaps 
    (anonymous function) 

$ .fn.googleMaps определен в файле maps.js с помощью JQuery (в режиме noConflict, используя дескриптор JQuery JQuery только упоминается как «$» в выводе на консоль)

Я проверил, что имя div является правильным один раз и установило высоту и ширину, используя пиксели вместо процентов. Div появляется, но пуст.

Испытательная площадка здесь: http://dev.xander.dk.web1.symatic.dk/

UPDATE: Оказывается, Joomla отбывал неправильный файл maps.js. Он обслуживал первую версию, которая была загружена на сервер, но тот, который он должен использовать, внес некоторые важные изменения в нее, включая имя div.

Answer 1

JQuery ("карта")

Шоуда быть

JQuery ("# карта")

EDIT

в Google JQuery плагин ваши добавления карту

document.getElementById('map-canvas') 

это необходимо указать на

document.getElementById('map') 

или использование контекста (это)