Are you tired of seeing the same old styled Google map? With a few easy-to-configure modules and some basic Drupal know-how, you can create awesome styled maps that don't use the default Google Maps styling.

Required Modules

We’ll need the following modules installed and enabled before we start:

  • Address Field
  • Geofield 
  • Geocoder
  • GeoPHP
  • Leaflet

How It Works

  1. First, the Address Field module is used to create and store location information 
  2. Geofield, Geocoder and GeoPHP will work together to store geographic data (our address) and convert it into latitude/longitude data and then store it into another field
  3. This information is displayed as a map and using the Leaflet module we can change the standard Google styling of the map

Implementation

Make sure to install all the required modules. You can use the following drush command to install modules at once from the command line:

drush dl addressfield geofield  geocoder geophp leaflet

You will also need to download the Leaflet Javascript library and place it into a folder labeled "leaflet" in your libraries folder (sites/all/libraries/leaflet).

Create a new Content Type, for our example, we’ll just use ‘Destinations.’

Under Manage Fields we're going to add two new fields:

  1. Location - with a field type of ‘Postal Address’ and a widget of ‘Dynamic Address Form’
  2. Location Lat/Lon - with a field type of ‘Geofield’ and a widget of ‘Geocode from Another Field’

Create a new Destination and give it some basic information. Our Example:

Title: Designzillas

Location: United States 250 N. Orange Ave. Ste 1250, Orlando, FL 32801

Now, at this point, after you save and view your page, you should see your address information along with point information for the address (the latitude/longitude). This is being pulled using the Geo modules.

To make it into a map, in your admin, go to your Destination Content-Type and go to the Manage Display tab. We are going to change the format of the Location Lat/Lon to Geofield Map. We are going to leave all of the settings at default for now. Save and view your page.

We now have a standard Google map with a pin to your location. 

Default Map

Standard Google Map

Time to Get Creative

Now let's go one step further and style the map away from that default look.

Go back to ‘Manage Display’ for your Destinations Content Type. We're going to change the format for Location Lat/Lon to Leaflet now. Click the gear icon on the right to open up settings. You now have more than 20 options for map stylings; for now, we're going to choose "Stamen Watercolors." Leave everything else on default settings, for now, save your content type and view your destination page.

Stamen Map

BAM! WOW!! THAT’S A SEXY MAP!!!

Using the settings that Leaflet provides you can configure your map size, popup options, pins and zoom options. Here are a couple other examples. 

Esri National Geographic

Esri National Geographic

OSM OpenWeatherMap

OSM OpenWeatherMap

Conclusion

See? We now have options to get away from the default map stylings. Play around with all the options to see what customizations you can make!

Hearing about growth-driven design for the first time? Learn more about the three pillars of GDD and how this methodology can help you solve your greatest marketing challenges.

Download FREE E-book

blog author

Author

Designzillas

As a leading digital marketing agency in Orlando, Designzillas’ purpose is to create ferocious online presences for every client and to build strong client-partner relationships.

You May Also Like