Skip to content

How to add custom markers in Google Maps in WordPress?

Updated On : September 28, 2026By : Reading Time : 2 minutes

Key Takeaways

  • Nexter Blocks’ free Google Map block sets a marker image for each pin, and pins without one keep Google’s red marker.
  • Google Map requires the block to be switched on under Nexter > Blocks and a Google Maps API key saved under Nexter > Extra Options > Settings.
  • Tooltip Icon uses a small PNG or SVG with a transparent background, around 40 to 60px tall, and Image Size controls how large the marker appears.
Table of Contents

A branded marker, such as your logo or a store icon, makes your locations stand out from other places on the map.

The free Google Map block in Nexter Blocks lets you set a marker image for each pin.

For every Google Map setting in one place, see the Google Map block guide.

LIVE BLOCK LINK

Before You Start

  • Edition: Free — works in Nexter Blocks (free) and with Nexter Blocks Pro.
  • Block to enable: Google Map, switched on under Nexter > Blocks in your WordPress dashboard.
  • A marker image: a small PNG or SVG with a transparent background, around 40–60px tall.
  • A Google Maps API key saved under Nexter > Extra Options > Settings.

Steps

  1. Add the Google Map block and open Content on the Layout tab.
  1. Open a pin under Pins and upload your marker in Tooltip Icon.
The Tooltip Icon and Image Size fields in a Google Map pin
  1. Pick an Image Size. The marker appears at that image size, so choose one close to the size you want.
  1. Repeat for other pins if they need their own marker, then save.

How It Behaves

  • Each pin uses its own Tooltip Icon. Pins without one keep Google’s red marker.
  • The tooltip text from Tooltip Content still opens when the marker is clicked.
A Google Map with a custom marker image in place of the default pin

Limitations

  • There is no separate width or height setting for the marker. Resize the image before uploading, or use Image Size.
  • Large images show at full size and can cover the map. Keep marker files small.

Troubleshooting

The marker is huge

Upload a smaller image, or choose a smaller Image Size such as Thumbnail.

The default red pin still shows

The image was added to a different pin. Open each pin under Pins and check Tooltip Icon.

Related Docs

Share your Thoughts

Still in Doubt? Let’s Assist You

Raise a ticket Now

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Join Us

Related Frequently Asked Questions

What do I need before adding custom markers in Google Maps in WordPress?

A small PNG or SVG with a transparent background is the key piece, and the page suggests keeping it around 40 to 60px tall. Nexter Blocks also needs the Google Map block switched on under Nexter > Blocks, plus a Google Maps API key saved under Nexter > Extra Options > Settings. That setup matters because the marker image is applied per pin, so a clean, small file gives you better control over how each location looks.

How do custom markers work on a Google Map block with multiple pins?

Each pin gets its own Tooltip Icon, so markers are set per location instead of globally. That means one store can use a logo while another pin keeps a different icon, and any pin without a marker image keeps Google’s red marker. The tooltip text from Tooltip Content still opens when the marker is clicked, so the icon changes the look without changing how the pin behaves.

What is the best image size for a custom map marker?

The safest choice is an image that already matches the size you want, because the marker appears at the selected Image Size. The page recommends a small PNG or SVG around 40 to 60px tall, which helps avoid oversized pins that cover too much of the map. If you need tighter control, resize the file before uploading or pick a smaller Image Size such as Thumbnail.

Why does my custom marker look huge on the map?

Large images show at full size and can cover the map, so the issue usually comes from uploading a file that is too big or choosing an Image Size that is too large. Nexter Blocks lets you fix that by uploading a smaller image or selecting a smaller Image Size such as Thumbnail. Keeping marker files small matters because there is no separate width or height setting for the marker.

Why is the default red pin still showing on my Google Map?

That usually means the image was added to a different pin. Each pin uses its own Tooltip Icon, so one missed pin will keep Google’s red marker even if another location has a custom image. Open each pin under Pins and check its Tooltip Icon field, especially if you added multiple locations and only some of them changed.

Can I use custom markers with multiple locations in one Google Map?

The setup works per pin, so multiple locations can each have their own marker image in the same map. That makes it useful when different branches, stores, or offices need distinct icons instead of one generic pin. If you are building out several locations, Add multiple locations to a Google Map pairs naturally with this because each location can carry its own Tooltip Icon.

Last reviewed: September 28, 2026

Related Docs

How to Add a Before and After Opacity Slider in WordPress?
icon
How to Add a Blend Cursor in WordPress?
icon
How to Add a Blockquote in WordPress?
icon
How to Add a Button in a WordPress Message Box?
icon
How to Add a Button in WordPress Timeline?
icon
How to Add a Call to Action Banner in WordPress?
icon
123………………………………………………………………53