--- 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-28 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.webp) 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 adding a Google Map in WordPress?** A: The map block needs three things in place: the Google Map block turned on under Nexter > Blocks, a Google Maps API key with the Maps JavaScript API enabled, and billing active in Google Cloud. Nexter Blocks Free covers the basic map, while Map Overlay Content and Custom Style Map are Pro features. That split matters because the free plugin still shows those switches, but they do not change the map unless Nexter Blocks Pro is active. **Q: Why is my WordPress Google Map grey or saying it cannot load Google Maps?** A: That usually points to an API setup problem, not a layout issue. The key needs to be saved through Connect Google Maps API Key, the Maps JavaScript API has to be enabled, and billing must be active in Google Cloud. Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter loads Google's Maps JavaScript API once per page, so a missing or invalid key stops the map before it renders. **Q: Can I add more than one location to the same Google Map block?** A: The Google Map block supports multiple pins on one map. Each extra location is added with Add Pin, and all pins share the same map instead of creating separate maps. That makes it better for contact pages or location pages where you want one view with several places marked. The important catch is that the map does not zoom out automatically to fit every pin, so Map Zoom has to be set so all locations stay visible. **Q: What is the best zoom level for a map with several pins?** A: The best zoom level is the one that keeps every pin visible at once, because this block does not auto-fit the map around your locations. Map Zoom runs from 1 for far out to 25 for close in, and decimals are rounded down, so the default 8.5 displays as 8. If your pins are spread out across different areas, a lower zoom usually works better than leaving the default and hoping it fits. **Q: Does the WordPress Google Map block work with custom markers and tooltips?** A: The block supports both custom marker images and tooltip text on each pin. Tooltip Content shows text when a visitor clicks a pin, and Tooltip Icon lets you replace Google's red marker with your own image. Basic HTML such as bold text and line breaks is allowed in Tooltip Content, which is useful when you want short location notes without building a separate page. **Q: Why do my overlay or custom map style settings not show on the live map?** A: Map Overlay Content and Custom Style Map are Pro features in Nexter Blocks. The free plugin can show their switches in the sidebar, but they will not change the live map unless Nexter Blocks Pro is active. A practical fix is to activate Pro first, then toggle the setting off and on again so the editor refreshes those controls.