The #1 mapping solution for WordPress sites
Ready-to-use with free maps & free geocoding

Javascript API

The easiest way to hook into the map is to define a callback in the shortcode. Once the Maps Marker Pro object is created, it will execute the callback.

[mapsmarker map="1" callback="myCallback"]

The callback can then listen for various events.

function myCallback(mmp) {
    mmp.on('maploaded', function(map) {
        console.log('Map loaded', map);
    });
}

To make sure that the code is available when needed, it’s best to enqueue it using the proper WordPress hooks and defining Maps Marker Pro as its dependency.

add_action('wp_enqueue_scripts', 'load_my_callback');
function load_my_callback() {
    wp_enqueue_script(
        'my-callback',
        'path/to/script.js',
        array('mapsmarkerpro'),
        false,
        true
    );
}

All maps can also be accessed via the global object mapsMarkerPro. When using this method, however, you need to ensure that your custom code won’t be called before this object is available. That’s why we recommend to use the callback whenever possible.

Because maps can be displayed multiple times on the same page and can also be created on-the-fly, they are stored under a random UID, rather than their database ID, which means you have to iterate the object to find a specific map.

Object.keys(mapsMarkerPro).forEach(function(key) {
    var mmp = mapsMarkerPro[key];
    if (mmp.type === 'map' && mmp.id === '1') {
        // Do stuff ...
    }
});

Alternatively, you can define your own UID in the shortcode.

[mapsmarker map="1" uid="myMap"]

This would allow you to access this specific map via mapsMarkerPro.myMap.

Please note that it’s important to use the correct events when reading or modifying data, as the map is loaded asynchronously. At the time the map itself has finished loading, for instance, the markers will almost certainly still be loading in the background and their data won’t be available, yet.

Additionally, everything available in the Leaflet API can be used. For instance, to show the coordinates of a click on the map, attach the listener like so:

function myCallback(mmp) {
    mmp.on('maploaded', function(map) {
        map.on('click', function(e) {
            alert(e.latlng.lat + ', ' + e.latlng.lng);
        });
    });
}