Can I use the Google map element with geo fields?

It is possible to create an address and geo coder fields on your Drupal content type which can then be connected to a Site Studio Google Map marker to display a map pin on that location. This allows a user to enter an address into a field and the lat and long of that address to be generated which can then be used to render a Google map.

See the steps below on how you can set this up on your website:

Step 1 - Install Modules

First install and enable the address, geofield and geocoder modules on your Drupal website in the usual way. All the geocoder sub modules should also be enabled. We recommend using composer as all the required libraries will also be installed.

Step 2 - Configure Geocoder

To configure Geocoder settings:

1. Navigate to Configuration > System > Geocoder configuration
2. Select a service that you would like to use for geocoding the address information on your website
   In this case we setup Google Maps and entered a Google Maps API key.

Step 3 - Add fields to content type

To add the Address and Geofields to your content type:

1. Navigate to your content type structure: Structure > Content types > (selected content type) > Manage fields
2. Click +add field and set field type to Address
3. Enter a field label
   The rest of the field settings can be left as the defaults
4. Click +add field and set field type to Geofield 
5. Enter a field label
6. Under Geocode method select Geocode from an existing field
7. Select the address field that was created earlier in the Geocode from an existing field dropdown
8. Set the Hide this field in the Content Edit Form; this will stop the field from displaying in the edit form as this field is populated automatically by the geofield module users don't need access to it
   
9. Select the Geocoder plugin to use that was setup in step 2.
   

Step 4 - Connect the geo fields to Google Map marker

To connect the content type fields to Site Studio elements in the content type template.

1. Navigate to Site Studio > Templates > Content template > Content type 
2. Edit content type template you would like the map to appear on
3. Add a Google map and Google map marker element to the layout canvas
4. Edit the Google map marker
5. Toggle into variable mode
6. Open the token browser and find the geo field containing the lat and long
   Tip: You can use the lat long pair token rather than the two separate tokens
7. Insert the token into the lat long field of the Google map marker