How to use this add-on

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)

  1. Google Maps API key - Paste your API key here. (Required)

  2. Map Title - If you would like a title above your map then enter one in here. (Optional)

  3. 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.

  4. 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.

  5. Map Width - Set the desired Width of your map.

  6. Map Height - Set the desired Height of your map.

  7. Scroll Wheel - Enabling the scroll wheel allows the map to be zoomed in or out when the user interacts with their scroll wheel.

  8. Satellite View - Enables Satellite view controls. Allows the user to switch between Styled Maps view and satellite view.

  9. Street View - Enable Street view controls. Allows the user to switch between Styled Maps view and street view.

 

Map Styling (Tab 2)

  1. Add a Custom Map Marker - Upload or select a custom image to use as your maps location marker. (Optional)

  2. Custom Map Marker Width - Set the Width of your custom map marker in pixels.

  3. Custom Map Marker Height - Set the Height of your custom map marker in pixels.

  4. Select a Standard Theme (Basic) - Select a theme from the list to add to your map.

 

Add Info Window (Tab 3)

  1. Info Window Content - Use the rich text editor to add your info window content. (Optional)

  2. 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.

  3. Save - Press the Save button to create your new Styled map.

 

 

 

Custom Theme Styling (Advanced)

Map settings (Tab 1)

  1. Google Maps API key - Paste your API key here. (Required)

  2. Map Title - If you would like a title above your map then enter one in here. (Optional)

  3. 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.

  4. 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.

  5. Map Width - Set the desired Width of your map.

  6. Map Height - Set the desired Height of your map.

  7. Enable Scroll Wheel - Enabling the scroll wheel allows the map to be zoomed in or out when the user interacts with their scroll wheel.

  8. Satellite View - Enables Satellite view controls. Allows the user to switch between Styled Maps view and satellite view.

  9. Street View - Enable Street view controls. Allows the user to switch between Styled Maps view and street view.

 

Map Styling (Tab 2)

  1. Add a Custom Map Marker - Upload or select a custom image to use as your maps location marker. (Optional)

  2. Custom Map Marker Width - Set the Width of your custom map marker in pixels.

  3. Custom Map Marker Height - Set the Height of your custom map marker in pixels.

  4. Select a Standard Theme (Basic) - Select 'Custom (Advanced)' from the list.

  5. 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)

  1. Info Window Content - Use the rich text editor to add your info window content. (Optional)

  2. 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.

  3. Save - Press the Save button to create your new Styled map.



For information, examples and other documentation please see here.