A step-by-step reference for creating a Google Maps API key, securing it, enabling billing, and adding it to your travel website through the backend panel. No coding required.
Your travel website uses Google Maps to show property locations, calculate transfer routes, and convert addresses into coordinates. For these features to work, Google requires a unique API key tied to your own Google account and a billing account on the project.
This guide walks through generating that key, restricting it securely, enabling billing, and saving it into the Technoheaven backend panel — covering all four parts in one complete reference.
⚠ Billing must be enabled — this is mandatory
Google Maps APIs will not work without an active billing account linked to your project, even on the free tier. Without it, maps load as a grey box with a “For development purposes only” watermark. Google provides a recurring $200 monthly free credit, so for most websites the real cost stays at or near zero — but a billing account with a valid card must still be attached. Full details in Part 4.
Google Maps by the Numbers — 2026
“Near me” searches have grown 400% since 2020 [Google Trends] — location-based discovery is now central to how travellers find hotels, transfers, tours, and activities. A broken Google Maps API key directly impacts that funnel.
Part 1 — How Do You Generate a Google Maps API Key?
Do this once per website. If you already have a Google Cloud project for this site, you can reuse it and skip to Step 4.
1
Open the Google Cloud Console
Go to console.cloud.google.com and sign in with the Google account you want to own this key. Use a business or company account where possible — not a personal one — so that key ownership stays with the organisation.
2
Create or select a project
Click Select a project at the top, then New Project. Give it a clear name (for example, your website name) and create it. If a project already exists for this site, select it instead.
3
Open the API Library
With the project selected, go to APIs & Services → Library from the left menu.
4
Enable the required APIs
Search for and enable each API your site needs. For a travel portal, enable all three: Maps JavaScript API, Geocoding API, and Places API. Open each one and click Enable. See Section 5 for a full API reference table.
5
Go to Credentials
Navigate to APIs & Services → Credentials.
6
Create the API key
Click Create Credentials → API Key. Google generates the key instantly.
7
Copy & save it securely
Copy the key and store it somewhere safe — a password manager or your internal credentials sheet. Treat it like a password. Anyone with the key can consume your Google quota. You will paste it into the backend panel in Part 3.
🔑 What an API key looks like
A Google Maps API key is a long string beginning with AIza… — for example AIzaSyABC123…xyz. Do not share it in public chats, screenshots, or public code repositories.
Part 2 — How Do You Restrict a Google Maps API Key?
An unrestricted key can be copied from your website source code and used by anyone, running up charges on your account. Restricting it takes two minutes and prevents misuse. This step is strongly recommended before the key goes into production.
8
Open the key's settings
In Credentials, click the key name or the pencil / Edit icon next to it.
9
Add application restrictions
Under Application restrictions, choose:
- HTTP referrers for websites — add your domains, e.g.
https://yourdomain.com/* and https://www.yourdomain.com/* - IP addresses for server-side use — add the server IPs that will call the API from the backend.
10
Add API restrictions
Under API restrictions, select Restrict key and tick only the APIs you enabled in Step 4. The key will be rejected if used for any API not in this list.
11
Save
Click Save. Restriction changes can take a few minutes to propagate across Google's infrastructure.
⚠ If you also need a server key
Website (referrer-restricted) keys and server (IP-restricted) keys work differently and cannot share the same restriction type. If your travel platform calls Google Maps from both the browser and the backend — for example, geocoding supplier addresses server-side for hotel mapping — create two separate keys: one restricted by HTTP referrer, one restricted by IP.
Part 3 — Where Do You Add the Key in the Backend Panel?
Once the key is ready, save it into the website through the Technoheaven backend panel. The same panel manages other third-party keys and scripts — the process below is identical for each; only the values change.
Path: Backend Panel › Common Module › Social Media App Config Settings › + New Config Setting
In the left menu open Common Module → Social Media App Config Settings. Use + New Social Media App Config Setting (top right) to add a new row. The existing GoogleMapsApiKey rows show the expected Config Key name and the AIza… Config Value format, listed separately for B2B and B2C websites.
12
Open the config settings
Log in to the backend panel and open Common Module → Social Media App Config Settings.
13
Add a new config setting
Click + New Social Media App Config Setting and fill in the form:
| Website | Select the website this key belongs to — e.g. B2B or B2C under Website Master. |
| Config Key | Enter exactly GoogleMapsApiKey — spelling and capitalisation must match. Note the “s” in Maps and the capital M, A, K. |
| Config Value | Paste the API key you copied from Google Cloud — the AIza… string. |
| Is Encrypted | Leave unticked for the Maps key — it is used in the browser and is not stored encrypted. Keys like reCAPTCHA secrets are encrypted instead. |
| Is Active | Tick this so the setting is live on the website. |
14
Save and verify
Click Save. Reload the website's map page to confirm the map now displays correctly without the grey box watermark.
💡 Same panel for other integrations
To add the Tawk.to live-chat widget, repeat the same steps with Config Key: Tawk.to and paste the Tawk.to script from your Tawk.to dashboard into Config Value. Keep Is Active ticked and save. The process is identical for all third-party integrations managed through this panel.
Part 4 — How Do You Set Up Google Maps Billing?
Google requires a billing account attached to the project before any Maps API will serve real data. This is a Google policy — not a setting in your website. It must be completed inside Google Cloud Console.
Why It Is Needed Even If You Stay Within the Free Tier
Google gives each account a recurring $200 monthly credit across all Maps Platform APIs. For typical travel portal traffic, usage stays within that credit and real charges are near zero. However, Google still requires a valid payment method on file to verify the account and to cover any usage exceeding the free allowance. Without billing attached, every map request is blocked.
15
Open Billing
In Google Cloud Console, open the navigation menu → Billing.
16
Create a billing account
Click Create account (or Link a billing account), enter your business details and a valid payment method (card), and confirm. Use a company card rather than a personal one where possible.
17
Link the billing account to your project
Make sure the billing account is attached to the same project that holds your API key. An unlinked billing account will not unblock the APIs.
💵 Keep costs predictable
After billing is enabled, set a budget alert via Billing → Budgets & Alerts so Google emails you if usage approaches a defined limit. Combined with the API and referrer restrictions from Part 2, this protects against unexpected charges from key misuse, script loops, or traffic spikes on high-volume B2C booking pages.
Which Google Maps APIs Should a Travel Portal Enable?
The first three APIs are required for a travel portal's map and location features to work fully. The remaining are optional depending on whether your platform uses routing, distance-based pricing, or static map images.
⚠ Do not skip Places API
When a user searches for an airport, city, or any place not already stored in the system, Places API is what looks it up and returns its latitude and longitude. If it is not enabled, location search returns no results — making it mandatory for any B2B or B2C booking portal with location search.
| API | What It Powers | Status |
|---|
| Maps JavaScript API | Displaying interactive maps on web pages — property location pins, destination maps, search result maps | Required |
| Places API | Place & location search with autocomplete — finds airports, cities, landmarks and returns latitude & longitude for any place typed by the user | Required |
| Geocoding API | Converting addresses into map coordinates and back — used for supplier feed normalisation, checkout address validation, and hotel mapping | Required |
| Directions API | Routes and travel directions between points — used by transfer booking for route maps and ETA estimates | If needed |
| Distance Matrix API | Travel time and distance between multiple origin-destination pairs — used for distance-based pricing in car rental systems | If needed |
| Maps Embed API | Simple iframe-based map embed for hotel detail or contact pages — no JavaScript required | If needed |
| Maps Static API | Generates a static map image from a URL — ideal for email booking confirmations and PDF itineraries where JavaScript cannot run | If needed |
Common Google Maps API Errors and How to Fix Them
These are the five most frequent issues encountered when setting up a Google Maps API key on a travel portal — each with the exact cause and the fix.
⚠ Map shows a grey box with “For development purposes only”
Cause: Billing is not enabled on the project.
Fix: Complete Part 4 — create a billing account and link it to the project. The grey box disappears as soon as billing is active.
⚠ “This page can’t load Google Maps correctly” / RefererNotAllowedMapError
Cause: The domain the site is loading from is not in the API key's HTTP referrer list.
Fix: Add both the www and non-www versions of your domain under the key's Application restrictions in Part 2, Step 9 — e.g. https://yourdomain.com/* and https://www.yourdomain.com/*
⚠ “API key not authorized” / ApiNotActivatedMapError
Cause: The API you are calling is not enabled on the project, or the key's API restrictions do not include it.
Fix: Re-check Steps 4 and 10. Enable the missing API in the Library, then add it to the key's API restrictions list.
⚠ Map worked before, now broken after editing restrictions
Cause: Restriction changes take a few minutes to propagate across Google's infrastructure.
Fix: Wait 5 minutes and refresh. Also confirm the correct APIs are still ticked in the API restrictions list — editing the key can accidentally deselect APIs.
💡 Key works but feels exposed
That is expected — browser keys are intentionally visible in page source. The protection is the referrer and API restrictions, not hiding the key string. As long as both restrictions are set correctly in Part 2, the key cannot be misused for other APIs or other domains. Set a budget alert as an additional safeguard.
Google Maps API Pricing — What Travel Portals Need to Know
Understanding Google Maps API pricing helps plan before launch, particularly for high-traffic portals. Google provides a $200 recurring monthly free credit across all Maps Platform APIs. For most small-to-medium travel portals this covers all usage and real charges are at or near zero — but a billing account with a valid card must still be attached.
| API | Pricing Model | What $200 Credit Covers (approx.) |
|---|
| Maps JavaScript API | Per dynamic map load | ∼28,000 map loads/month |
| Places API | Per request type (Autocomplete, Details, Find Place) | Varies by request type; credit applies across all |
| Geocoding API | Per request | ∼40,000 geocoding requests/month |
| Directions API | Per request (basic / advanced) | ∼40,000 basic requests/month |
| Distance Matrix API | Per element (origin-destination pair) | ∼40,000 elements/month |
| Maps Static API | Per request | ∼100,000 requests/month |
| Maps Embed API | Free — no credit consumed | Unlimited |
Use the Google Maps Cloud Console (APIs & Services → Dashboard) to monitor usage per API in real time, set per-API daily quota caps, and view billing forecasts. Setting a quota cap bounds worst-case exposure even if an unexpected script loop, traffic spike, or misconfigured crawler occurs — particularly important for the Places API, which is billed per request type and can accumulate quickly on high-traffic search pages.
How Google Maps API Powers a Technoheaven Travel Platform
The Google Maps API is not a cosmetic widget — it is the location intelligence layer that connects your booking engine to the physical world. Here is how it integrates with key modules on a Technoheaven-powered travel platform, and what breaks without it.
| Technoheaven Module | Google Maps API Used | What Breaks Without It |
|---|
| Hotel Booking API | Maps JavaScript API | Property location pins disappear from results maps |
| B2B / B2C Booking Engine location search | Places API | Location search returns no results for airports, cities, landmarks |
| Checkout address validation | Geocoding API + Address Validation API | Address fields cannot be validated or auto-completed at checkout |
| Transfer Booking Engine | Directions API | Route maps and ETA estimates cannot be calculated |
| Car Rental Reservation System | Distance Matrix API | Distance-based pricing and pickup-return distances fail |
| Dynamic Hotel Mapping | Geocoding API | Supplier feed coordinates cannot be normalised and de-duplicated |
| Activities Booking | Maps JavaScript API + Places API | Attraction location maps and nearby-search fail |
| Email confirmations / PDF itineraries | Maps Static API | Static map images in booking confirmations cannot be generated |
Best Practices for Google Maps API Key Management
Once the key is live, these five practices protect your account, control costs, and ensure map features remain stable as the platform scales.
One key per property
Create a separate Google Maps API key for each website — B2B portal, B2C booking engine, mobile app — and restrict each key to that property's domain. The Technoheaven backend panel supports separate B2B and B2C config rows exactly for this reason. Separate keys isolate usage, simplify billing attribution, and mean revoking one compromised key does not affect other sites.
Separate browser keys from server keys
If your backend also calls the Geocoding API or Places API server-side — for checkout address validation or hotel mapping supplier feed processing — create a dedicated IP-restricted key for those server calls. Browser keys are restricted by HTTP referrer; server keys are restricted by IP address. These two restriction types are mutually exclusive on a single key.
Rotate keys periodically
Generate a new key annually, update it in the backend config panel under GoogleMapsApiKey, and revoke the old one. Periodic rotation limits exposure time if a key was inadvertently logged somewhere — in a server log, a browser extension, or a developer's local environment.
Monitor the Google Maps Developer Console
Review the Google Cloud Console → APIs & Services → Dashboard monthly. Unusual spikes in Places API or Geocoding API calls may indicate scraping or key misuse even when referrer restrictions are active — a signal to investigate and rotate the key if necessary.
Set per-API quota caps in Google Maps Cloud Console
Set per-API daily quota limits in the Google Maps Cloud Console. A realistic cap based on expected traffic ensures billing exposure is bounded even if a runaway script or unexpected traffic spike occurs. This is especially important for the Places API, which is billed per request type and can accumulate quickly on high-traffic destination search pages.
Frequently Asked Questions
Is the Google Maps API key free?
Google provides a $200 recurring monthly credit against Maps Platform usage. For most travel portals this covers all usage and real charges are near zero. However, a billing account with a valid payment card must still be attached — without it, all map requests are blocked regardless of usage volume.
Which Google Maps APIs are required for a travel portal?
Three APIs are required as a minimum: Maps JavaScript API (interactive map display), Places API (location search and autocomplete), and Geocoding API (address-to-coordinate conversion). Directions API and Distance Matrix API are optional depending on whether your portal shows routes or uses distance-based pricing in the transfer booking or car rental module.
Why is the Config Key called GoogleMapsApiKey?
The Technoheaven backend reads this exact string to inject the key into the website at runtime. Spelling and capitalisation must match precisely — note the “s” in Maps, and the capital M, A, K. Any variation means the platform cannot find the setting and maps will not load.
What does RefererNotAllowedMapError mean?
It means the domain the site is loading from is not in the API key's HTTP referrer list. Add both the www and non-www versions of your domain in the key's Application restrictions in Google Cloud Console — e.g. https://yourdomain.com/* and https://www.yourdomain.com/*
Can I use one Google Maps API key for both B2B and B2C websites?
You can, but best practice is separate keys per site — each restricted to its own referrer domain. The Technoheaven backend panel supports separate B2B and B2C config rows exactly for this. Separate keys make it easier to isolate usage, attribute billing, and revoke a compromised key without affecting other sites.
What is the Google Maps Address Validation API?
The Google Maps Address Validation API verifies that a postal address is real and deliverable, returning a standardised and corrected address with a confidence verdict. For travel portals, it is useful at checkout to validate guest address fields before sending them to payment gateways or supplier systems. It is a separate API from the Geocoding API and must be enabled independently in the Google Cloud Console.
How do I access the Google Maps Developer Console?
Navigate to console.cloud.google.com → APIs & Services → Dashboard. Here you can view per-API request counts, set quota limits, monitor errors, and manage credentials. There is no standalone Google Maps Developer Console — all management happens within Google Cloud Console.
Conclusion
The Google Maps API key is a foundational credential for any travel portal. Get it wrong — skip the Places API, forget to enable billing, leave the key unrestricted — and location-dependent features fail silently across the entire platform. With Google Maps holding 67–70% global navigation market share and travel agencies reporting up to 18% higher booking rates from Maps integration [Skift Research, 2024], getting this integration right has a direct commercial return.
Follow the four-part process in this guide: generate your key in Google Cloud Console, restrict it by referrer and API, enable billing, and save it in the backend panel under GoogleMapsApiKey. That is everything needed for fully functional, production-ready Google Maps integration on your travel portal.
Sources Referenced
- Google Cloud — Maps Platform documentation and developer guides (developers.google.com/maps)
- Google / 9to5Google — Google Maps surpasses 2 billion monthly active users (9to5google.com, 2024)
- LoopexDigital — Google Maps Statistics 2026: Users, Local Search, Business Impact (loopexdigital.com, Q1 2026)
- SQ Magazine — Google Maps Statistics 2025: Navigation, Business Integration (sqmagazine.co.uk, February 2026)
- XtendedView / SimilarTech — Google Maps industry usage breakdown, Travel & Tourism 2.42% (xtendedview.com, December 2025)
- Statcounter — Google Maps navigation app market share 67–70%, Q1 2026
- Google Trends — “Near me” searches grew 400% since 2020 (trends.google.com)
- Skift Research — Travel agencies with Google Maps integrations report 18% higher booking rates (skift.com, 2024)
- Technoheaven Integration Reference — Google Maps API Key Setup & Configuration Guide v1.1, 23 June 2026