{"id":1944179,"date":"2020-01-06T11:17:59","date_gmt":"2020-01-06T16:17:59","guid":{"rendered":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/?post_type=tribe-knowledgebase&#038;p=1944179"},"modified":"2023-05-24T13:32:30","modified_gmt":"2023-05-24T17:32:30","slug":"using-google-maps-api-key-restrictions","status":"publish","type":"post","link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/using-google-maps-api-key-restrictions\/","title":{"rendered":"Creating Google Maps API Key Restrictions"},"content":{"rendered":"\n<p>You can use <a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/k\/setting-up-your-google-maps-api-key\/\" target=\"_blank\" rel=\"noreferrer noopener\">your own Google Maps API Key<\/a> with The Events Calendar to get more out of your venues and maps. In fact, we recommend it!<\/p>\n\n\n\n<p class=\"has-text-color has-background\" style=\"color:#141827;background-color:var(--global-palette8)\">\u26a0\ufe0f <strong>Important:<\/strong> the Google Maps API key you use to display map elements in your calendar views has to be exposed (in fact, Google might warn you about this). That is fine as long as you put some restrictions on the key. This will avoid theft and misuse of your Google Maps API key (which can result in important costs).<\/p>\n\n\n\n<p>But that&#8217;s just part of the story (bear with us)&#8230;<\/p>\n\n\n\n<p>The Events Calendar requires three APIs to be enabled: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>the Maps JavaScript API, <\/li>\n\n\n\n<li>the Geocoding API, and <\/li>\n\n\n\n<li>the Maps Embed API.<\/li>\n<\/ul>\n\n\n\n<p>(You can find detailed information about setting up your Google Maps API Key in <a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/k\/setting-up-your-google-maps-api-key\/\" target=\"_blank\" rel=\"noreferrer noopener\">this article<\/a>.)<\/p>\n\n\n\n<p>These three APIs, however, cannot work with the same restrictions. The workaround is to use two separate Google Maps API Keys.<\/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\">Code<\/h3>\n\n\n\n<p>We have a <a href=\"https:\/\/theeventscalendar.com\/extensions\/google-maps-api-key-restrictions\/\" target=\"_blank\" rel=\"noreferrer noopener\">handy extension<\/a> available that can help you achieve this. If you would rather like a snippet, read further.<\/p>\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<h3 class=\"wp-block-heading\" id=\"plugins\">Compatible plugins<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The Events Calendar<\/li>\n\n\n\n<li>Events Calendar Pro<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"notes\">Notes<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Originally written in 2018<\/li>\n\n\n\n<li>Snippet by Cliff Paulick<\/li>\n\n\n\n<li>Author: Andras Guseo<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>You can use your own Google Maps API Key with The Events Calendar to get more out of your venues and maps. In fact, we recommend it! \u26a0\ufe0f Important: the Google Maps API key you use to display map elements in your calendar views has to be exposed (in fact, Google might warn you about&#8230;<\/p>\n","protected":false},"author":17,"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":[25,42,58],"stellar-product-taxonomy":[158,161],"class_list":["post-1944179","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-google-maps","tag-customizations","tag-google-maps","tag-php","stellar-product-taxonomy-events-calendar-pro","stellar-product-taxonomy-the-events-calendar"],"acf":[],"taxonomy_info":{"category":[{"value":123,"label":"Google Maps"}],"post_tag":[{"value":25,"label":"Customizations"},{"value":42,"label":"Google Maps"},{"value":58,"label":"PHP"}],"stellar-product-taxonomy":[{"value":158,"label":"Events Calendar Pro"},{"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":"Andras Guseo","author_link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/author\/andras\/"},"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":5,"filter":"raw","term_order":"0","cat_ID":123,"category_count":5,"category_description":"","cat_name":"Google Maps","category_nicename":"google-maps","category_parent":61}],"tag_info":[{"term_id":25,"name":"Customizations","slug":"customizations","term_group":0,"term_taxonomy_id":25,"taxonomy":"post_tag","description":"","parent":0,"count":177,"filter":"raw","term_order":"0"},{"term_id":42,"name":"Google Maps","slug":"google-maps","term_group":0,"term_taxonomy_id":42,"taxonomy":"post_tag","description":"","parent":0,"count":9,"filter":"raw","term_order":"0"},{"term_id":58,"name":"PHP","slug":"php","term_group":0,"term_taxonomy_id":58,"taxonomy":"post_tag","description":"","parent":20,"count":128,"filter":"raw","term_order":"0"}],"_links":{"self":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1944179","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/comments?post=1944179"}],"version-history":[{"count":1,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1944179\/revisions"}],"predecessor-version":[{"id":1956075,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1944179\/revisions\/1956075"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media\/1955565"}],"wp:attachment":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media?parent=1944179"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1944179"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1944179"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1944179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}