Styled Maps
Styled Maps caters to two levels of users by offering both a standard theme option for quick, easy results or the option to add custom styling code such as the styles found on 'Snazzy Maps' for total control.
I will split these into two different methods below to explain how to achieve both levels of styling.
OK, before you start.
- Make sure you are in 'Edit' mode, have selected the 'Styled Maps' block from the blocks tab and have dragged it onto the page ready to add some settings.
- You have your Google Maps API key handy as you will need to copy / paste this into the Styled Maps form.
Already done this? Awesome, lets get started.
Standard Theme Styling (Basic)
Map settings (Tab 1)
- Google Maps API key - Paste your API key here. (Required)
- Map Title - If you would like a title above your map then enter one in here. (Optional)
- Location - Start typing a location or an address in this field and a dropdown list will begin populating results.
Choose your required location from the list.
- Zoom - Choose a number between 0 - 21 to set the zoom level of your map. With 0 being a 'world' view and 21 a street level veiw.
- Map Width - Set the desired Width of your map.
- Map Height - Set the desired Height of your map.
- Scroll Wheel - Enabling the scroll wheel allows the map to be zoomed in or out when the user interacts with their scroll wheel.
- Satellite View - Enables Satellite view controls. Allows the user to switch between Styled Maps view and satellite view.
- Street View - Enable Street view controls. Allows the user to switch between Styled Maps view and street view.
Map Styling (Tab 2)
- Add a Custom Map Marker - Upload or select a custom image to use as your maps location marker. (Optional)
- Custom Map Marker Width - Set the Width of your custom map marker in pixels.
- Custom Map Marker Height - Set the Height of your custom map marker in pixels.
- Select a Standard Theme (Basic) - Select a theme from the list to add to your map.
Add Info Window (Tab 3)
- Info Window Content - Use the rich text editor to add your info window content. (Optional)
- Display info window when map marker clicked - Check this option to have the info window display when the user clicks the map marker. Uncheck if you would like the info window to load when the map loads.
- Save - Press the Save button to create your new Styled map.
Custom Theme Styling (Advanced)
Map settings (Tab 1)
- Google Maps API key - Paste your API key here. (Required)
- Map Title - If you would like a title above your map then enter one in here. (Optional)
- Location - Start typing a location or an address in this field and a dropdown list will begin populating results.
Choose your required location from the list.
- Zoom - Choose a number between 0 - 21 to set the zoom level of your map. With 0 being a 'world' view and 21 a street level veiw.
- Map Width - Set the desired Width of your map.
- Map Height - Set the desired Height of your map.
- Enable Scroll Wheel - Enabling the scroll wheel allows the map to be zoomed in or out when the user interacts with their scroll wheel.
- Satellite View - Enables Satellite view controls. Allows the user to switch between Styled Maps view and satellite view.
- Street View - Enable Street view controls. Allows the user to switch between Styled Maps view and street view.
Map Styling (Tab 2)
- Add a Custom Map Marker - Upload or select a custom image to use as your maps location marker. (Optional)
- Custom Map Marker Width - Set the Width of your custom map marker in pixels.
- Custom Map Marker Height - Set the Height of your custom map marker in pixels.
- Select a Standard Theme (Basic) - Select 'Custom (Advanced)' from the list.
- Custom Snazzy Maps Code (Advanced) - Click the 'Get Snazzy Maps Styles Here' link.
Browse Snazzy Maps for a custom style or create your own from the 'Create' option in the menu.
Copy all the code to the left of screen including the opening square bracket [ everything in between and finally the closing square baracket ]. Alternatively, if you see the 'Copy' button next to the code then press that. (May be missing in Firefox)
Return to the add-on and paste this code into the 'Custom Snazzy Maps Code' text area.
Add Info Window (Tab 3)
- Info Window Content - Use the rich text editor to add your info window content. (Optional)
- Display info window when map marker clicked - Check this option to have the info window display when the user clicks the map marker. Uncheck if you would like the info window to load when the map loads.
- Save - Press the Save button to create your new Styled map.
For information, examples and other documentation please see here.