Styled Google Map

Styled Google Map is a module that integrates as a geofield formatter. You have options that include setting a custom map style, custom marker and custom marker icon.

Installation

Install and enable the Geofield module and its required module Styled Google Map in the usual way. Learn more about installing Drupal modules.

Basic usage

1. After creating a geofield go to the Manage Display tab
2. On your desired display select the Styled Google Map formatter
3. Setup the options by clicking on the cogwheel
4. Save the display

Using a custom map style

Google Maps API v3 allows for styled maps. A style is represented by an array of map features and stylers. Snazzy maps already contains some examples you can use. In case you want to create your own style or want to alter a style you can use this github page to create your own. Using your chosen style can be done by saving the JSON Style field with your style array.

• Using a custom pin

Set the URL to the marker field. This field can accept any path using the System stream wrapper Module. The module has an example thanks to GraphicsDrawer

• Using a custom popup/info window

You are allowed to choose a field or view mode. Selecting a field should be sufficient if you just want to show the address or title. In case you want to show a more complex popup. You can select a view mode that has multiple fields (Ex. teaser view mode). Using view modes also support the use of Field Groups.

Theming

In case the default rendering of the map and settings should be altered. You can overwrite the theming function.

/**
 * Returns HTML for the styled google map.
 *
 * @param array $variables
 *   An associative array containing:
 *   - location: The location object including longitude and latitude.
 *   - display: Display array including formatter settings.
 *
 * @ingroup themeable
 */
function theme_styled_google_map(array $variables) { }

Styled Google Maps version 3

Styled google maps version 3 replaced old clustering library with google's new Advance marker cluster and Grid clustering algorithms. Infobuble (For pupups) library is also replaced with google InfoWindow library that comes with API.  This version also replaces the marker library with google's Advance Markers. 

Google has moved the ability to style maps to their cloud. That means we no longer can styles using using JSON. We have to use google's new interface for styling the map on cloud. 

Map ID

A map ID is a unique identifier that represents Google Map styling and configuration settings that are stored in Google Cloud. You use map IDs to enable features or manage or style maps on your websites and in your applications. You can create map IDs for each platform you need--JavaScript, Android, iOS, or Static maps--in your Google Cloud console project on the Map Management page.

Map Styles

Associate a map ID with a map style to style, customize, and manage your maps using the Google Cloud console. The map style associated with your map IDs is then displayed on your website once you put it in styles google map settings.
 

When you go to field formatter settings or views settings you will see new settings for Map ID. That will pull the styling of your map.