[pw_map address="New York" key="your_client_key" geokey="your_server_key"]
Why Two Different API Keys?
The shortcode requires two separate Google API keys for security and functionality reasons:
- Client-Side Key (
key):- Used by the JavaScript Maps API to render the interactive map in the visitor’s browser
- Should be restricted to your website domain(s) in the Google Cloud Console
- Appears in your page’s source code, so domain restriction prevents unauthorized usage
- Server-Side Key (
geokey):- Used by the WordPress server to convert addresses to coordinates (geocoding)
- Should be restricted to your server’s IP address in the Google Cloud Console
- Never exposed to visitors, making it more secure for higher-usage operations
This separation follows security best practices by using the principle of least privilege – each key has only the permissions it needs for its specific function.
Setting Up API Keys
- Go to Google Cloud Console
- Create a project or select an existing one
- Enable the Maps JavaScript API and Geocoding API
- Create two separate API keys:
- For
key: Add domain restriction to your website URL - For
geokey: Add IP restriction to your server’s IP address
- For
Troubleshooting
Address Not Found: Check that your geocoding API is enabled and the address is correctly formatted
Map Not Displaying: Verify both API keys are active and have the correct restrictions
“For development purposes only” Watermark: Your client-side key may be missing or invalid
