Styled Google Maps — Brand your map in under 3 minutes

The big picture approach

Style Google Maps like an image layer

Use filters and blend layers. This gives you enough control to brand your map so that it suits your theme style.

1. Add the Google Maps component

Framer includes a Google Maps widget.

Steps:

• Open Insert in the top left

• Use search and type map or goo...

• Select Google Maps

• Drag it onto the canvas or click to place it

Pro tip

Using search avoids menu structure changes.

2. Place and size the map

Before styling, lock the layout.

• Place the map directly on the page or inside a frame.

• Set width and height

• Adjust corner radius if needed

• Make sure responsive sizing behaves correctly

Once placement feels right, move on. Styling comes next.

3. Quick styling with filters

This is the fastest method and often enough.

Steps:

• Select the Google Maps component

• In the right sidebar, find Styles

• Click +

• Add Filters

Add these filters:

Hue

• Shifts the overall color tone

• Useful for matching brand color temperature

Saturation

• Controls color intensity

• Helps reduce visual noise or make accents pop

What this affects most:

• Water

• Parks

• Roads

This works best for micro adjustments, not full redesigns. Here is an example map with filters applied.

Dark mode tip

If your site is dark:

• Add Filter → Invert

• Then fine-tune with Hue and Saturation

• You can also experiment with Brightness and Contrast if needed.

  

4. Advanced control with blend layers

If filters are not enough, use an overlay.

Step A. Create an overlay layer

• Add a new layer inside the same container as the map

• Set it to Position: Absolute

• Width: 100 percent

• Height: 100 percent

• Place it above the map using Z index

Step B. Preserve map interaction

With the overlay selected:

• Go to Styles → +

• Add Pointer Events

• Set to None

This is critical. Without this, the overlay blocks pan, zoom, and clicks.

5. Use blending modes intentionally

This is where you get real control.

Blending works by combining three things:

• The base pixels of the map

• The overlay color

• The overlay opacity

If the result feels wrong, it is usually because the overlay color or opacity is wrong, not the blend mode itself.

Setup:

• Select the overlay layer

• Go to Styles → +

• Add Blending

• Choose a blend mode

• Adjust overlay opacity before switching modes

The most useful blend modes

Multiply

What it does:

• Darkens the map by multiplying base and overlay values

• White has almost no effect

• Dark colors darken strongly

When to use:

• The map is light and feels too bright

• You want a darker, moodier, brand-tinted look

How to use:

• Pick a dark brand color

• Lower opacity until labels remain readable

Screen

What it does:

• Lightens the map

• Black has almost no effect

• Light colors brighten strongly

When to use:

• You want a softer, washed look

• The map should visually sit behind the content

How to use:

• Use a light overlay color

• Keep opacity moderate to preserve structure

Color

What it does:

• Applies hue and saturation from the overlay

• Preserves more of the original light and dark structure

When to use:

• You want brand color influence without heavy contrast shifts

• Multiply or Screen feels too aggressive

How to use:

• Use a brand color overlay

• Control intensity mainly with opacity

• Combine with Hue and Saturation filters on the map

Color Burn

What it does:

• Similar to Multiply but increases contrast more aggressively

When to use:

• You want a deeper, punchier look

• Multiply feels too flat

How to use:

• Start at very low opacity

• Best on light maps with dark overlays

Lighten

What it does:

• Keeps whichever pixel is lighter between map and overlay

When to use:

• Screen feels too strong

• You want highlights to stay clean

Difference or Exclusion

What it does:

• Creates inversion based on pixel differences

When to use:

• Experimental or technical aesthetics

• Sometimes useful after inverting the map

Warning:

• Easy to destroy readability

• Use carefully

Quick decision guide

If the base map is light:

• Start with Multiply

• If you need more contrast, try Color Burn

• If you want hue without heavy darkening, try Color

If the base map is dark or inverted:

• Start with Screen

• If Screen washes out too much, try Lighten

• If you want a controlled hue shift, try Color

If you want a subtle brand tint:

• Use Color plus low opacity

• Fine-tune with Hue and Saturation

6. Accessibility check

After styling:

• Check the road and label contrast

• Ensure markers are still readable

• Avoid extreme blends that hide detail

A branded map is useless if users cannot read it.

7. Done! You now have a styled Google Maps widget that:

• Matches your site theme

• Took only a few minutes to set up

Small details like this significantly improve perceived quality.Hope you have a styled map ready!

Bonus: Simple map preloader

Google Maps may load with a short delay.

If the map is visible in the first viewport, a preloader avoids confusion.

Option A. Create a simple loader

• Add a shape or text

• Apply a looping rotation or opacity effect

Option B. Reuse Framer’s built-in loader

• Add a Form

• Enter the submit button component

• Find the Loading variant

• Copy the conic loader shape

• Paste this into your map container

Final setup:

• Position loader absolutely

• Center it

• Assign Z index values

• Loader below map (lower Z index), map above loader

  Once the map loads, the loader is visually covered.

  

The End