Use this page t test your google maps api and make sure it’s working correctly.
You can use our embedded version here on our website or copy and page the code into your own site to test on your own.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Google Maps API Debug Console (Filtered)</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
#consoleContainer {
position: fixed;
top: 0;
left: 0;
right: 0;
background: #111;
border-bottom: 2px solid #444;
z-index: 9999;
}
#consoleFilters {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-bottom: 1px solid #333;
background: #1a1a1a;
}
#consoleFilters label {
color: #ccc;
font-size: 13px;
cursor: pointer;
}
#consoleBox {
height: 140px;
overflow-y: auto;
padding: 10px;
font-family: monospace;
color: #ddd;
white-space: pre-wrap;
scroll-behavior: smooth;
}
.log-line { margin-bottom: 4px; }
.info { color: #66b3ff; }
.success { color: #00cc66; }
.warning { color: #ffcc00; }
.error { color: #ff6666; }
#controls {
position: fixed;
top: 200px;
left: 10px;
background: white;
padding: 12px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
z-index: 9998;
}
input[type="text"] {
width: 320px;
padding: 8px;
font-size: 14px;
margin-right: 8px;
}
button {
padding: 8px 14px;
background-color: #4a90e2;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
}
button:hover { background-color: #3a7bc1; }
#map {
height: 100vh;
width: 100%;
margin-top: 240px;
}
.filter-active {
text-decoration: underline;
color: #4a90e2 !important;
}
</style>
</head>
<body>
<div id="consoleContainer">
<div id="consoleFilters">
<strong style="color: #fff;">Filter:</strong>
<label><input type="radio" name="filter" value="all" checked> All</label>
<label><input type="radio" name="filter" value="info"> Info</label>
<label><input type="radio" name="filter" value="success"> Success</label>
<label><input type="radio" name="filter" value="warning"> Warning</label>
<label><input type="radio" name="filter" value="error"> Error</label>
<button id="clearBtn" style="margin-left:auto;background:#333;border:none;color:#ccc;padding:6px 10px;border-radius:5px;cursor:pointer;">Clear</button>
</div>
<div id="consoleBox"></div>
</div>
<div id="log"> </div>
<div id="controls">
<label>Enter your Google Maps API Key:</label><br />
<input type="text" id="apiKey" placeholder="Enter API key..." />
<button id="loadMapBtn">Test Key & Load Map</button>
</div>
<div id="map"></div>
<script>
var log = document.querySelector('#log'); ['log','debug','info','warn','error'].forEach(function (verb) { console[verb] = (function (method, verb, log) { return function () { method.apply(console, arguments); var msg = document.createElement('div'); msg.classList.add(verb); msg.textContent = verb + ': ' + Array.prototype.slice.call(arguments).join(' '); log.appendChild(msg); }; })(console[verb], verb, log); });
const consoleBox = document.getElementById('consoleBox');
let allLogs = [];
// Log message to UI and store
function logMessage(msg, type = 'info') {
const entry = {
time: new Date().toLocaleTimeString(),
type,
msg
};
allLogs.push(entry);
renderLogs();
console[type === 'error' ? 'error' : 'log'](msg);
}
// Render logs with filter
function renderLogs() {
const filter = document.querySelector('input[name="filter"]:checked').value;
consoleBox.innerHTML = '';
allLogs.forEach(log => {
if (filter === 'all' || log.type === filter) {
const div = document.createElement('div');
div.className = `log-line ${log.type}`;
div.textContent = `[${log.time}] (${log.type.toUpperCase()}) ${log.msg}`;
consoleBox.appendChild(div);
}
});
consoleBox.scrollTop = consoleBox.scrollHeight;
}
// Filter change listener
document.querySelectorAll('input[name="filter"]').forEach(radio => {
radio.addEventListener('change', renderLogs);
});
// Clear logs
document.getElementById('clearBtn').addEventListener('click', () => {
allLogs = [];
consoleBox.innerHTML = '';
});
// Global error handlers
window.onerror = (msg, src, line, col, err) => {
if (typeof msg === 'string' && msg.includes('Google Maps JavaScript API')) {
if (msg.includes('RefererNotAllowedMapError')) {
logMessage('Google Maps Error: RefererNotAllowedMapError — domain not authorized.', 'error');
} else if (msg.includes('BillingNotEnabledMapError')) {
logMessage('Google Maps Error: BillingNotEnabledMapError — billing not enabled.', 'error');
} else {
logMessage('Google Maps JavaScript API error: ' + msg, 'error');
}
} else {
logMessage(`JavaScript Error: ${msg} (${src}:${line}:${col})`, 'error');
}
};
window.gm_authFailure = function() {
logMessage('Google Maps Authentication Failed — invalid key or unauthorized domain.', 'error');
};
window.addEventListener('unhandledrejection', e => {
logMessage('Unhandled Promise Rejection: ' + e.reason, 'warning');
});
// Google Maps logic
let map, service, geocoder, userMarker;
function handleGoogleStatus(status, action) {
if (
status !== google.maps.GeocoderStatus.OK &&
status !== google.maps.places.PlacesServiceStatus.OK
) {
logMessage(`Google Maps API Error during ${action}: ${status}`, 'error');
} else {
logMessage(`Google Maps ${action} succeeded: ${status}`, 'success');
}
}
async function initMap() {
logMessage('Getting your location and initializing map...', 'info');
if (!navigator.geolocation) {
logMessage('Geolocation not supported by this browser.', 'error');
return;
}
navigator.geolocation.getCurrentPosition(
position => {
const userLocation = {
lat: position.coords.latitude,
lng: position.coords.longitude,
};
map = new google.maps.Map(document.getElementById('map'), {
center: userLocation,
zoom: 14,
});
logMessage('Google Map initialized successfully.', 'success');
userMarker = new google.maps.Marker({
position: userLocation,
map,
title: 'Your Location',
});
geocoder = new google.maps.Geocoder();
service = new google.maps.places.PlacesService(map);
geocoder.geocode({ location: userLocation }, (results, status) => {
handleGoogleStatus(status, 'Geocoding');
if (status === 'OK' && results[0]) {
logMessage('Your address: ' + results[0].formatted_address, 'info');
}
});
const request = {
location: userLocation,
radius: 1000,
type: ['cafe'],
};
service.nearbySearch(request, (results, status) => {
handleGoogleStatus(status, 'Places Nearby Search');
if (status === google.maps.places.PlacesServiceStatus.OK) {
results.forEach(place => {
new google.maps.Marker({
position: place.geometry.location,
map,
title: place.name,
});
});
logMessage(`Found ${results.length} nearby cafés.`, 'success');
}
});
},
err => {
logMessage('Error getting location: ' + err.message, 'error');
}
);
}
// Dynamic script loader
document.getElementById('loadMapBtn').addEventListener('click', () => {
const apiKey = document.getElementById('apiKey').value.trim();
if (!apiKey) {
logMessage('Please enter a valid API key.', 'warning');
return;
}
logMessage('Loading Google Maps API...', 'info');
const oldScript = document.getElementById('gmapsScript');
if (oldScript) oldScript.remove();
const script = document.createElement('script');
script.id = 'gmapsScript';
script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places&callback=initMap`;
script.async = true;
script.defer = true;
script.onerror = () => {
logMessage('Failed to load Google Maps API. Check your key, billing, or referrer restrictions.', 'error');
};
document.head.appendChild(script);
});
</script>
</body>
</html>
