JGoogleEmbedMaps::addEventHandler() to map

[itbra]

I found that when creating a map it is not considered to bind events to it. Isn't it a tyical scenario to click on a map and not only zoom in but also trigger some action?

The Google Maps API presents as an example to create the map and immediately create the desired event which expects to receive the map created as reference to bind to. I added the functions required for map event handler creation and deletion (find a PR for marker events here). Also, the function creating the script was extended to consider registered map event handlers.

I tested this functionality by taking a view template and paste the following:

// Target element
echo '<h1>JGoogleEmbedMaps Test</h1>';
echo '<div class="row">';
echo    '<div class="col col-xs-12">';
echo        '<div id="map" style="height:500px; background:gainsboro; border:gray">LOADING ...</div>';
echo    '</div>';
echo    '<div class="col col-xs-12">';
echo        '<h5>Monitor</h5>';
echo        '<p id="monitor" style="padding:1em 0.5em; border:1px solid gainsboro; border-radius:3px"></p>';
echo    '</div>';
echo '</div>';

// Config
$options = new JRegistry(array(
    'key'         => '',
    'mapid'       => 'map',
    'mapclass'    => 'mapclass'
));

// Get instance
$google = new JGoogle($options);
$map = $google->embed('Maps');

// Define load type
$map->setAutoload('jquery');

$map->setMapType('HYBRID');
$map->setCenter(array('50','10'), null);
$map->setZoom('3');

// Marker configuration
$markerOptions = array(
    'clickable' => true,
    'draggable' => false,
    'opacity'   => 0.75,
    'optimized' => true,
    'visible'   => true
);

// Add events handlers
$map->addEventHandler('bounds_changed',     'function(){ document.getElementById("monitor").innerHTML = "map bounds_changed event"; }');
$map->addEventHandler('center_changed',     'function(){ document.getElementById("monitor").innerHTML = "map center_changed event"; }');
$map->addEventHandler('click',              'function(){ alert("map click event"); }');
$map->addEventHandler('dblclick',           'function(){ alert("map dblclick event"); }');
$map->addEventHandler('drag',               'function(){ document.getElementById("monitor").innerHTML = "map drag event"; }');
$map->addEventHandler('dragend',            'function(){ document.getElementById("monitor").innerHTML = "map dragend event"; }');
$map->addEventHandler('dragstart',          'function(){ document.getElementById("monitor").innerHTML = "map dragstart event"; }');
$map->addEventHandler('heading_changed',    'function(){ document.getElementById("monitor").innerHTML = "map heading_changed event"; }');
$map->addEventHandler('idle',               'function(){ document.getElementById("monitor").innerHTML = "map idle event"; }');
$map->addEventHandler('maptypeid_changed',  'function(){ document.getElementById("monitor").innerHTML = "map maptypeid_changed event"; }');
$map->addEventHandler('mousemove',          'function(){ document.getElementById("monitor").innerHTML = "map mousemove event"; }');
$map->addEventHandler('mouseout',           'function(){ document.getElementById("monitor").innerHTML = "map mouseout event"; }');
$map->addEventHandler('mouseover',          'function(){ document.getElementById("monitor").innerHTML = "map mouseover event"; }');
$map->addEventHandler('projection_changed', 'function(){ document.getElementById("monitor").innerHTML = "map projection_changed event"; }');
$map->addEventHandler('resize',             'function(){ document.getElementById("monitor").innerHTML = "map resize event"; }');
$map->addEventHandler('rightclick',         'function(){ document.getElementById("monitor").innerHTML = "map rightclick event"; }');
$map->addEventHandler('tilesloaded',        'function(){ document.getElementById("monitor").innerHTML = "map tilesloaded event"; }');
$map->addEventHandler('tilt_changed',       'function(){ document.getElementById("monitor").innerHTML = "map tilt_changed event"; }');
$map->addEventHandler('zoom_changed',       'function(){ document.getElementById("monitor").innerHTML = "map zoom_changed event"; }');

// Prepare custom script(s)
// initialization callback
$callback =
<<<ENDSCRIPT
window.gm = map;   // Will execute after initialisation to add reference to the created map as a global.
(function($, gm, element) {
    $('#monitor').append('<em>Calling back</em>');
})(jQuery.noConflict(), window.google || {}, document.getElementById({$options->get('mapid')}));
ENDSCRIPT;

// Register custom script(s)
$map->setAdditionalJavascript($callback);

$map->echoHeader();
$map->echoBody();

What do you think about this?

If somebody experienced in writing Unit tests might help out to write 3 test for the 3 new functions i would really appreciate your support as i have no experience in that.

[Erftralle]

Only a misspelling, an event

[Erftralle]

Thanks for this usefull addition.

@test: Works fine for me.

[Rivaner]

I have tested this item ✅ successfully on 72107d0

Patch works!

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/6472.}

[farrelljsec]

I have tested this item ✅ successfully on 72107d0

Patch works!

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/6472.}

[zero-24]

RTC. Thanks.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/6472.}

[roland-d]

Thanks everybody. Merged into 3.5-dev with commit fbd77ac