{"id":1896611,"date":"2019-10-18T13:19:37","date_gmt":"2019-10-18T17:19:37","guid":{"rendered":"https:\/\/theeventscalendar.com\/knowledgebase\/setting-up-your-google-maps-api-key-2\/"},"modified":"2026-04-10T18:15:41","modified_gmt":"2026-04-10T22:15:41","slug":"setting-up-your-google-maps-api-key","status":"publish","type":"post","link":"https:\/\/theeventscalendar.com\/knowledgebase\/setting-up-your-google-maps-api-key\/","title":{"rendered":"Creating a Google Maps API Key for The Events Calendar"},"content":{"rendered":"\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/_iG1TUvdkUQ?si=BvuqV_5XYw1TlNl4\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n\n\n\n<p>Since June 2018, Google has required the use of an API key to use Google Maps features. The Events Calendar comes with a Google Maps API key built into it, <strong>but we strongly recommend adding your own API key<\/strong>, especially if you use Event Calendar Pro.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how\">Adding Your Own API key<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Head to <a rel=\"noopener noreferrer\" href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/get-api-key#get-an-api-key\" target=\"_blank\">Google&#8217;s API Key documentation<\/a> and click the &#8220;Get Started&#8221; button underneath the &#8220;Get an API key&#8221; header.<\/li>\n\n\n\n<li>Prompts will guide you through the creation of a &#8220;project&#8221; within Google\u2014complete this process until you end up with a Google Maps API key. Make sure that <strong>Geocoding API<\/strong>, <strong>Maps JavaScript API<\/strong>, and <strong>Maps Embed API<\/strong> are enabled. Go to the APIs and Services section, choose &#8220;Enable APIs and Services&#8221; at the top, and you should be able to enable these services on the following page.<\/li>\n\n\n\n<li>Head to <strong>Events \u2192 Settings \u2192 Integrations<\/strong> in the WordPress admin. Copy the API key created in the previous step and paste it into the <strong>Google Maps API Key<\/strong> field.<\/li>\n\n\n\n<li>Click &#8220;Save Changes.&#8221;<\/li>\n<\/ol>\n\n\n\n<p class=\"has-text-color has-background\" style=\"color:#141827;background-color:var(--global-palette8)\">But what are all those APIs for?<br>The <strong>Geocoding API<\/strong> fetches the coordinates for the venue locations automatically.<br>With the help of <strong>Maps Javascript API<\/strong> the map will show up on the Map view and the Single event page.<br>The <strong>Maps Embed API<\/strong> is needed for the map to show up on the Venue page.<br><br>(Note: the Map view and the Venue page are features of Events Calendar Pro.)<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"why\">Custom API Keys<\/h2>\n\n\n\n<p>In most cases, the default Google API key will work just fine. But if you&#8217;re using Events Calendar Pro, using a custom API key has the advantage of enabling location search in the calendar&#8217;s search bar.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2020\/09\/map-location-search.png\" alt=\"\" class=\"wp-image-1948153\"\/><\/figure>\n\n\n\n<p>Here&#8217;s a breakdown of the differences in functionality and appearance of maps-related features based on what kind of API key you&#8217;re using:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Feature<\/th><th>Default API Key<\/th><th>Custom API Key<br>(Recommended)<\/th><\/tr><\/thead><tbody><tr><td>Single event<\/td><td><strong>\u2705 Fully functional<\/strong><br><span style=\"font-family: inherit;\"> <\/span><a href=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2020\/09\/map-single.png\" target=\"_blank\" rel=\"noreferrer noopener\">Screenshot<\/a> <\/td><td>\u2705 <strong>Fully functional<\/strong> <span style=\"font-family: inherit;\"> <\/span><br><a rel=\"noreferrer noopener\" href=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2020\/09\/map-single.png\" target=\"_blank\">Screenshot<\/a> <\/td><\/tr><tr><td>Venue page <img decoding=\"async\" style=\"box-shadow: none; display: inline-block; width: 20px; position: relative; top: 3px; margin-left: 3px;\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2020\/09\/pro.png\"><\/td><td><strong>\u2705 Fully functional <\/strong><br><a href=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2019\/10\/map-venue.png\" target=\"_blank\" rel=\"noreferrer noopener\">Screenshot<\/a> <\/td><td>\u2705 <strong>Fully functional<\/strong> <span style=\"font-family: inherit;\"> <\/span><br><a rel=\"noreferrer noopener\" href=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2019\/10\/map-venue.png\" target=\"_blank\">Screenshot<\/a> <\/td><\/tr><tr><td>Map view <img decoding=\"async\" style=\"box-shadow: none; display: inline-block; width: 20px; position: relative; top: 3px; margin-left: 3px;\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2020\/09\/pro.png\"><\/td><td><strong>\u26a0\ufe0f Limited functionality<\/strong><br>Only one venue displays on the map<br><a rel=\"noreferrer noopener\" href=\"\/knowledgebase\/wp-content\/uploads\/2019\/10\/map-venue.png\" target=\"_blank\">Screenshot<\/a> <\/td><td>\u2705 <strong>Fully functional<\/strong><br>Multiple venues are displayed <span style=\"font-family: inherit;\"> <\/span><br><a rel=\"noreferrer noopener\" href=\"\/knowledgebase\/wp-content\/uploads\/2020\/09\/map-mapview-multiple.png\" target=\"_blank\">Screenshot<\/a> <\/td><\/tr><tr><td>Location search <img decoding=\"async\" style=\"box-shadow: none; display: inline-block; width: 20px; position: relative; top: 3px; margin-left: 3px;\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2020\/09\/pro.png\"><\/td><td><strong>\u26d4\ufe0f Not functional <\/strong><br>Search by location will be disabled<br><a rel=\"noreferrer noopener\" href=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2020\/09\/map-locationsearch.png\" target=\"_blank\">Screenshot<\/a> <\/td><td>\u2705 <strong>Fully functional<\/strong><br>Search by location is enabled <span style=\"font-family: inherit;\"> <\/span><br><a rel=\"noreferrer noopener\" href=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2020\/09\/map-location-search.png\" target=\"_blank\">Screenshot<\/a><\/td><\/tr><tr><td>Custom Map Pin<\/td><td><strong>\u26d4\ufe0f Not functional<\/strong><br>This option will not appear in the WordPress Customizer<br><a rel=\"noreferrer noopener\" href=\"\/knowledgebase\/wp-content\/uploads\/2019\/10\/Screen-Shot-2021-01-26-at-11.14.36-AM.png\" data-type=\"URL\" data-id=\"\/knowledgebase\/wp-content\/uploads\/2019\/10\/Screen-Shot-2021-01-26-at-11.14.36-AM.png\" target=\"_blank\">Screenshot<\/a><\/td><td>\u2705 <strong>Fully functional<\/strong><br>Enabled under WordPress Customizer &gt; The Events Calendar &gt; General <br><a rel=\"noreferrer noopener\" href=\"\/knowledgebase\/wp-content\/uploads\/2019\/10\/Screen-Shot-2021-01-04-at-12.03.43-PM.png\" data-type=\"URL\" data-id=\"\/knowledgebase\/wp-content\/uploads\/2019\/10\/Screen-Shot-2021-01-04-at-12.03.43-PM.png\" target=\"_blank\">Screensho<\/a><a href=\"\/knowledgebase\/wp-content\/uploads\/2019\/10\/Screen-Shot-2021-01-04-at-12.03.43-PM.png\" data-type=\"URL\" data-id=\"\/knowledgebase\/wp-content\/uploads\/2019\/10\/Screen-Shot-2021-01-04-at-12.03.43-PM.png\" target=\"_blank\" rel=\"noreferrer noopener\">t<\/a><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><img decoding=\"async\" style=\"box-shadow: none; display: inline-block; width: 20px; position: relative; top: 3px; margin-left: 3px;\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2020\/09\/pro.png\">  Events Calendar Pro feature<\/p>\n\n\n\n<p><strong>\u26a0\ufe0f<\/strong> Note: You need to have the map view enabled to see the setting to add a custom map pin.<\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"securing\">Restricting Access to Your API Key<\/h2>\n\n\n\n<p>There&#8217;s often a limit on the number of API requests your API key is authorized to make per day. If you have a particularly high-traffic site, it&#8217;s recommended that you take some steps to restrict your API keys&#8217; functionality a bit and limit their use to only specifically white-listed domain names.<\/p>\n\n\n\n<p>Google provides <a href=\"https:\/\/support.google.com\/cloud\/answer\/6310037\" target=\"_blank\" rel=\"noopener noreferrer\">a number of options to help secure your API key and prevent unauthorized usage<\/a>, which we highly recommend if you think restricting your API key is a necessary step. <\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p>Set up one Google Maps API Key for <strong>JavaScript map displays<\/strong>. <\/p>\n\n\n\n<p>For this key should select \u201cWebsites\u201d as the restriction. The value should be your domain name, for example <code>https:\/\/example.com<\/code>. <\/p>\n\n\n\n<p>In the API restrictions section select:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Maps JavaScript API<\/li>\n\n\n\n<li>Maps Embed API<\/li>\n<\/ol>\n\n\n\n<p>See the screenshot on the right for reference.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/dl.dropboxusercontent.com\/s\/6qxjcbqbbu3dl9r\/shot_230313_220827.jpg\"><img decoding=\"async\" src=\"https:\/\/dl.dropboxusercontent.com\/s\/6qxjcbqbbu3dl9r\/shot_230313_220827.jpg\" alt=\"\"\/><\/a><figcaption class=\"wp-element-caption\">Google Maps API Key Restriction for Maps<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p>Create a second API Key for venue geolocation lookups (Events Calendar Pro) with <strong>Geocoding API<\/strong>. <\/p>\n\n\n\n<p>This key should select \u201cIP addresses\u201d as the restriction. The value should be the IP address of your website.<\/p>\n\n\n\n<p>Under the API restrictions select:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Geocoding API<\/li>\n<\/ol>\n\n\n\n<p>Again, check out the screenshot on the right for reference.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/dl.dropbox.com\/s\/ha1013j29amog8d\/shot_230313_222459.jpg\"><img decoding=\"async\" src=\"https:\/\/dl.dropbox.com\/s\/ha1013j29amog8d\/shot_230313_222459.jpg\" alt=\"\"\/><\/a><figcaption class=\"wp-element-caption\">Google Maps API Key Restriction for Geocoding<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"code\"><\/h3>\n\n\n\n<p>Since there is only one field for the API key in the settings panel (under Events &gt; Settings &gt; Integrations) you will need some code as well. Paste the following into your child theme&#8217;s <code>functions.php<\/code> file, use the <a href=\"https:\/\/wordpress.org\/plugins\/code-snippets\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Code Snippets<\/a> plugin to add custom code to your site, or create a separate plugin from it.<\/p>\n\n\n\n<p>The first API key that you use for Maps JavaScript API (and Maps Embed API), enter under <code>Events<\/code> \u2192 <code>Settings<\/code> \u2192 <code>Integrations tab<\/code> \u2192 <code>Google Maps API key<\/code>. <\/p>\n\n\n\n<p>The second API key that you use for Geocoding API put in the appropriate place in the code, where it says <code>IP_ADDRESS_PROTECTED_API_KEY<\/code>.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: php; title: ; notranslate\" title=\"\">\n&lt;?php\n\/**\n * Facilitates dictating a separate (IP-address protected) Google Maps\n * API key for server-side geocoding requests.\n *\/\nclass Server_Side_Google_Maps_Key {\n\t\/**\n\t * @var string\n\t *\/\n\tprivate $key = &#039;&#039;;\n\n\t\/**\n\t * Sets up a Google Maps API key to be used for server-side initiated\n\t * geocoding requests.\n\t *\n\t * @param string $key\n\t *\/\n\tpublic function __construct( string $key ) {\n\t\t$this-&gt;key = $key;\n\t\tadd_filter( &#039;pre_http_request&#039;, &#x5B; $this, &#039;pre_http_request&#039; ], 10, 3 );\n\t}\n\n\t\/**\n\t * @param mixed  $response\n\t * @param array  $args\n\t * @param string $url\n\t *\n\t * @return array|WP_Error\n\t *\/\n\tpublic function pre_http_request( $response, $args, $url ) {\n\t\t\/\/ If this is not a Google Maps geocoding request, or if it is but our replacement\n\t\t\/\/ key is already in place, then we need do nothing more.\n\t\tif (\n\t\t\t0 !== strpos( $url, &#039;https:\/\/maps.googleapis.com\/maps\/api\/geocode&#039; )\n\t\t\t|| false !== strpos( $url, $this-&gt;key )\n\t\t) {\n\t\t\treturn $response;\n\t\t}\n\n\t\t\/\/ Replace the API key.\n\t\t$url = add_query_arg( &#039;key&#039;, $this-&gt;key, $url );\n\n\t\t\/\/ Perform a new request with our alternative API key and return the result.\n\t\treturn wp_remote_get( $url, $args );\n\t}\n}\n\n\/\/ Specify our alternative API key here (to be used for server-side geocoding requests).\nnew Server_Side_Google_Maps_Key( &#039;IP_ADDRESS_PROTECTED_API_KEY&#039; );\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"troubleshooting\"><\/h2>\n","protected":false},"excerpt":{"rendered":"<p>Since June 2018, Google has required the use of an API key to use Google Maps features. The Events Calendar comes with a Google Maps API key built into it, but we strongly recommend adding your own API key, especially if you use Event Calendar Pro. Adding Your Own API key But what are all&#8230;<\/p>\n","protected":false},"author":84,"featured_media":1955565,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_swpsp_post_exclude":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"ep_exclude_from_search":false,"footnotes":""},"categories":[123],"tags":[42],"stellar-product-taxonomy":[161],"class_list":["post-1896611","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-google-maps","tag-google-maps","stellar-product-taxonomy-the-events-calendar"],"acf":[],"taxonomy_info":{"category":[{"value":123,"label":"Google Maps"}],"post_tag":[{"value":42,"label":"Google Maps"}],"stellar-product-taxonomy":[{"value":161,"label":"The Events Calendar"}]},"featured_image_src_large":["https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/02\/social-share-1024x538.png",1024,538,true],"author_info":{"display_name":"The Events Calendar Team","author_link":"https:\/\/theeventscalendar.com\/knowledgebase\/author\/the_events_calendar_team\/"},"comment_info":0,"category_info":[{"term_id":123,"name":"Google Maps","slug":"google-maps","term_group":0,"term_taxonomy_id":123,"taxonomy":"category","description":"","parent":61,"count":4,"filter":"raw","term_order":"0","cat_ID":123,"category_count":4,"category_description":"","cat_name":"Google Maps","category_nicename":"google-maps","category_parent":61}],"tag_info":[{"term_id":42,"name":"Google Maps","slug":"google-maps","term_group":0,"term_taxonomy_id":42,"taxonomy":"post_tag","description":"","parent":0,"count":5,"filter":"raw","term_order":"0"}],"_links":{"self":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1896611","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/users\/84"}],"replies":[{"embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/comments?post=1896611"}],"version-history":[{"count":11,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1896611\/revisions"}],"predecessor-version":[{"id":1968866,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1896611\/revisions\/1968866"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media\/1955565"}],"wp:attachment":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media?parent=1896611"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1896611"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1896611"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1896611"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}