Give a Unique Look to Your Google Maps in Drupal

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.

Drupal Google Maps Composer output 1
Drupal Google Maps Composer output 2
Drupal Google Maps Composer output3

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.
Get your Drupal Google Maps API Key
  • Scroll down until you see the blue Get a Key button and click on it.
  • Create a project name.
  • Click Next.
Create a project name
  • Copy the generated key.
  • Click Done.
Click Done for Drupal Google Maps
  • Paste the key in your Drupal site.
  • Click Save configuration.
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 Save and add fields
  • Click the blue Add field button.
  • Choose Geofield.
  • Add a proper label.
  • Click Save and continue.
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).

Notice that you can choose here multipĺe (or unlimited) values

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.
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.
geofield map

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.
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.
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.
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!

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.

Take a look at this style wizard application in Github

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.

Author

  • Jorge Montoya

    Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.

0 0 votes
Article Rating
Subscribe
Notify of
9 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Mark Conroy
Mark Conroy
6 years ago

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

BondD
BondD
6 years ago

API key is visible on step 5

Elmar
Elmar
3 years ago

Is it useable in the webform?

Imran Ali
Imran Ali
3 years ago

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

Imran Ali
Imran Ali
3 years ago

Nice explanation

khaledkhan-70448gmail-com

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.

imrodmartin
10 months ago

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
});

Last edited 10 months ago by imrodmartin
9
0
Would love your thoughts, please comment.x
()
x