The JavaScript API allows marker customization and other fine control over map behavior.

You'll install and activate the Geo Mashup Custom plugin. This plugin is rarely updated, and so provides a safe place for your edited files so they aren't overwritten by upgrades. That means you can safely add files to the geo-mashup-custom folder (usually in wp-content/plugins).

JavaScript can be written using Mapstraction to work with any map provider, or a single provider can be targeted. Examples of both approaches follow.

To help keep custom javascript small and specific to a particular provider API, Geo Mashup loads the custom javascript file according to this file name scheme:

custom-<provider>.js

Where <provider> is currently googlev3, leaflet, or openlayers. If that doesn't exist, this file is used for general Mapstraction customizations:

custom.js (or custom-mxn.js for backward compatbility)

You may also add custom javascript for the back end location editor in the file:

location-editor.js

The API is based on an event interface that invokes callback functions for named actions. As an example we'll use the 'loadedMap' action to add a Flickr layer of squirrel pictures to the map.

// An Example Mapstraction customization

GeoMashup.addAction( 'loadedMap', function ( properties, map ) {

	// Load some KML only into global maps - for instance pictures of squirrels

	if (properties.map_content == 'global') {

		map.addOverlay( 'http://api.flickr.com/services/feeds/geo/?g=52241987644@N01&lang=en-us&format=kml' );

	}

} );

Or, you can bypass Mapstraction and use a provider's native API using the Mapstraction getMap function. Here's a google V3 native example that might go in custom-googlev3.js:

// An Example Google V3 customization

GeoMashup.addAction( 'loadedMap', function ( properties, mxn ) {

	// Load some KML only into global maps - for instance pictures of squirrels

	var google_map = mxn.getMap();

	if (properties.map_content == 'global') {

		// Make the Google v3 call to add a Flickr KML layer
		var kml = new google.maps.KmlLayer( 'http://api.flickr.com/services/feeds/geo/?g=52241987644@N01&lang=en-us&format=kml', {
			map: google_map
		} );

	}

} );

All of the Geo Mashup methods and action events are listed in the JavaScript API reference.

There are more examples in user wiki guides. It can also be very useful to view the source of the custom javascript files of the author's projects and the user ExamplesInAction.

The back end editor API is a little different in that it uses Mapstraction events.

Here's an example of location-editor.js custom code that sets the center and zoom level of the editor map:

/* Specify the initial location/zoom level for the location editor map */

geo_mashup_location_editor.mapCreated.addHandler( function() {
	  geo_mashup_location_editor.map.setCenterAndZoom( new mxn.LatLonPoint( 39, -119.1 ), 8 );
} );

Methods and events are listed in the JavaScript API reference.