3 Ways to Embed Google Maps in WordPress Site

The main goal of building a business website is to enable potential customers to learn more about you as well as get in touch with you easily. If you run your WordPress site with a business from a physical location, displaying Google Maps can be a better way of sharing your address than just plain text. Further, Google maps are interactive and flexible, enabling users to switch the viewing mode and save a map for quicker navigations. This article discusses ways of embedding Google Maps in WordPress site without plugin and using plugin.

Related: How to embed PDF files in WordPress?

Method 1: Embed Single Simple Map in WordPress

You can embed a basic map of a given location such as business location, a particular city or a regional area using the Google Maps embed code.

Step 1: Get the Map Embed Code from Google Maps

• To do so, open the Google Maps website and search for the location, or area you want to display on your map.
• This will focus the map on your area of interest and display various option just below the result on the left panel. Click the “Share” link.

• On the resulting pop-up, move to the “Embed map” tab and click “COPY HTML” to copy the map embed code.

• You can adjust the embed size by clicking the sizing arrow and pick large, medium or small depending on your preferences.

Step 2: Inserting Google Maps in WordPress Page/ Post

• Login to your WP site Admin area and open or create a new post/page where you want to add the Map.
• Add a block editor and choose “Custom HTML” block in the “Formatting” category.

• Paste the Google Map embed code in the block editor.

• You can now preview and publish the post/ page. If you are adding a map to an existing page/ post, click “Update” to save the changes.

Method 2: How to Embed a Custom Map with Multiple Location Markers

Step 1: Creating a Custom Google Map

First, you should have created a custom map or create a new one.

• To do so, Open Google Maps with My Maps interface, choose a map or click “CREATE A NEW MAP” to create one.

• Customize the map by adding multiple location markers, modify the icons, colours and map theme among other elements.

Learn WordPress: Check out 500+ free WordPress tutorials.

Step 2: Generate the Google Map Embed Code

• After building the map, you need to configure the map sharing options. Click the “Share” button to access the settings wizard.

• Set the “Who has access” option to “Public on the web” and click “Done”.

• To change the access settings, click the “Change…” link. This opens a new pop up, check the first option and click the save button.

• Now click the map menu icon (the three dots) next to the map title and select “Embed on my site”.

• Copy the HTML code from the Google map embed code box.

Step 3: Add the HTML Code to your Post or Page in WordPress

• To embed the custom map, repeat the process explained in step 2 of Method 1 above.
• Preview and publish the post or page.

Method 3: How to Embed Google Maps with WordPress Plugins

There are a variety of WordPress plugins for this, providing different features for your different requirements.

Step 1: Embed Google Maps with WP Google Map Plugins

• Search for the plugin in the plugins directory, install and activate.

Step 2: Configuring the WP Google Map Settings

• Before you start creating a map you need to create and add the API key for the plugin to work.
• Go to  “Maps” on the sidebar menu and select “Settings.
• Copy and paste the API key in the space provided and click “save”.

• Scroll down the map settings under the “Maps” tab to enable/ disable various map features, set the access level and so on.

• You may also navigate the other tabs to configure settings for the various map elements and functions.
• Once you modify any settings, scroll to the bottom of the tab and click “Save Settings”.

Related: How to install WordPress locally in Mac?

Step 3: Creating a Custom Map

• Under the “Maps” on the sidebar menu click “Maps” to open the map maker.
• On the first section of the maker page, you can customize the maps general settings, map theme and other advanced settings by clicking on the appropriate tab.
• For the “General Settings”, edit the map title, size, and alignment and specify the zoom level.

• Select a theme for your map under the “Theme” tab.

Step 4: Adding Markers to your Custom Maps

• Scroll down the page to the “Markers” section, enter the location and click “Add Marker”. You can use the mouse to drag and change the map layout on the map displayed on the right side as well as customize the marker icon.
• Once you are done with the settings, click the “Save Map” button.
• Copy the maps shortcode and use it on your page or post to display the custom map.

Wrapping up

You can use the manual methods to embed Google maps on your site or choose one of the available WordPress plugins to implement advanced and flexible map functions depending on your needs. However, you should always balance the use of maps and site speeds as maps may slow down site performance.