Gatsby Source Google Maps Static Plugin

Question

I"m able to successfully hook up the Gatsby Source Google Maps Static Plugin to my project but am looking for a multi map solution rather than a single map.

Is there a way to interact with the plugin outside of the gatsby-config.js file?

gatsby-config.js plugin settings

{
  resolve: `gatsby-source-googlemaps-static`,
  options: {
    key: `google maps api key`,
    center: `Denver, CO`
  }
}

Answer 1

Currently there is no support for this but I will add that this week.

Update: (v 1.1.0) Just Updated to support multiple maps with inheritance from global. The readme should explain more in depth but essentially all you need to add is

maps: [
   {
     // Any options here
   }
],

this will generate multiple images and maps that will be cached.

Answer 2

On March 30th, 2020 (commit), the gatsby-source-googlemaps-static plugin has been extended in response to this feature request.

You can now source multiple static maps using the maps option:

maps

Used to add multiple maps to gatsby.

This field takes all the same options as the options field, however it will override the options field for that map.

Your configuration for the plugin in your gatsby-config.js would look something like this:

module.exports = {
    plugins: [
        {
            resolve: `gatsby-source-googlemaps-static`,
            options: {
                key: process.env.GOOGLE_MAPS_STATIC_API_KEY,
                styles: [
                    {
                        feature: `poi`,
                        element: `labels`,
                        rules: {
                            visibility: `off`,
                        },
                    },
                ],
                maps: [
                    {
                        center: `Chicago, IL`,
                        query: `Willis Tower`,
                    },
                    {
                        center: `Colorado Springs, CO`,
                        query: `Garden of the Gods`,
                    },
                    {
                        center: `Miami, FL`,
                        nickname: `Beach`,
                    },
                ],
            },
        },
    ],
};

See more options and examples on the plugin's README.

Original answer

Is there a way to interact with the plugin outside of the gatsby-config.js file?

The short answer is no, you can't.

The plugin is ran on build and it doesn't expose the Maps Static API - you have to use the plugin options to configure your map.

The best way to achieve this is actually for the plugin to accept options to source multiple maps.

There is already an open issue for this on the plugin's repository on GitHub, and the author has said that he would start implementing the feature next week (week of Mar 30th, 2020).