Upgrade Your Drupal Skills

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

See Advanced Courses NAH, I know Enough

AGILEDROP: How to Integrate Maps to Drupal 8

Parent Feed: 

Thanks to advancements in the tech industry, things that were once difficult have become incredibly easy now. One of these is finding addresses. As an online business, making sure your physical address is easily visible to your users can be crucial. What other way is there to show your visitors your address other than digital maps such as Google Maps, the largest and the most widely used online map software in the world. In this post, I’ll take a look at various ways of adding maps to your Drupal site and how they can be utilized for better convenience for your site visitors.

 

Integrating Google Maps

As with everything else Drupal, there’s a module for adding Google Maps to your site as well. The module is called Simple Google Maps. As the name implies, the module makes the process of embedding Google Maps to your site simple. So let’s get down to it.
First, download the module, install and enable it on your site.

Simple Google Maps

The module makes use of fields to embed Google Maps. So let’s create a field now. I will create a field for the article content type but you can do it for any content type you want Google maps to be embedded in.
Navigate to Admin -> Structure -> Content types -> Articles -> Manage Fields.

Content types

Click Add Field.

Add fields

Here, select Text (plain) from the dropdown and label it.

Add field

Now go to the Manage Display tab in the Manage Fields section and for the Google Maps field we created, select the format as Google Map from single one line address instead of plain text.

Google Map from single one line address

You can also set the size of the map as well as various preferences from here. Just click the cog icon on the right side and the tab will expand to reveal further settings. Now, click the cog icon and you will see all the settings you can change for your map such as size etc. Let’s set the size to 500x500. Make any other changes you want and click save.

Google maps

Note that in order to use static maps you will need to obtain an API key from Google, which can be done by going to https://developers.google.com/maps/documentation/maps-static/intro. In this example, just for illustration purposes, I’ll be using dynamic maps.

Now, create a new article to test the Google Maps integration. Go to Content -> Add content -> Article. Scroll down to the field we created earlier and type the address you wish the map to display.

Google maps

Now when you go to view the article you created, you should see a map already embedded in it.

Google maps

This method eliminates the need for copying and pasting iframe code for each individual node and address separately and makes it much easier in the long run.

Geofield Field Module

One of the most well-known module when it comes to mapping solutions on Drupal is the geolocation field module. Available on both Drupal 7 & Drupal 8, it boasts plenty of features such as finding addresses by name or by latitude & longitude. Let’s take a look at how it works on Drupal 8.

The geolocation field module allows you to create fields and add them to the content types you wish to associate addresses with. Let’s add a geolocation field to our article content type. Navigate to Structure -> Content types -> Article -> Manage fields -> Add fields and under the ‘re-use existing fields’ drop-down menu, select geolocation_demo_single for single location or geolocation_demo_multiple for multiple ones. I’ll select single for the simplest scenario.

In the default settings, you will note that the module takes longitudinal and latitudinal values as default which we don’t want. We want to allow the user to enter an address or pick a location from the map, which will then automatically be converted to longitudinal and latitudinal values. The good thing is, this module already has that functionality built-in. Simply go to manage form display in the content type configuration and select Geolocation Google Maps API.

Geolocation

For this, you will, of course, need to configure your Google Maps API. You also get options for changing various display settings for the map when you select this option.

Geolocation

And that’s it really for the very basic way of adding locations to maps via the geolocation field module.

 

Final Thoughts

Both of the modules we went through in this post are very popular and easily approachable when you are looking for mapping solutions to your Drupal site. But they aren’t the only ones, there are more modules being ported over to Drupal 8, such as leaflets. These allow you to delve deeper into mapping and create better solutions such as pointing out multiple locations in a single map. Or you can also your these mapping modules in conjunction with other popular Drupal modules such as views to create even more complex displays for these maps.

If you are in search for a reliable partner to develop a Drupal site for you or add any type of functionality, then look no further than Agiledrop. Our extensive experience in Drupal makes us an ideal candidate for all things Drupal. Feel free to get in touch with us and we’ll be happy to be of help!


 

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web