Google has rolled out a new Map ID feature allowing customers to tie an ID with specific styling and features. This includes the new advanced marker feature, which will eventually replace the current marker functionality. For example, you may have noticed the following browser console warning that provides a deprecation date of at least 12 months from February 21st, 2024. Depending on how long Google supports the legacy markers, it appears all customers may need to eventually create a Map ID.
As of February 21st, 2024, google.maps.Marker is deprecated. Please use google.maps.marker.AdvancedMarkerElement instead. At this time, google.maps.Marker is not scheduled to be discontinued, but google.maps.marker.AdvancedMarkerElement is recommended over google.maps.Marker. While google.maps.Marker will continue to receive bug fixes for any major regressions, existing bugs in google.maps.Marker will not be addressed. At least 12 months notice will be given before support is discontinued. Please see https://developers.google.com/maps/deprecations for additional details and https://developers.google.com/maps/documentation/javascript/advanced-markers/migration for the migration guide.
Google outlines four primary reasons to use cloud-based map styling:
- Customize just under 100 unique map features. Review the full list of what can be styled on a map in the official documentation.
- Provides more ways to customize maps with more granular settings.
- Improves load times after the initial load time by utilizing caching. Subsequent views, pans, zooms, etc. are faster.
- Offers an improved map style editing interface.
Map ID support now available in Cardinal Locator
As of version 1.8.0 Cardinal Locator supports the Map ID via a new setting under Settings > Cardinal Locator > Style Settings > Map ID. It is fairly straightforward to set up and all the map styling can be controlled via the Google Cloud Console instead of previous methods, such as generating the large JavaScript array via Snazzy Maps or some other service. After saving your Map ID the markers will switch to the Advanced Marker functionality and the browser console notice highlighted above will go away. The Cardinal plugin still also supports legacy styling and markers, and there are no plans to deprecate the older functionality unless the Google Maps API stops supporting it.
Google Cloud Console map styling setup
- From the Google Cloud Console go to the Maps Management Page.
- Make sure the correct project is selected in the top toolbar and click the CREATE MAP ID button.
- Fill out the form as outlined.
- Name: Use a name to help you identify what the Map ID is being used for.
- Description: Optionally add additional details about how the map is used for your reference.
- Map type: Choose JavaScript.
- For the Raster vs. Vector either option can be chosen but for the typical locator the raster option will likely make the most sense.
- Click the Save button at the very bottom of the screen.
- Open the Map Styles page from the left column and click the CREATE MAP STYLE button.
- Go through all of the Map Features items to enable or disable the feature’s visibility and also control the color styling of each.
- Use the on-screen map as a preview of what the setting values will render as.
- In the far-right “Learn” column there are built in tutorials available. It’s recommended to go through the Maps Customization tutorial steps.
- You can also refer to Google’s official documentation for Cloud-based map styling.
- Make sure to click the Save button at the top right of the screen, use a name for your reference.
- The first time you save that version will be published. Note that subsequent updates do not automatically publish and the Publish button needs to be clicked after changes are saved.
- After you are satisfied with your map styling and have published your updates, go back to the Maps Management Page.
- Open the Map ID you previously created.
- Select the custom map style that you created.
- Click the Save button at the very bottom of the screen.
- Important note: it can take a few hours for published map styling to propagate and start displaying on your website.
- Copy your Map ID from the Maps Management Page and paste it into the new Cardinal Map ID setting at: WordPress dashboard > Settings > Cardinal Locator > Style Settings > Map ID. Then click the Save Changes button at the bottom of the screen.
If you run into issues applying the new styling to your map via the new Map ID, please first refer to Google’s map style troubleshooting steps in the documentation. If you’re still running into issues after going through the troubleshooting list, please feel free to submit a support ticket and we’ll be happy to assist with debugging.