WP Residence Help WP Residence Help

  • WPRESIDENCE
  • Video Tutorials
  • Client Support
  • API
Home / Elementor Shortcodes Built-In / Widget: Maps with Properties or Contact Details

Widget: Maps with Properties or Contact Details

4688 views 1
Before reading this help file you may want to check this video. It explains how to create API Key for Google Maps and how to set it in the theme. Watch Video on Youtube

Content

  • Where the Google Maps API key is added
  • Before you start
  • Create a Google Cloud project
  • Enable the required Google APIs
  • Google Maps Static API for Overview and Print maps
  • Create the API key
  • Restrict the API key
  • Add the API key in WPResidence
  • How to check if the key is correct
  • OpenStreetMap and MapBox note
  • Related help

Where the Google Maps API Key Is Added

Google Maps requires your own API key before you start using it in WPResidence.

The API key is added in:

Theme Options → Map Configuration → Map General Settings

Important: This article applies when you use Google Maps as the map system. If you use OpenStreetMap, you do not need a Google Maps API key. For OpenStreetMap map images, use a MapBox API key instead.

Before You Start

To create and use a Google Maps API key, you need a Google Cloud project with billing enabled.

Google manages Google Maps pricing, billing, and free usage limits from Google Cloud. Check the official Google documentation for current pricing and cost control options:

Google Maps Platform billing and pricing

Set budgets, limits, and alerts

Important: To protect your Google Maps API key, restrict its usage to your website domain only.

Create a Google Cloud Project

Go to:

Google Cloud Console

  1. Log in with your Google account.
  2. Create a project or select an existing project.
  3. Add billing to the project.

Enable the Required Google APIs

In your Google Cloud project, go to the API Library and enable the APIs used by the theme map features.

Enable these APIs:

  1. Maps JavaScript API – required for the interactive Google map.
  2. Places API – used for Google Places and autocomplete features.
  3. Geocoding API – used to convert addresses into coordinates.
  4. Geolocation API – used for location-based map features.
  5. Street View Static API – used for Google Street View features.
  6. Google Maps Static API – required for map images used in Property Overview and Print/PDF.

Google Maps Static API for Overview and Print Maps

New: The Map item in the Property Overview section works with Google Maps when the Google Maps Static API is enabled.

The map is also included in Print/PDF and behaves like the Overview map.

These maps are map images, not interactive maps. That is why the Google Maps Static API is required.

Enable the Google Maps Static API in the same Google Cloud project connected to your Google Maps API key.


Google Maps Static API setting

Important: If the interactive Google map works, but the Map in Overview or Print/PDF appears as a broken image, check that the Google Maps Static API is enabled.

Create the API Key

After the required APIs are enabled, create the API key.

  1. Open the Google Cloud project.
  2. Go to APIs & Services → Credentials.
  3. Select Create Credentials → API key.
  4. Copy the generated API key.

Restrict the API Key

After the API key is created, restrict it so it can be used only on your website.

Use HTTP referrers as the application restriction and add your website domain.

Use wildcard rules for pages inside the main domain. For example:

https://yourdomain.com/*
https://www.yourdomain.com/*

Replace yourdomain.com with your real domain.

Important: If you add only https://yourdomain.com without the wildcard, the key may work only on the homepage and not on inner pages.

Add the API Key in WPResidence

Copy the API key from Google Cloud.

Then go to:

Theme Options → Map Configuration → Map General Settings

Paste the key in the Google Maps API key field and save the settings.

How to Check If the Key Is Correct

If the map does not load, open the page on the frontend and check the browser console.

To check the console:

  1. Open the page where the map should display.
  2. Right click on the page.
  3. Select Inspect.
  4. Open the Console tab.
  5. Read the exact Google Maps error shown there.

Common issues are:

  • The API key is missing or incorrect.
  • Billing is not enabled.
  • The required API is not enabled.
  • The domain restriction does not include the current domain.
  • The key is restricted to the wrong APIs.
  • The property does not have valid latitude / longitude coordinates.
Important: The console error is the most accurate way to know what must be corrected in Google Cloud.

OpenStreetMap and MapBox Note

If you use OpenStreetMap, you do not need a Google Maps API key.

However, for map images used in the Property Overview section and in Print/PDF, WPResidence needs a valid MapBox API key.

MapBox is used only for OpenStreetMap map images/tiles. It is not the same as Google Maps.

Map Type: OpenStreetMap or Google Maps

Related Help

  • Map Type: OpenStreetMap or Google Maps
  • Google Maps Extra Settings
  • Google Maps is not loading – what settings to check
  • How to find latitude and longitude / set Google Maps coordinates
  • How to set the location of a property on the map
  • Property Overview Map
  • Print PDF Management
Elementor Shortcodes Built-In

Related Articles

  • Navigation Menu Widget for Header Studio Template
  • Mortgage Calculator for Elementor Pages
  • Property Slider V1 for Elementor
  • Property Slider V2 for Elementor

Help Categories

  • 18Agent, Agency & Developers
  • 5Blog Posts & Blog Lists
  • 39Elementor Shortcodes Built-In
  • 46FAQ
  • 15Footer
  • 5Getting Started
  • 37Header
  • 2IDX & MLSImport
  • 6Installation & Setup
  • 24Installation FAQ
  • 23Maps & Location Settings
  • 21Multi-Language - Third Party Plugins
  • 6Other Third party Plugins
  • 21Pages
  • 4Payments & Monetization
  • 20Property Lists, Categories & Archive
  • 37Property Pages & Layouts
  • 31Search & Filtering
  • 162Technical how to | Custom Code Required
  • 8Technical: Actions and filters
  • 6Technical: Child Theme
  • 86Theme Options & Global Settings
  • 7Translations & Languages
  • 16WPBakery Shortcodes
  • 50WPEstate / WPResidence Translate Plugin
  • 51WPResidence / WPEstate CRM
  • 50WPResidence 5.0 Documentation
  • 9WPResidence Elementor Studio

Join Us On

Powered by WP Estate - All Rights Reserved
  • WPRESIDENCE
  • Video Tutorials
  • Client Support
  • API