To display your map, you need to:
- Define (style) a div to be used as a map canvas
- Initialise Google Maps
- Define the map – when working in WordPress I prefer to save this as a *.js file and enqueue this
It’s important that these three elements are added to the document head, in the specified order. You can see this in action in the “Enqueue Scripts” gist at the end of this post.
The Google Styled Maps Wizard is a useful way of coding custom JSON data to be passed to your map, which is how it the map gets it’s custom style. It’s not a particularly great way of creating an entire map, but it’s useful for getting the right JSON data for particular element.
Here’s an example of a customised Google map that was created with a client’s brand colours:
Coding the Map
Here’s the code used for this map:
The functions and action hooks below enqueue map styles and scripts properly. They could be added to the active theme functions.php file, or they could be adapted for use in a plugin.