--- title: "How to Embed Google Maps in WordPress?" url: https://nexterwp.com/docs/add-google-map-in-wordpress/ date: 2023-02-01 modified: 2026-09-13 lang: en author: "Aditya Sharma" description: "A map on your contact or locations page shows visitors exactly where to find you. The Google Map block in Nexter Blocks embeds an interactive Google Map with one or..." image: https://nexterwp.com/wp-content/uploads/2024/05/google-map-block-settings-overview-1024x519.jpg word_count: 689 --- # How to Embed Google Maps in WordPress? ## Key Takeaways - Nexter Blocks Google Map block embeds an interactive Google Map with one or more pins, tooltips, custom marker images, and map controls. - Connect Google Maps API Key in Nexter > Extra Options > Settings requires the switch on, the settings gear, an API key pasted into Enter API Key, and Save. - Google Map block lets the user place pins by Latitude with Latitude Value and Longitude Value, or by Address in Location, then add more locations with Add Pin. - Map Overlay Content and Custom Style Map are Nexter Blocks Pro features, while pins, zoom, height, controls, and all four Variations work in the free plugin. A map on your contact or locations page shows visitors exactly where to find you. The Google Map block in Nexter Blocks embeds an interactive Google Map with one or more pins, tooltips, custom marker images and your choice of map controls. [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-google-maps/) ## Before You Start - **Edition:** Free, except **Map Overlay Content** and **Custom Style Map**, which need Nexter Blocks Pro.- **Block to enable:** Google Map, switched on under **Nexter > Blocks** in your WordPress dashboard.- **A Google Maps API key** with the Maps JavaScript API enabled. See [how to generate a Google Maps API key](https://nexterwp.com/docs/generate-google-maps-api-key/). ## Learn via Video Tutorial https://www.youtube.com/watch?v=fF32l7xS0Es ## Connect Your API Key - Go to **Nexter > Blocks**, search for **Google Map** and turn it on. ![The Nexter Blocks settings page filtered to the Google Map block](https://nexterwp.com/wp-content/uploads/2026/09/google-map-admin-enable.webp) - Go to **Nexter > Extra Options > Settings** and find **Connect Google Maps API Key**. ![The Connect Google Maps API Key card in Nexter Extra Options Settings](https://nexterwp.com/wp-content/uploads/2026/09/google-map-api-key-settings.webp) - Turn on the switch, click the settings gear, paste your key into **Enter API Key** and click **Save**. ## Add the Map - Add the **Google Map** block to your page and click **Design from Scratch**. - On the **Layout** tab, open **Content** and the first item under **Pins**. ![The Pins list of the Google Map block with the first pin open](https://nexterwp.com/wp-content/uploads/2026/09/google-map-layout-pins.webp) - Under **Set Pin By**, choose **Latitude** and fill in **Latitude Value** and **Longitude Value**, or choose **Address** and type it in **Location**. - Add the text visitors see on the pin in **Tooltip Content**. Upload an image in **Tooltip Icon** to replace the red marker. - Click **Add Pin** for each extra location, then set **Minimum Height** and **Map Zoom**. - Open the **Style** tab to pick map controls and a map type, then save. ![The Map panel on the Style tab with the map control switches and Variations](https://nexterwp.com/wp-content/uploads/2026/09/google-map-style-map.webp) ## Layout Settings | Panel | Setting | What it does | Default | | ----- | ------- | ------------ | ------- | | Content | Pins > Set Pin By | Place the pin by **Latitude** (Latitude Value and Longitude Value) or by **Address** (Location) | Latitude | | Content | Pins > Tooltip Content | Text shown when a visitor clicks the pin. Basic HTML such as bold and line breaks is allowed | Empty | | Content | Pins > Tooltip Icon, Image Size | A custom marker image and the size WordPress serves | Google's red marker | | Content | Add Pin | Adds another location to the same map | One pin | | Content | Minimum Height | Height of the map, per device | 300px | | Content | Map Zoom | Starting zoom, from 1 (far) to 25 (close) | 8.5 (shown as 8) | | Overlay Content | Map Overlay Content (Pro) | A title and description box on top of the map, with a show/hide button | Off | ## Style Settings | Panel | Setting | What it does | Default | | ----- | ------- | ------------ | ------- | | Map | Zoom Control, Scroll Wheel, Pan Control, Draggable, Map Type Control, Scale Control, Full-screen Control, Street View Control | Turns each map control or mouse interaction on or off | All on | | Map | Variations | ROADMAP, HYBRID, SATELLITE or TERRAIN | ROADMAP | | Map | Custom Style Map (Pro) | Recolours the map with one of seven **Creative Map Style** presets | Off | | Overlay Content | Colours, typography, background (Pro) | Styles the overlay box. Shows when Map Overlay Content is on | — | ![Seven Creative Map Style presets of the Google Map block](https://nexterwp.com/wp-content/uploads/2023/02/google-map-style-preview.png) The **Advanced** tab holds the options shared by all Nexter Blocks. ## How It Behaves - The map loads Google's Maps JavaScript API with the key saved in Extra Options, once per page.- All pins share one map. The map does not zoom out to fit them, so set **Map Zoom** so every pin is in view.- The editor shows your pins and settings; check the published page to see the live map.- Pins, zoom, height, controls and all four Variations work in the free plugin. With only the free plugin, Map Overlay Content and Custom Style Map show in the sidebar but do not change the map. ## Limitations - **Map Zoom uses whole numbers.** Decimals are rounded down, so the default 8.5 shows zoom 8.- **Map Overlay Content and Custom Style Map are Pro features**, although the free plugin shows their switches.- The map needs your own API key with billing enabled in Google Cloud. ## Troubleshooting ### The map is grey or says it cannot load Google Maps Check that **Connect Google Maps API Key** is on and the key is saved, that the key has the **Maps JavaScript API** enabled, and that billing is active in Google Cloud. ### The overlay or custom style does not show Both need Nexter Blocks Pro. Activate Pro, then turn the setting off and on again. ### The browser console shows a Google Maps error about loading the API more than once Another plugin or your theme also loads Google Maps. See [how to remove the Google Maps API error](https://nexterwp.com/docs/remove-google-maps-api-error/). ## Related Docs - [Generate a Google Maps API key](https://nexterwp.com/docs/generate-google-maps-api-key/)- [Add multiple locations to a Google Map](https://nexterwp.com/docs/add-multiple-locations-google-maps/)- [Add custom markers to Google Maps](https://nexterwp.com/docs/how-to-add-custom-markers-in-google-maps-in-wordpress/)- [Add a text overlay on Google Maps](https://nexterwp.com/docs/text-overlay-google-maps/)- [Advanced tab options for Nexter Blocks](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/) ## Frequently Asked Questions **Q: What do I need before embedding Google Maps in WordPress with Nexter Blocks?** A: The map block needs three things before it will work: the Google Map block switched on under Nexter > Blocks, a Google Maps API key with the Maps JavaScript API enabled, and billing active in Google Cloud. Nexter Blocks also keeps the free version usable for pins, zoom, height, controls, and all four Variations, while Map Overlay Content and Custom Style Map are Pro features. **Q: Why is my WordPress Google map showing grey or saying it cannot load Google Maps?** A: That usually points to the API setup, not the map layout. The fix is to confirm Connect Google Maps API Key is turned on, the key is saved, the Maps JavaScript API is enabled, and billing is active in Google Cloud. Nexter Blocks loads Google's Maps JavaScript API with the saved key once per page, so a bad key or missing billing stops the map before it renders. **Q: Can I use a WordPress Google map block for more than one location?** A: The Google Map block supports multiple pins on the same map. Each extra location is added with Add Pin, and all pins share one map instead of creating separate maps. That matters because the page will not auto-zoom out to fit every pin, so Map Zoom has to be set wide enough for all locations to stay visible. **Q: What is the best zoom setting for a WordPress Google map with several pins?** A: The safest choice is a zoom level that keeps every pin in view, because this block does not zoom out automatically to fit multiple locations. Map Zoom uses whole numbers only, and decimals are rounded down, so the default 8.5 displays as 8. If your locations are spread out, start wider and tighten it only after checking the published page. **Q: Why does my overlay or custom style not show on the Google Map block?** A: Map Overlay Content and Custom Style Map are Pro features in Nexter Blocks. The free plugin still shows their switches in the sidebar, but they do not change the map until Pro is active. A practical fix is to activate Pro first, then toggle the setting off and on again so the block refreshes its state. **Q: Why does Google Maps say the API was loaded more than once on my WordPress site?** A: That error usually means another plugin or your theme is also loading Google Maps. Nexter Blocks loads Google's Maps JavaScript API with the key saved in Extra Options once per page, so duplicate loaders collide. The clean fix is to remove the extra loader using [how to remove the Google Maps API error](https://nexterwp.com/docs/remove-google-maps-api-error/).