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>