JavaScript within the browser is event driven, meaning that JavaScript responds to interactions by generating events, and expects a program to listen to interesting events. The event model for the Google Maps API V3 is similar to that used in V2 of the API, though much has changed under the hood. There are two types of events:
- User events (such as "click" mouse events) are propagated from the DOM to the Google Maps API. These events are separate and distinct from standard DOM events.
- MVC state change notifications reflect changes in Maps API objects and are named using a property_changed convention.
First of all, if you want to render a event, you will need to build one. Here, we create an event handling a marker click. So, let's go:
use Ivory\GoogleMap\Event\Event;
$event = new Event(
$marker->getVariable(),
'click',
'function(){alert("Marker clicked!");}'
);
The event constructor requires an instance as first argument, an event name as second argument and the handle as third argument. It also accepts additional parameters such as capture (default false):
use Ivory\GoogleMap\Event\Event;
$event = new Event(
$marker->getVariable(),
'click',
'function(){alert("Marker clicked!");}',
true
);
If you want to configure the event instance, you can use:
$event->setInstance($instance);
If you want to configure the event name, you can use:
$event->setEventName($eventName);
If you want to configure the event handle, you can use:
$event->setHandle($handle);
If you want to configure the event capture, you can use:
$event->setCapture(true);
Be aware the capture flag is only used with a DOM event.
As explained in the overview, there are two types of event: DOM & MVC. For each of these types, you can register the event as "regular" event meaning it will fired each time the event is trigger or you can register it "once" meaning after the first execution, it is removed.
// DOM
$map->getEventManager()->addDomEvent($event);
$map->getEventManager()->addDomEventOnce($event);
// MVC
$map->getEventManager()->addEvent($event);
$map->getEventManager()->addEventOnce($event);
It works exactly the same as the map:
// DOM
$autocomplete->getEventManager()->addDomEvent($event);
$autocomplete->getEventManager()->addDomEventOnce($event);
// MVC
$autocomplete->getEventManager()->addEvent($event);
$autocomplete->getEventManager()->addEventOnce($event);