JGoogleEmbedMaps::addMarker with event(s) #6381

itbra · 2015-03-10T18:01:31Z

I found that when adding a marker to the map it is not considered to bind events to it. Isn't it a tyical scenario to click on a marker to show a balloon with short info or a link to more details?

The Google Maps API presents as an example to create the marker and immediately create the desired event which expects to receive the marker created as reference to bind to. I extended those functions responsible for marker creation by adding them another argument for the events (find a PR for map events here). Also, the function creating the script was extended to evaluate the currently set markers not only for their options but also for events to bind.

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->setZoom('3');

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

$map->setCenter(array('51.165691','10.451526'), 'Germany', $markerOptions,
array(
    'click' => 'function(e) {
        console.log("event: ", e);
        map.setCenter(this.getPosition());
        document.getElementById("monitor").innerHTML = "Clicked:&nbsp;" + this.title;
    }'
));

// Add markers
$map->addMarker(array('46.227638','2.213749'),  'France');  
$map->addMarker(array('60.472023','8.468946'),  'Norway', $markerOptions);
$map->addMarker(array('51.919437','19.145136'), 'Poland', $markerOptions, array());
$map->addMarker(array('41.871941','12.567380'), 'Italy',  $markerOptions, array(
    'click' => 'function(e) {
        console.log("event: ", e);
        map.setCenter(this.getPosition());
        document.getElementById("monitor").innerHTML = "Clicked:&nbsp;" + this.title;
    }'
));

// Prepare 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>Callback executed</em>')
})(jQuery.noConflict(), window.google || {}, document.getElementById({$options->get('mapid')}));
ENDSCRIPT;

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

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

So far this works. I wonder why this hasn't been considered yet. What do you think about this?

I found that when adding a marker to the map it is not considered to bind events to it. Isn't it a tyical scenario to click on a marker to show a balloon with short info or a link to more details? The [Google Maps API](https://developers.google.com/maps/documentation/javascript/reference) presents as an example to create the marker and the create the desired event which expects to receive the marker as a parameter. I extended those functions responsible for marker creation by adding them another argument for the events. Also, the function creating the script was extended to evaluate the currently set markers not only for their options but also for events to bind. I tested this functionality by taking a view template and writing down 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( 'extrascript' => 'locationmap=map;', 'key' => '', 'mapclass' => 'mapclass', 'mapid' => 'map' )); // Get instance $google = new JGoogle($options); $map = $google->embed('Maps'); // Define load type $map->setAutoload('jquery'); $map->setMapType('HYBRID'); $map->setZoom('3'); $map->setCenter(array('49','10'), 'Center Marker', array( 'clickable' => true ), array( 'click' => 'function(e) { map.setCenter(this.getPosition()); document.getElementById("monitor").innerHTML = this.title; }' )); // Add markers $map->addMarker(array('52','10'), 'Test Marker', array( 'clickable' => true ), array( 'click' => 'function(e) { map.setCenter(this.getPosition()); document.getElementById("monitor").innerHTML = this.title; }' )); // Prepare callback $callback = <<<ENDSCRIPT (function($, gm, element) { $('#monitor').append('<em>Callback executed</em>') })(jQuery.noConflict(), window.google || {}, document.getElementById({$options->get('mapid')})); ENDSCRIPT; // Register custom script(s) $map->setAdditionalJavascript($callback); $map->echoHeader(); $map->echoBody(); ``` So far this works. I wonder why this hasn't been considered yet. Also, i am yet missing to pass events for the map itself. What do you think about this?

itbra · 2015-03-11T10:27:25Z

The tests appear to fail although the code works properly. Can somebody please tell me what causes the test to fail? Is there probably a change required in the test class? Mabe current tests don't consider the new arguments and therefore cause the test to fail?
I have no idea, but this message from travis Failed asserting that two arrays are equal. makes me to assume that.

After adding additional function parameter to `setCenter()` and `addMarker()` the test have to be extended as well.

Hackwar · 2015-03-11T20:38:56Z

The tests fail because you have a PHP syntax error in your changed test file on line 360. You are doing a "somethin" => "value" outside of an array scope. Please fix that.

itbra · 2015-03-12T01:49:50Z

Thanks for pointing me to the issue. Finally its passing all tests. I'll add one more test case with a non-empty events-array.

itbra · 2015-03-12T10:41:38Z

There we go. Extra test for empty or non-empty events array added and passed.

coolcat-creations · 2015-03-14T15:41:02Z

Sorry i couldn´t test successfully. By using your code above with the patch nothing happens by click on the markers.

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

itbra · 2015-03-14T15:50:56Z

Of course it works. I tested it right this second via copy+paste the above example 1:1. You have to apply the patch to JGoogleEmbedMaps first so that the events are registered on marker creation. Click the markers and watch the text changing in the monitor container or on the map - when you click one of the two having an event bound.
NOTE:
Only 2 out of the 5 markers receive an event in my example just to demonstrate the different ways of marker creation. One changes the map center and the other outputs Clicked: Test Marker 4 to the monitor container.

coolcat-creations · 2015-03-14T19:09:55Z

Oh sorry, don´t know how to apply something to JGoogleEmbedMaps. I think i tested it wrong.

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

itbra · 2015-03-16T17:21:46Z

After integrating the event binding to markers and fixing the corresponding unit tests i have now created another PR to add event handlers for map events.

bembelimen · 2015-03-17T19:10:55Z

libraries/joomla/google/embed/maps.php

+				$setup .= substr(json_encode($options), 1, -1);
+				$setup .= '});';
+
+				if (isset($marker['events']))


You should test here, if it's an array:

if (isset($marker['events']) && is_array($marker['events']))

Agree. I will update this line.

Erftralle · 2015-03-18T16:43:51Z

What do you think about this?

I find it a usefull addition, thanks!

@test: Works fine for me.

itbra · 2015-03-19T02:48:51Z

@Erftralle thanks for testing and your feedback.
Are there maybe more testers willing to cpy and paste the above example and report back?

Rivaner · 2015-10-24T11:49:59Z

I have tested this item ✅ successfully on 7bb7f93

It works.

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

DavidTrenkle · 2015-10-24T12:01:41Z

I have tested this item ✅ successfully on 7bb7f93

@test works with the example code

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

KlausKrippeit · 2015-10-24T12:06:10Z

I have tested this item ✅ successfully on 7bb7f93

@test successful

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

KlausKrippeit · 2015-10-24T12:06:19Z

I have tested this item ✅ successfully on 7bb7f93

@test successful

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

zero-24 · 2015-10-24T12:34:10Z

RTC. Thanks

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

roland-d · 2015-10-25T15:47:53Z

Thanks everybody. Merged into 3.5-dev with commit 269b781

joomla-cms-bot added the PR-staging label Mar 10, 2015

itbra added 3 commits March 10, 2015 19:01

Update maps.php

bb759ce

Update maps.php

9b90ecf

Update maps.php

d114921

itbra added 3 commits March 11, 2015 13:58

Extended testsetCenter and textaddMarker

60733e3

After adding additional function parameter to `setCenter()` and `addMarker()` the test have to be extended as well.

Update JGoogleEmbedMapsTest.php

3a71016

Update JGoogleEmbedMapsTest.php

a12b08c

itbra added 2 commits March 12, 2015 02:21

Update JGoogleEmbedMapsTest.php

693ba06

Update JGoogleEmbedMapsTest.php

ba393d2

itbra added 2 commits March 12, 2015 11:11

Update JGoogleEmbedMapsTest.php

69bd061

Update JGoogleEmbedMapsTest.php

d957216

itbra changed the title ~~Bind event(s) to map marker~~ Bind event(s) to map and marker Mar 16, 2015

itbra changed the title ~~Bind event(s) to map and marker~~ JGoogleEmbedMaps::addMarker with event(s) Mar 17, 2015

itbra mentioned this pull request Mar 17, 2015

JGoogleEmbedMaps::addEventHandler() to map #6472

Closed

bembelimen reviewed Mar 17, 2015
View reviewed changes

Update getHeader() - add type check on marker events

b4a4c9d

Fixed typo in addMarker example

7bb7f93

zero-24 added this to the Joomla! 3.5.0 milestone Oct 24, 2015

joomla-cms-bot added RTC This Pull Request is Ready To Commit Unit/System Tests labels Oct 24, 2015

roland-d pushed a commit that referenced this pull request Oct 25, 2015

JGoogleEmbedMaps::addMarker with event(s) Fixes #6381

269b781

roland-d closed this Oct 25, 2015

wilsonge removed the RTC This Pull Request is Ready To Commit label Jan 17, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

JGoogleEmbedMaps::addMarker with event(s) #6381

JGoogleEmbedMaps::addMarker with event(s) #6381

itbra commented Mar 10, 2015

itbra commented Mar 11, 2015

Hackwar commented Mar 11, 2015

itbra commented Mar 12, 2015

itbra commented Mar 12, 2015

coolcat-creations commented Mar 14, 2015

itbra commented Mar 14, 2015

coolcat-creations commented Mar 14, 2015

itbra commented Mar 16, 2015

bembelimen Mar 17, 2015

itbra Mar 17, 2015

Erftralle commented Mar 18, 2015

itbra commented Mar 19, 2015

Rivaner commented Oct 24, 2015

DavidTrenkle commented Oct 24, 2015

KlausKrippeit commented Oct 24, 2015

KlausKrippeit commented Oct 24, 2015

zero-24 commented Oct 24, 2015

roland-d commented Oct 25, 2015

JGoogleEmbedMaps::addMarker with event(s) #6381

JGoogleEmbedMaps::addMarker with event(s) #6381

Conversation

itbra commented Mar 10, 2015

itbra commented Mar 11, 2015

Hackwar commented Mar 11, 2015

itbra commented Mar 12, 2015

itbra commented Mar 12, 2015

coolcat-creations commented Mar 14, 2015

itbra commented Mar 14, 2015

coolcat-creations commented Mar 14, 2015

itbra commented Mar 16, 2015

bembelimen Mar 17, 2015

Choose a reason for hiding this comment

itbra Mar 17, 2015

Choose a reason for hiding this comment

Erftralle commented Mar 18, 2015

itbra commented Mar 19, 2015

Rivaner commented Oct 24, 2015

DavidTrenkle commented Oct 24, 2015

KlausKrippeit commented Oct 24, 2015

KlausKrippeit commented Oct 24, 2015

zero-24 commented Oct 24, 2015

roland-d commented Oct 25, 2015