14500+ website owners are using this wordpress map plugin

Buy Now - $89

Topic: Google Maps Design

We have included 15 color schemas which gives you new user experience in tabs and listings. You can also create your own schema according to your choice.

Apply color schema in google map tab and listing

Step 1 Go to Manage Map -> Edit page.

Step 2 Scroll down page and point to ‘Design Settings’ section.

Step 3 Then enable Apply Custom Design to apply the color schema.

Step 4 Change font size and select color for tab and listing according to your need.

Apply color schema in google map tab and listing

OR

Step 5 If you want to apply own schema color then enable the box Apply Own Schema.

Color schemas in your Google Maps tabs & listing

Step 6 The click Save Map and open it in browser you’ll see map tab and listing display in your selected color.

How to apply color schemas in your Google Maps tabs & listing WP Maps Pro

Did you know that you can personalize your Google Maps by customizing the map style to your liking? With just a few clicks, you can change the visual display of various elements like roads, parks, and built-up areas. You can even create your own custom styles for roads, labels, or geometry to give your maps a unique look and feel.

Create your own custom styles for roads, labels or geometry

Step 1 Go to Add or Edit Map and scroll down to the ‘Map Style Setting’ section.

Step 2 Select any Feature Type, Element type, and color.

  • Feature Type is used to select the geographical objects on the map, such as the road, the water, and the parks.
  • Element Type is used to target the element that is part of the geographical objects, such as the object shape, the fill, the stroke, and the object labels.

How to give a different style to your Google Map

Step 3 Save the map and open it in browser.
Below is the map you’ll create using elements.

Front Road map Wpmapspro

Change Map Theme:

This allows you to display and manage your custom map and implement your own map skin.
You can customize the style or theme of the Google maps.

Step 1 You can change the theme of the map. For this click on snazzymaps.com

Step 2 Select and click the theme you want to make change.

Step 3 Copy that JSON code from left side.

How to give a different style to your Google Map Wpmapspro

Step 4 Go to Add or Edit Map and Scroll down to ‘Map Style Setting’ section and paste it here to apply custom google maps skin.

How to give a different style to your Google Map

Step 5 Click Save Map to see the changes.
Before

Map Theme Before Wpmapspro

After

Map Theme After Wpmapspro

WP Google Map plugin helps you to embed Google Maps in your responsive website so the maps resize automatically based on the screen size of the visitor’s browser.

Responsive Google Maps

If you resize the browser or view the page on a small device, the embedded map would adjust its size automatically based on your screen size.

Step 1 Go to Add or Edit Map and leave the Map width column blank to make the map responsive.

Responsive Google Maps Map Width Wpmapspro

Step 2 click Save map and open it in browser.
Your map now will be responsive. Try resizing your browser to see it in action.

Responsive Google Maps Map Responsive

Non Responsive Google Maps

Step 3 To make the map non responsive enter any Map width.

Your map now will be non-responsive. Try resizing your browser to see it in action.

Google Map NonResponsive WP maps pro

Install Plugin Now!

This plugin is exclusively available at codecanyon.net. You'll get free updates and full support to use this plugin.