Google Maps Static API常规HTML页报错，AMP页正常问题求助
Hey there, let's break down why your Maps Static API key works on AMP but throws a MissingKeyMapError on your PHP-generated HTML page. Here are the most common fixes to check:
1. Double-check key placement in your PHP-rendered HTML
AMP uses specific syntax for loading Static Maps (like wrapping the API URL in an <amp-img> tag), but regular HTML requires you to explicitly pass the key in the API request URL. Make sure your PHP code correctly inserts the key=YOUR_API_KEY parameter in the static map image's src attribute. A valid request URL should look like this:
https://maps.googleapis.com/maps/api/staticmap?center=New+York&zoom=14&size=600x300&key=YOUR_ACTUAL_KEY
Also, view the page source in Chrome to confirm the key is actually rendered in the final HTML. If it's missing, there's likely an issue with how you're echoing the key variable in your PHP code (e.g., typos in variable names, scope issues).
2. Verify API key restrictions
Even though it works on AMP, your key might have restrictions blocking your regular HTML domain. Head to the Google Cloud Console, find your API key, and check the Application restrictions section:
- If you set HTTP referrers, ensure your main domain (including subdomains and path variations) is listed correctly. AMP pages might be using an allowed cache domain, but your primary domain could be missing from the list.
- Avoid IP restrictions unless your server has a static IP that's correctly added—PHP-generated pages are served from your server, so IP restrictions target your server's IP, not end-users' IPs.
3. Check for typos or whitespace in the key
It's easy to accidentally copy extra spaces or a truncated key when pasting into PHP. Compare the key in your code with the one in the Cloud Console character by character. Also, ensure PHP functions (like urlencode()) aren't altering the key unnecessarily—you don't need to URL-encode the API key itself.
4. Confirm Maps Static API is enabled for your project
While this is less likely since it works on AMP, double-check in the Cloud Console under APIs & Services > Library that the Maps Static API is enabled for your project. Sometimes multiple keys or project configurations can lead to overlooked enablements.
5. Rule out browser caching
Your browser might be loading a cached version of the page where the key wasn't present yet. Do a hard refresh (Ctrl+Shift+R on Chrome) to load the latest PHP-rendered HTML, then recheck the page source to confirm the key is included.
Pro tip: Use Chrome's Network tab in DevTools to inspect the actual static map request. Look at the Request URL—if the
keyparameter is missing or incorrect, that's the root cause. If it's present, check the Response tab for a more detailed error message from Google.
内容的提问来源于stack exchange，提问作者Tormy Van Cool
