How to Add Custom Map Markers

This article explains how to add custom markers to maps on your WordPress website.

Using the WP Google Maps Plugin

1. Install the plugin

   • Go to your WordPress admin dashboard
   • Click 'Plugins' then 'Add New'
   • Search for 'WP Google Maps'
   • Click 'Install Now' then 'Activate'

2. Create your first map

   • Go to 'Maps' in your WordPress menu
   • Click 'Add New Map'
   • Enter your business address in the search box
   • The map will show your location with a default red marker

3. Add custom markers

   • Click 'Add Marker' below the map
   • Enter the address where you want the marker
   • In the 'Marker' section, click 'Choose Image'
   • Upload your custom marker image (recommended size: 32x32 pixels)
   • Add a title and description for the marker
   • Click 'Add Marker'

4. Customise marker information

   • Click on any existing marker to edit it
   • Add your business name in the 'Title' field
   • Include contact details or opening hours in the 'Description'
   • Choose different marker colours from the dropdown menu

5. Add the map to your website

   • Copy the shortcode shown at the bottom (looks like [wpgmza id="1"])
   • Go to the page where you want the map
   • Paste the shortcode into your content
   • Update the page

Creating Custom Marker Images

Your custom markers should be small image files (PNG or JPG format). Create images that match your brand colours or business type. For example, restaurants might use a fork and knife icon, while shops could use a shopping bag symbol.

Keep marker images simple and recognisable at small sizes. Avoid detailed text or complex graphics that won't be visible when the image is shrunk down.

Using Elementor Map Widget

If your WordPress theme includes Elementor page builder:

1. Edit your page with Elementor
2. Search for 'Google Maps' widget
3. Drag it to your page
4. Enter your address in the widget settings
5. Upload a custom marker image in the 'Marker' section
6. Adjust the zoom level and map height

For more detailed guidance on adding interactive elements to your website, see our guide on how to add interactive maps.

Troubleshooting Common Issues

If your custom markers aren't showing:

• Check that your image file is under 2MB
• Ensure the image format is PNG or JPG
• Try clearing your website cache
• Make sure the plugin is activated and up to date

If the map isn't displaying at all, you may need a Google Maps API key. The plugin will show instructions for getting one from Google's developer console.

If you're still stuck with adding custom map markers, contact Web60 support through your dashboard for help.

FAQ

Q: What size should my custom marker images be?

A: Keep marker images around 32x32 pixels for best results. Larger images may appear blurry when automatically resized.

Q: Can I use different markers for different locations?

A: Yes, you can upload a unique marker image for each location when adding multiple markers to your map.

Q: Do I need a Google Maps API key?

A: Some map plugins require an API key from Google. The plugin will prompt you if one is needed and provide setup instructions.

Q: Can customers click on my custom markers?

A: Yes, you can add clickable information windows that appear when someone clicks your marker, showing business details or contact information.

Q: Will custom markers work on mobile devices?

A: Yes, custom markers display on all devices, but make sure they're large enough to be easily tapped on touchscreens.

Q: Can I change the marker after I've added it to the map?

A: Yes, click on any existing marker in the map editor to change its image, title, description, or position.

Q: What file types work for custom markers?

A: PNG and JPG files work best. PNG is recommended if your marker design has transparent areas.