Google Map Styles

Agile Store Locator has provided 9 Google Maps Styles that can be selected from “ASL Settings”. Moreover, the style selection changes the color and labels of tiles and looks pretty cool. Below are the links to these stylish Google Maps layouts.<code class="wella">

1- How to create a custom Google Map? (Using the Legacy JSON Style) #

A custom Google Maps can be created using Google Maps Styler, once you have created the Google Maps style JSON, paste that generated JSON into the Map Custom field, select the Custom in the map layout options, and save the settings.

Disable Point-of-interest(POI) #

Enhance the visual appeal of your map by personalizing Points of Interest (POI) through Google Map Styles (use the legacy). This feature empowers you to finely tune the appearance of various POI elements to match your brand or design preferences.

To begin, access the Google Map Style Wizard, configure the Points of Interest category, and make adjustments to the visibility and change it to hidden. Once satisfied, navigate to the JSON tab to reveal the JSON representation of your configured style and copy the entire JSON code.

[
  {
    "featureType": "poi",
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  }
]

Now to the ASL Settings > Maps, and paste that JSON into the textarea “Map Custom” and select the “Custom” from the Map layout, please also make sure that Google Advanced Markers is disabled, and save the settings.

How can I override the Map layout with the shortcode attribute for multiple maps? #

In order to change the map layout for multiple maps, you can utilize the map_layout shortcode attribute, this attribute will override the above selection from the ASL Settings > Maps tab.

 [ASL_STORELOCATOR map_layout="0"]

Possible options are (“0”, “1”, “2”, “3”, “4”, “5”, “6”, “7”, “8”,”-1″)<code class="wella">

How can I load the Default Google Maps Style? #

In order to load the default Google Maps style, please use the following shortcode.

 [ASL_STORELOCATOR map_layout="-1"]

2- Create Styling with Google Cloud Console #

You might have noticed that now Google has provided two options when you visit the Map Styler of the Google for styling your Google Maps, they have separated the older styler named as legacy while the new styling has been moved to the Google Cloud Console, so all the styling will be done in your Google Cloud Console account and you will just get a map_id that can be utilized by the Agile Store Locator Google Maps.

You should only be using this Google Cloud Console styler when you are using the Google Advanced Markers feature of our plugin, in case you are using the legacy Google Maps, you should follow the method explain above in the article.

So now, let’s go the Google Console, and click on the Create Style or you will already land on the styling wizard in case you haven’t used it before, so click on Open in Style Editor link.

So this will open up a complete Google Maps styler, where you can do all kind of customization to your map and the wizard is quite similar to the legacy wizard and most of the options such as POI, and other map features can be customized through it.

So once you have finished with the styling, save and publish the map with a name, and then you will see a section like below to associate a map_id and that id will be utilized in our shortcode to use the map which you have just customized.

Create a Map ID #

So now, as we have created our map styling but we don’t have a map id yet, for that go to the Map Management and create a map id.

Once the map is created, by clicking the save button, you will get a map id and will get a dropdown to associate the newly created map id to your map style that you had previously created, so associate that map style with this map id, and save it.

Once you have saved it, copy the Map ID and use it in your store locator shortcode as given below.

[ASL_STORELOCATOR map_id="e66a8e8c88928b28"]