Upgrade Your Drupal Skills
We trained 1,000+ Drupal Developers over the last decade.
See Advanced Courses NAH, I know EnoughDrupal Tutorial: Map with Geofield, Geocoder and Address
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:
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
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.
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
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.
Then you can start to enter addresses and they will be converted to coordinates automatically.
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.
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.
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.
After that, please go to Manage fields, edit the geofield node and set it to geocode from the existing address field.
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!