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.
We’ll need the following modules installed and enabled before we start:
- Address Field
How It Works
- First, the Address Field module is used to create and store location information
- 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
- This information is displayed as a map and using the Leaflet module we can change the standard Google styling of the map
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
Create a new Content Type, for our example, we’ll just use ‘Destinations.’
Under Manage Fields we're going to add two new fields:
- Location - with a field type of ‘Postal Address’ and a widget of ‘Dynamic Address Form’
- 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:
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.
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.
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
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.