Back to Community

How to Access the WP Go Maps JavaScript Instance for Custom Development

31 threads Sep 10, 2025 PluginWp go maps (formerly wp google maps)

Content

Many developers using the WP Go Maps plugin want to extend its functionality by integrating custom JavaScript code. A common challenge is gaining access to the map instance to manipulate it, add custom search features, or bind to specific events. This guide explains how to correctly access the map object for your custom scripts.

Why You Need to Access the Map Instance

The map instance is the core JavaScript object that controls the map's behavior. Without direct access to it, you cannot programmatically interact with the map to perform actions like:

  • Creating a custom search interface
  • Adding unique event listeners
  • Integrating with other parts of your website
  • Developing advanced, bespoke features

How to Access the Map Instance

Based on support responses from the WP Go Maps team, there are two primary methods to access the map instance. The method you choose depends on whether you need to target a specific map by its ID or the first map on the page.

Method 1: Access by Map ID (Recommended)

This method is the most precise, as it allows you to target a specific map if you have multiple maps on a single page. You will need your map's ID, which can be found in your WordPress admin area under Maps -> Edit.

// Get map by specific map ID
const map = WPGMZA.getMapByID(2); // Replace '2' with your actual map ID

Method 2: Access by Array Index

This method accesses the first map initialized on the page. It's useful if you only have one map, but can be unpredictable if multiple maps are present.

// Get the first map in the instances array
const map = WPGMZA.maps[0];

Binding to Map Events

Simply accessing the map object may not be enough. Often, you need to ensure your code runs only after the map and its markers are fully loaded. The WP Go Maps team recommends binding your custom JavaScript to specific events using jQuery listeners.

Wait for the map to initialize:

// Wait for the map to fully initialize
jQuery(($) => {
  $(document.body).on('init.wpgmza', () => {
    // Your custom code here
  });
});

Wait for markers to be placed (useful for store locators):

// Wait for markers to be placed on the map 
jQuery(($) => {
  $(document.body).on('markersplaced.wpgmza', () => {
    // Your custom processing code here
  });
});

Important Considerations

  • Plugin Updates: Be aware that future updates to the WP Go Maps plugin could change how the JavaScript instance is accessed. Always test your custom code after updating the plugin.
  • Multiple Maps: If your site uses more than one map, using the array index (WPGMZA.maps[0]) will only target the first one. Always use the map ID method for reliability.
  • Documentation: For more advanced implementations, reviewing general Google Maps JavaScript API documentation can be helpful, as the WP Go Maps instance wraps much of this functionality.

By following these methods, you can successfully integrate powerful custom features with your WP Go Maps implementation, tailoring the user experience to your specific needs.

Related Support Threads Support