Give a Unique Look to Your Google Maps in Drupal
Google Maps don’t look appealing or pretty by default when you embed them in your Drupal content. Nor do they always nicely coordinate with your site look and feel.
What if you found a way to give them a custom design? For example – your own color? In this tutorial, you will learn how to give your Drupal Google Maps a custom style with the Styled Google Map contrib module.
Step #1. Download the Required Modules
For this example, you’ll have to download and enable 3 Modules.
- Styled Google Map.
- Geofield Map.
- Geofield (this is a dependency for the other two modules).
Use your preferred method to download the modules. I’m using the Composer since it will automatically take care of all the needed dependencies.
Step #2. Configure the Styled Google Map Settings
- Click Configuration > Web services > Styled Google Map settings page.
- Click the link above the blue button.
- Get yourAPI Key from Google.
- Scroll down until you see the blue Get a Key button and click on it.
- Create a project name.
- Click Next.
- Copy the generated key.
- Click Done.
- Paste the key in your Drupal site.
- Click Save configuration.
Step #3. Create a Content Type with a Location
- Click Structure > Content types > Add content type.
- Give your content type a proper name.
- Click Save.
- Add fields.
- Click the blue Add field button.
- Choose Geofield.
- Add a proper label.
- Click Save and continue.
- Leave the default number of values.
- Click Save field settings.
Notice that you can choose here multipĺe (or unlimited) values if you want to show more than one marker in the same map (for example a fast food chain with multiple locations).
Step #4. Configure the Content Type Display
- Click Structure > Content types > Location > Manage display.
- Look for your Geofield field.
- Change the format to Styled Google Map.
- There’s a cogwheel on the right, it handles various configuration options for the map (we’ll come back here later).
- Click Save.
Step #5. Configure the Form Display
- Click Structure > Content types > Location > Manage form display.
- Look for your Geofield field.
- Change the widget to Geofield Map.
- Click Save.
Step #6. Create a Node
- Create a node by the Location type.
- The Geofield Map widget you chose in the last step will help you to position the marker with an address (and not with latitude and longitude values).
- Click Save.
Step #7. Configure The Map Design
There are lots of map designs on this site.
- Choose your preferred one.
- Copy the JavaScript code on the left.
- Click Structure > Content types > Location > Manage display.
- Click the cogwheel on the right of your Geofield field. You’ll find a lot of configuration options. Feel free to explore and experiment with them.
- Scroll down and select MAP STYLE.
- Paste the code you selected into the textbox.
- Click Update.
- Click Save.
Take a look at your node, the map has now a custom look!
If you want to customize your maps even further and with your own colors, take a look at this style wizard application in Github, it helps you generate the JSON code required to style the map.
Additional Reading:
Would you like to know more about how to build great websites with Drupal 8? Sign up for our Video Club and watch its easy to follow lessons at your convenience.
I find the quickest way to do this is to just use the geolocation field. It has a field on the display to input the JSON for the styled map – all in one module.
https://www.drupal.org/project/geolocation
Hello Mark,
thanks for your feedback and for the tip. Indeed, that’s another way to style maps.
We wrote something about the Geolocation field module (with another approach) here: https://www.ostraining.com/blog/drupal/display-map-markers-in-drupal-8-with-geolocation-module/
You can style the map in the FORMAT settings of the view in that case, by pasting the JSON code there.
Thanks again for the tip!
Regards
API key is visible on step 5
Hello BondD,
thanks for the heads-up. Image has been changed. Regards!
Is it useable in the webform?
Hi Jorge,
I am facing issue in zooming, when I add two or more POI’s (Point of interests) on map and after in a page where I used these created POI’s in admin section (OTL) if we select DEFAULT GMAP COORDINATES, In a page the numbered image will display based on the number of POI’s, If I click that image it is not getting zoom for first click and it is getting zoom in for next second click. I want it can be zoom in for first click itself how to do this , screenshots are attaching for reference.
Thanks in advance
Nice explanation
I am using geofield map module for my task. But i am facing one issue. Marker size appears to be big. I want to decrease marker size on map how can I do that. Help is appreciated.
I believe this can be accomplished with some CSS. You can either add it to your theme or use asset injector. (https://drupal.org/project/asset_injector)
const icon = { url: "../res/sit_marron.png", // url scaledSize: new google.maps.Size(50, 50), // scaled size origin: new google.maps.Point(0,0), // origin anchor: new google.maps.Point(0, 0) // anchor }; const marker = new google.maps.Marker({ position: new google.maps.LatLng(lat, lng), map: map, icon: icon });