Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Drupal Tutorial: Map with Geofield, Geocoder and Address

Parent Feed: 

On our theme BizReview and Listiry, now available in Drupal 9, we have to solve the common problem with displaying nodes on maps.

Here are what we have used in our themes and have verified it is working. Please see the result as below:

Demo of maps on Drupal

Now please follow our tutorial on how to display maps on Drupal with Geofield, Address and Geocoder modules:

1. Install Drupal and Geofield

Install Drupal core:

composer create-project drupal/recommended-project my_site_name_dir

cd my_site_name_dir

Install geofield and geofield_map

composer require drupal/geofield drupal/geofield_map

Enable them all.

2. Create content types and fields

Now please create a new content type, "Listing" for example, and add a new field of type Geofield.

Go to Manage form display, and set the geofield's widget to Geofield Map

Set Geofield's manage form display to Geofield Map

Go to Manage display, and set the geofield's display to Geofield Google Map

Now you can create a testing node, enter the latitude and longitude as below:

Lat: 40.703081
Long: -73.935658

Save it and you can view the newly created node like this.

Demo of maps on a Drupal node

3. Autocomplete address:

As you can see, we can't just enter coordinates data (latitudes and longitudes) everytime we create nodes. How can we know the coordinates of an address?

The user friendly solution is when we type an address, it will automatically translate it to coordinates.

And that's when we need to use Google Place APIs in order to achieve that.

You need to register a free Google APIs key, please follow the guide here: https://developers.google.com/maps/gmp-get-started#enable-api-sdk

Enable Place APIs on Google Maps APIs

Note: you need to enable Geocoding, Maps and Place APIs on your Google Cloud Console.

When you enter a valid key at /admin/config/system/geofield_map_settings, please go to Manage form display and enable Address Geocoding of geofield.

enable Address Geocoding of geofield

Then you can start to enter addresses and they will be converted to coordinates automatically.

Address autocomplete on Drupal

The address info you type in, is only shown on the node edit form. So if you want to store it to display on the node page, please do the following:

Create a new field of type plain text, field_geoaddress for example.

On Manage form display, edit the setting of geofield, and set Geoaddress Field to field_geoaddress, select the option to hide it from the node form.

Set geoaddress for Geofield

The new field_geoaddress will keep the address you type in, so you can display it as you wish.

4. A complete Address field

If you want a complete address field with Street, Neigbour, City, State, Country fields ... you will need the Address module.

Install and enable Address module:

composer require drupal/address

Now create a new field of type Address on your content type. Then you can add complete address info on your nodes.

Address module on Drupal

5. Address to Geofield:

How can we automatically convert the address field to coordinates on Geofield? We need Geocoder:

Install the module:

composer require drupal/geocoder

Install Google Maps and Arcgis PHP package:

composer require geocoder-php/google-maps-provider geocoder-php/arcgis-online-provider

Tip: the "geocoder-php/arcgis-online-provider" is free (no API Key required), it is a good testing provider.
"geocoder-php/google-maps-provider" is good if you have an API key.

Enable all modules and submodules.

Config provider: /admin/config/system/geocoder/geocoder-provider, please add Google Maps and Arcgis Online Provider as the providers.

Config Geocoder providers

After that, please go to Manage fields, edit the geofield node and set it to geocode from the existing address field.

Config Geocoder for Geofield

When you are done with it, everytime you create a node with address info, Geocoder will automatically convert it to coordinates so it can be displayed on maps.

Have fun!

Author: 
RSS Tags: 
Original Post: