Jump to Content

Objective HTML

Google Maps for ExpressionEngine

The complete geolocation and mapping toolkit

JavaScript Event Overview

If you need to customize the Fieldtype and display custom information or hook into additional 3rd party API's, you may use the JavaScript events. Each event is bound and triggered using jQuery, so standard jQuery syntax is still applies.

The easiest way to hook into these events is to use the third party javascript directory: themes/third_party/gmap/plugins/javascript. Just create a .js file with any name and it will get loaded automatically at the correct time. Make sure to use the jQuery.ready() method and use the GmapGlobal.object to access the individual Gmap object. A Gmap object is create for each Gmap field in the channel. Generally there should only be one Gmap field, thus generally you would access it using the example below.


$(document).ready(function() {

	var Gmap = GmapGlobal.object[0];
	
	Gmap.bind('gmapAddMarker', function(response) {
		alert('Do something here');
	});
});

As a part of the Google Maps for ExpressionEngine API, you also have access to a basic method for executing server-side HTTP requests. No need to write your own code if you are performing a simple HTTP request and processing the JSON with JavaScript.


$(document).ready(function() {

	var Gmap = GmapGlobal.object[0];
	
	Gmap.bind('gmapAddMarker', function(response) {
		$.post(GmapGlobal.curl, 
			{
				url: 'www.some-url-goes-here.com',
				method: 'GET',
				param1: 'value1',
				param2: 'value2',
				param3: 'value3'
			}, function(data) {
				alert(data);
			}
		);
	});
	
});

Event List

gmapInit

This event triggers when the map finished loading


Gmap.bind('gmapInit', function(Gmap) {
	//do something
});
Gmap
The global Gmap object
Back to Top

gmapAddMarker

This event triggers when a marker is added to the map


Gmap.bind('gmapAddMarker', function(index, response, infowindow, Gmap) {
	//do something
});
index
The marker's array index
response
A response array
infowindow
The marker's infowindow
Gmap
The global Gmap object
Back to Top

gmapAddPoint

This event triggers when a point is added to the map


Gmap.bind('gmapAddPoint', function(response, infowindow, Gmap) {
	//do something
});
response
A response array
infowindow
The marker's infowindow
Gmap
The global Gmap object
Back to Top

gmapAddRegion

This event triggers when a region is added to the map


Gmap.bind('gmapAddRegion', function(response, Gmap) {
	//do something
});
response
A response array
Gmap
The global Gmap object
Back to Top

gmapGeocodeStart

This event triggers before the address is sent to the geocoder


Gmap.bind('gmapGeocodeStart', function(response, Gmap) {
	//do something
});
response
A response array
Gmap
The global Gmap object
Back to Top

gmapGeocodeStop

This event triggers after the address is returned from the geocoder


Gmap.bind('gmapGeocodeStop', function(response, status, Gmap) {
	//do something
});
response
A response array
status
The status returned from the geocoder
Gmap
The global Gmap object
Back to Top

gmapMarkerDragEnd

This event triggers after the user is done dragging the marker


Gmap.bind('gmapMarkerDragEnd', function(index, response, infoWindow, Gmap) {
	//do something
});
index
The marker's array index
response
A response array
infowindow
The marker's infowindow
Gmap
The global Gmap object
Back to Top

gmapPointClick

This event triggers after the point is clicked


Gmap.bind('gmapPointClick', function(response, infoWindow, Gmap) {
	//do something
});
event
The event object
marker
The marker object
Gmap
The global Gmap object
Back to Top

gmapPointDragEnd

This event triggers after the point is done being dragged


Gmap.bind('gmapPointDragEnd', function(response, infoWindow, Gmap) {
	//do something
});
event
The event object
marker
The marker object
Gmap
The global Gmap object
Back to Top

gmapRefresh

This event triggers every time the list is refreshed


Gmap.bind('gmapRefresh', function(response, list, Gmap) {
	//do something
});
response
The response array
list
The list object
Gmap
The global Gmap object
Back to Top

gmapRegionClick

This event triggers every time the region is clicked


Gmap.bind('gmapRegionClick', function(event, response, infoWindow, Gmap) {
	//do something
});
event
The event object
response
The response array
infoWindow
The infoWindow object
Gmap
The global Gmap object
Back to Top

gmapRemoveMarker

This event triggers every time a marker is removed


Gmap.bind('gmapRemoveMarker', function(index, response, Gmap) {
	//do something
});
index
The index of the marker being removed
response
The response array
Gmap
The global Gmap object
Back to Top

gmapRemoveWaypoint

This event triggers every time a waypoint is removed


Gmap.bind('gmapRemoveWaypoint', function(index, response, Gmap) {
	//do something
});
index
The index of the waypoint being removed
response
The response array
Gmap
The global Gmap object

gmapRemoveRegion

This event triggers every time a region is removed


Gmap.bind('gmapRemoveRegion', function(index, response, Gmap) {
	//do something
});
index
The index of the region being removed
response
The response array
Gmap
The global Gmap object
Back to Top

gmapRouteStart

This event triggers before the directions request is sent


Gmap.bind('gmapRouteStart', function(response, Gmap) {
	//do something
});
request
The request array
Gmap
The global Gmap object
Back to Top

gmapRouteStop

This event triggers after the directions request is sent


Gmap.bind('gmapRouteStop', function(response, status, Gmap) {
	//do something
});
response
The response array
status
The status returned by the directions service
Gmap
The global Gmap object
Back to Top

gmapShowMarkerPanel

This event triggers after the marker panel displayed


Gmap.bind('gmapShowMarkerPanel', function(panel, Gmap) {
	//do something
});
panel
The panel UI object
Gmap
The global Gmap object
Back to Top