{"id":345,"date":"2017-02-19T04:35:55","date_gmt":"2017-02-19T04:35:55","guid":{"rendered":"http:\/\/localhost\/enfold\/documentation\/?p=345"},"modified":"2019-05-17T06:45:06","modified_gmt":"2019-05-17T06:45:06","slug":"google-map","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/google-map\/","title":{"rendered":"Google Map"},"content":{"rendered":"\n<p><\/p>\n\n\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-9lme9-c88a8e18acefab6d2614742b0c6697fd\">\n#top .av-special-heading.av-9lme9-c88a8e18acefab6d2614742b0c6697fd{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-9lme9-c88a8e18acefab6d2614742b0c6697fd .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-9lme9-c88a8e18acefab6d2614742b0c6697fd .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-9lme9-c88a8e18acefab6d2614742b0c6697fd av-special-heading-h2 blockquote modern-quote  avia-builder-el-0  el_before_av_hr  avia-builder-el-first '><h2 class='av-special-heading-tag '  itemprop=\"headline\"  >Google Map<\/h2><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div>\n<div  class='hr av-4l81w9-b5b0c6c84c0027478f93af1559d8b8ff hr-default  avia-builder-el-1  el_after_av_heading  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-4eoa8p-49c749fa47049f63950c83b553a1aa26 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Overview<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-49omnd-bb490694e38f51acf5dcf2728d4f0c96 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Allow your users to visualize the location of your business with the Google Map element.\u00a0Add custom maps to your website with multiple markers and several options to choose from like color, overlay, size, zoom level, etc<\/p>\n<p>Examples of <a href=\"https:\/\/kriesi.at\/themes\/enfold-2017\/elements\/google-maps\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google maps<\/a>.<\/p>\n<\/div><\/section>\n<div  class='hr av-3zu17t-4c9ac709971ad699358bf98d29d6cf55 hr-default  avia-builder-el-4  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-28tuw9-f2d04739e8fc2e77a157f4c42fd8bc94 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Google Maps Setup<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-28tuw9-cf07a6619b32c1a95662a11648d12c9b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To add a Google map to your site, First, <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/google-map\/#how-to-register-a-google-maps-apinbspkey\">Register a Google Map API key<\/a> and add it to the <strong>Enfold theme options > Google Services <\/strong>and your maps should work as intended. If you notice an error after adding the API key please try to <a href=\"#troubleshoot\" target=\"_blank\" rel=\"noopener noreferrer\">troubleshoot Google API key<\/a>.<\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-jjzniohk-bb7db4f5a6fe50b17162c7e5f6b80be5 av-minimal-toggle  avia-builder-el-7  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-8an1d-db7bb91cbd2f92b01e0a0beadab1a609'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-1' data-fake-id='#toggle-id-1' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-1' data-slide-speed=\"200\" data-title=\"Step 1: Add a map element to your page or post\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Step 1: Add a map element to your page or post\" data-aria_expanded=\"Click to collapse: Step 1: Add a map element to your page or post\">Step 1: Add a map element to your page or post<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-1' aria-labelledby='toggle-toggle-id-1' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><ul>\n<li>Open an existing or a new page from your WordPress dashboard.<\/li>\n<li>Click on the &#8220;<strong>Advanced Layout Editor<\/strong>&#8221; to expand the layout elements.<\/li>\n<li>Select the &#8220;<strong>Google Map<\/strong>&#8221; element under the <strong>Media Elements<\/strong> section.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10084 size-full\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Google-Map-Element.png\" alt=\"\" width=\"690\" height=\"489\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Google-Map-Element.png 690w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Google-Map-Element-300x213.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Google-Map-Element-260x185.png 260w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Google-Map-Element-600x425.png 600w\" sizes=\"auto, (max-width: 690px) 100vw, 690px\" \/><\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-8noy1-144db60935d7ff556e2892730da1fc69'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-2' data-fake-id='#toggle-id-2' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-2' data-slide-speed=\"200\" data-title=\"Step 2: Configure Google Map  \" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Step 2: Configure Google Map  \" data-aria_expanded=\"Click to collapse: Step 2: Configure Google Map  \">Step 2: Configure Google Map  <span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-2' aria-labelledby='toggle-toggle-id-2' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><ul>\n<li>To set up the correct place on the Map click the Google Map element and open the map options.<\/li>\n<li>Click on the <strong>Address <\/strong>options. Enter your address and click on <strong>Enter Address, then fetch coordinates<\/strong>.\u00a0To add a location marker tooltip message, enter the address or your custom text in the text box for the marker and upload the custom icon to change the marker image.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10085 size-full\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Fetch-Address-e1531981590449.png\" alt=\"\" width=\"775\" height=\"642\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Fetch-Address-e1531981590449.png 775w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Fetch-Address-e1531981590449-300x249.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Fetch-Address-e1531981590449-768x636.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Fetch-Address-e1531981590449-705x584.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Fetch-Address-e1531981590449-600x497.png 600w\" sizes=\"auto, (max-width: 775px) 100vw, 775px\" \/><\/p>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-3zu17t-4c9ac709971ad699358bf98d29d6cf55 hr-default  avia-builder-el-8  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-4eoa8p-4e391e49978ca6b7e9e53eab08e93db7 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>How to register a google maps API key<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-21rp7d-554e104bb1625d36025a2a5958624443 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Google has\u00a0<a href=\"https:\/\/mapsplatform.googleblog.com\/2016\/06\/building-for-scale-updates-to-google.html\" target=\"_blank\" rel=\"noopener noreferrer\">changed the way the maps\u00a0work<\/a>\u00a0and made it more developer friendly, this has left many others confusing. Google now requires everyone to\u00a0<a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/get-api-key#key\" target=\"_blank\" rel=\"noopener noreferrer\">register an API key<\/a>\u00a0and enable billing in order to display a map on your website.<\/p>\n<p>If your google map is displaying an error message &#8220;<strong>This page can&#8217;t load Google Maps correctly<\/strong>&#8221; it is usually because of an API key related issue.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10065\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Error.png\" alt=\"\" width=\"901\" height=\"402\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Error.png 901w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Error-300x134.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Error-768x343.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Error-705x315.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Error-600x268.png 600w\" sizes=\"auto, (max-width: 901px) 100vw, 901px\" \/><\/p>\n<p><strong>NOTE<\/strong>:\u00a0As of July 16, 2018, Google maps will return an error if <a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/usage-and-billing\" target=\"_blank\" rel=\"noopener noreferrer\">billing is not enabled<\/a>.<\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-21rp7d-554e104bb1625d36025a2a5958624443 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>A simplified look at Google maps API key registration<\/strong>:<\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-21rp7d-554e104bb1625d36025a2a5958624443 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Before we proceed, please make sure that you are running\u00a0the latest version of WordPress and\u00a0Enfold theme.<\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-jjt9qrv7-f3b9c09ebf821201e861aba3d2489892 av-minimal-toggle  avia-builder-el-13  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-ail4h-a731abba71e07fc0a56f947ead3fef6d'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-getting-started' data-fake-id='#getting-started' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='getting-started' data-slide-speed=\"200\" data-title=\"Step 1: Getting Started\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Step 1: Getting Started\" data-aria_expanded=\"Click to collapse: Step 1: Getting Started\">Step 1: Getting Started<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='getting-started' aria-labelledby='toggle-getting-started' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To get started, visit the <a href=\"https:\/\/cloud.google.com\/maps-platform\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google Maps Platform<\/a> or open the <a href=\"https:\/\/console.developers.google.com\/flows\/enableapi?apiid=maps_backend,geocoding_backend,directions_backend,distance_matrix_backend,elevation_backend,places_backend&#038;keyType=CLIENT_SIDE&#038;reusekey=true\">API registration link<\/a> provided in the <strong>Enfold theme options > Google Services > Register an API key<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10074\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Enfold-Google-Maps-API.png\" alt=\"\" width=\"981\" height=\"727\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Enfold-Google-Maps-API.png 981w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Enfold-Google-Maps-API-300x222.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Enfold-Google-Maps-API-768x569.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Enfold-Google-Maps-API-705x522.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Enfold-Google-Maps-API-600x445.png 600w\" sizes=\"auto, (max-width: 981px) 100vw, 981px\" \/><\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-uveap-00c59e58f795c76bf297b7709efd5b5b'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-add-an-api-project' data-fake-id='#add-an-api-project' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='add-an-api-project' data-slide-speed=\"200\" data-title=\"Step 2: Add an API project\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Step 2: Add an API project\" data-aria_expanded=\"Click to collapse: Step 2: Add an API project\">Step 2: Add an API project<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='add-an-api-project' aria-labelledby='toggle-add-an-api-project' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>If this is your first time visiting the API console, you may notice that Google\u00a0will try to create a project to use your API key and provide you with an option to &#8220;<strong>Agree and continue<\/strong>&#8220;. If you already have a project created, select the project from the dropdown list and click on &#8220;<strong>Continue<\/strong>&#8220;.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10077\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Google-api-project.png\" alt=\"\" width=\"499\" height=\"343\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Google-api-project.png 499w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Google-api-project-300x206.png 300w\" sizes=\"auto, (max-width: 499px) 100vw, 499px\" \/><\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-rcc81-f3b86ac71d5815a3e27b99f6b63d94b4'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-add-an-api-key' data-fake-id='#add-an-api-key' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='add-an-api-key' data-slide-speed=\"200\" data-title=\"Step 3: Add an API key\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Step 3: Add an API key\" data-aria_expanded=\"Click to collapse: Step 3: Add an API key\">Step 3: Add an API key<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='add-an-api-key' aria-labelledby='toggle-add-an-api-key' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To easily manage and monitor your API key, assign a custom name for your API key. This name can be anything and is totally arbitrary. If you want you can also enter your domain name so only requests from your domain with that key will be accepted.\u00a0We recommend to remove all restrictions first and see if that helps and then add your restriction back in. Chances are high that if it worked without restriction and does not with restriction you used the wrong URL format.<\/p>\n<p>We recommend using an API key with <strong>no restrictions<\/strong>. However, depending on your project requirement,\u00a0restrict the API key to work with a\u00a0specific URL pattern using <a href=\"https:\/\/support.google.com\/customsearch\/answer\/71826?hl=en&#038;ref_topic=11493\" target=\"_blank\" rel=\"noopener noreferrer\">wildcards in URL<\/a>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10126\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/API-Restriction.png\" alt=\"\" width=\"513\" height=\"510\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/API-Restriction.png 645w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/API-Restriction-80x80.png 80w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/API-Restriction-300x298.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/API-Restriction-36x36.png 36w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/API-Restriction-180x180.png 180w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/API-Restriction-100x100.png 100w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/API-Restriction-600x596.png 600w\" sizes=\"auto, (max-width: 513px) 100vw, 513px\" \/><\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-jmhwp-eb53d64f4e1c4999872779ccb09b299d'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-api-services' data-fake-id='#api-services' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='api-services' data-slide-speed=\"200\" data-title=\"Step 4: API Services\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Step 4: API Services\" data-aria_expanded=\"Click to collapse: Step 4: API Services\">Step 4: API Services<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='api-services' aria-labelledby='toggle-api-services' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>An API key can work with different <a href=\"https:\/\/console.developers.google.com\/apis\/library\" target=\"_blank\" rel=\"noopener noreferrer\">API services<\/a>\u00a0like Cloud Translation, GeoCoding, Street View, etc which we can <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/google-map\/#enable-services-for-google-api\" target=\"_blank\" rel=\"noopener noreferrer\">add or remove API service<\/a> from the <a href=\"https:\/\/console.developers.google.com\/apis\/dashboard\" target=\"_blank\" rel=\"noopener noreferrer\">API Console<\/a>.<\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-gywjt-cca10525b5daef0bb05dddaa5df3ef6c'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-generate-key' data-fake-id='#generate-key' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='generate-key' data-slide-speed=\"200\" data-title=\"Step 5: Generate Key\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Step 5: Generate Key\" data-aria_expanded=\"Click to collapse: Step 5: Generate Key\">Step 5: Generate Key<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='generate-key' aria-labelledby='toggle-generate-key' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>After completing all the steps your API key will be generated in your dashboard. Click on the copy icon next to the API key to safely copy to the key to your clipboard. In the next step, we will validate this key in the\u00a0Enfold theme.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10080\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Google-API-Key.png\" alt=\"\" width=\"946\" height=\"357\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Google-API-Key.png 946w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Google-API-Key-300x113.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Google-API-Key-768x290.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Google-API-Key-705x266.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Google-API-Key-600x226.png 600w\" sizes=\"auto, (max-width: 946px) 100vw, 946px\" \/><\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-7pyft-b4053fddecfba590eb1e3057a4ffc336'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-validate-key' data-fake-id='#validate-key' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='validate-key' data-slide-speed=\"200\" data-title=\"Step 6: Validate Key\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Step 6: Validate Key\" data-aria_expanded=\"Click to collapse: Step 6: Validate Key\">Step 6: Validate Key<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='validate-key' aria-labelledby='toggle-validate-key' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To make sure the maps work fine with the theme we need to validate the API key. Copy and paste the API key to Enfold theme options > Google Services >\u00a0Enter a valid Google Maps API Key to use all map related theme functions<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10082 size-full\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/API-verification-e1531979885791.png\" alt=\"\" width=\"764\" height=\"387\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/API-verification-e1531979885791.png 764w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/API-verification-e1531979885791-300x152.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/API-verification-e1531979885791-705x357.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/API-verification-e1531979885791-600x304.png 600w\" sizes=\"auto, (max-width: 764px) 100vw, 764px\" \/><\/p>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-3zu17t-4c9ac709971ad699358bf98d29d6cf55 hr-default  avia-builder-el-14  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3ymnhl-2c9d2c1d00b895680f402dca0e94d5bd '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Code Snippets<\/h2>\n<\/div><\/section>\n<div  class='avia-builder-widget-area clearfix  avia-builder-el-16  el_after_av_textblock  el_before_av_hr '><div id=\"text-3\" class=\"widget clearfix widget_text\">\t\t\t<div class=\"textwidget\"><p><strong>How to use the snippets?<\/strong><\/p>\n<ul>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-css\/\" target=\"_blank\" rel=\"noopener\">CSS Snippets<\/a> to Enfold child theme styles.<\/li>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-js-or-php-script\/\" target=\"_blank\" rel=\"noopener\">JS and PHP scripts<\/a> to your\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-install-enfold-theme\/#why-child-theme\" target=\"_blank\" rel=\"noopener\">child theme<\/a>\u00a0functions.php file.<\/li>\n<li>Shortcodes can be used in a text area in pages, posts, sliders and widget areas.\u00a0Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#debug-mode\" target=\"_blank\" rel=\"noopener\">debug mode<\/a>\u00a0to view the page shortcode.<\/li>\n<li>Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#turn-on-custom-css-class-field-for-all-alb-elements\">custom CSS class name support<\/a>\u00a0to\u00a0add your\u00a0class names to the theme elements.<\/li>\n<li>Disable <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-clear-the-cache\/\" target=\"_blank\" rel=\"noopener\">script merging and clear the cache<\/a>\u00a0to view the changes on the frontend.<\/li>\n<\/ul>\n<p><strong>NOTE<\/strong>: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due\u00a0to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.<\/p>\n<\/div>\n\t\t<\/div><\/div>\n<div  class='hr av-coci9-b4b49cb5159dc39b4f5d0aa8e8c96d37 hr-default  avia-builder-el-17  el_after_av_sidebar  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3fj035-24d9b1534d8b63999d0d8397f56b70cc '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Shortcode<\/h3>\n<\/div><\/section>\n\n<div  class='hr av-2qvj0h-3e3bfacc7d2b50ea619ece5e8e1ce238 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-2i5oeh-c754a753be7debc6e7ca99f0883b668b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Customization<\/h2>\n<\/div><\/section>\n<div  class='hr av-1w9nkp-cb8b48d4421bf8ed1e4946baede8c357 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-1plq89-42aabca2ab3cacd03d2b187a55acd6cb '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Display Google maps in widgets<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-1i7dht-8c53cedfdd0da674171f52b25d2014e8 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The easiest option is of course to use the google maps widget that comes with Enfold. But you can also create a maps shortcode and paste it into a text widget:<\/p>\n<p>To display Google Maps in any widget area or text area:<\/p>\n<ul>\n<li>Enable debug mode.<\/li>\n<li>Create your google map on a new page.<\/li>\n<li>Copy the shortcode and paste it in the widget\/text area.<\/li>\n<\/ul>\n<\/div><\/section>\n<div  class='hr av-1f0xw9-1a883aaecaff1bf1ce6eeca8b3c6b476 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-19o0oh-dc5a82b99d5a76954aa3c77eef837d68 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Styling Google maps<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-41o3d-ac0255d725868a05f43589c184febc14 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Custom style google maps tooltip font:<\/p>\n<pre>\/* Google Maps tooltip font color *\/\n.avia-google-map-container .gm-style-iw p {\n    color: #444;\n}<\/pre>\n<p>Add border to google maps<\/p>\n<pre>\/* Google Maps Border  *\/\n.avia-google-maps {\n  border: 5px solid white !important;\n}<\/pre>\n<\/div><\/section>\n<div  class='hr av-ve9b5-9db0ac7630311b942b52c9f5a490309d hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-jmspl-147be01c85d47d8b59ffc22bd22257ea '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Troubleshoot<\/h2>\n<\/div><\/section>\n<div  class='hr av-ve9b5-9db0ac7630311b942b52c9f5a490309d hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-19o0oh-091a56711713b770ab427dbac0c9ea16 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Could not connect to Google Maps with this API Key<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-19o0oh-091a56711713b770ab427dbac0c9ea16 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>If you notice this error &#8220;<strong>Could not connect to Google Maps with this API Key<\/strong>.&#8221; in the theme options while adding the API key to the Google Services. Please perform the below steps.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10095 size-full\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/API-Key-Error-e1531996485951.png\" alt=\"\" width=\"1031\" height=\"368\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/API-Key-Error-e1531996485951.png 1031w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/API-Key-Error-e1531996485951-300x107.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/API-Key-Error-e1531996485951-768x274.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/API-Key-Error-e1531996485951-1030x368.png 1030w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/API-Key-Error-e1531996485951-705x252.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/API-Key-Error-e1531996485951-600x214.png 600w\" sizes=\"auto, (max-width: 1031px) 100vw, 1031px\" \/><\/p>\n<ul>\n<li>Google now requires you to <a href=\"https:\/\/developers.google.com\/maps\/billing\/understanding-cost-of-use\" target=\"_blank\" rel=\"noopener noreferrer\">enable billing<\/a>\u00a0for the API key to work.<\/li>\n<li>Check if you typed the API key correctly.<\/li>\n<li>If you use the restriction setting on Google try to remove that and check if it works.<\/li>\n<li>Create a new unrestricted API key and try again, if the old key is not working for you.<\/li>\n<li>Check if <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/google-map\/#enable-services-for-google-api\">GeoCoding service<\/a> is enabled.<\/li>\n<li>If none of this helps: deactivate all plugins and then check if the API key works.<\/li>\n<\/ul>\n<p><strong>NOTE:<\/strong>\u00a0If you updated the API key Google says\u00a0it will take up to 5 min to update the key but in some cases, we have seen that the API key takes much longer to get updated. Please wait for a while before checking for the API key to work after making any changes.<\/p>\n<\/div><\/section>\n<div  class='hr av-ve9b5-9db0ac7630311b942b52c9f5a490309d hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-19o0oh-091a56711713b770ab427dbac0c9ea16 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Map does not fetch the location<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-19o0oh-091a56711713b770ab427dbac0c9ea16 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><ul>\n<li>Google now requires you to <a href=\"https:\/\/developers.google.com\/maps\/billing\/understanding-cost-of-use\" target=\"_blank\" rel=\"noopener noreferrer\">enable billing<\/a>\u00a0for the API key to work.<\/li>\n<li>Check if you typed the API key correctly.<\/li>\n<li>If you use the restriction setting on Google try to remove that and check if it works.<\/li>\n<li>Create a new unrestricted API key and try again, if the old key is not working for you.<\/li>\n<li>Check if <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/google-map\/#enable-services-for-google-api\">GeoLocation and GeoCoding services<\/a> is enabled.<\/li>\n<li>If none of this helps: deactivate all plugins and then check if the API key works.<\/li>\n<\/ul>\n<p>If the above solution does not work,\u00a0 please go to <a href=\"https:\/\/www.latlong.net\/\" target=\"_blank\" rel=\"noopener noreferrer\">latlong.net<\/a> and copy your location coordinates manually into the Google Map element.<\/p>\n<\/div><\/section>\n<div  class='hr av-ve9b5-9db0ac7630311b942b52c9f5a490309d hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-19o0oh-091a56711713b770ab427dbac0c9ea16 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Enable Services for Google API<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-19o0oh-091a56711713b770ab427dbac0c9ea16 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Depending on the features you want to display in the Google map. The Map API requires additional services like GeoCoding, GeoLocation and many other services found in the API library.<\/p>\n<p>Let&#8217;s take a look at how we can enable <a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/geocoding\" target=\"_blank\" rel=\"noopener noreferrer\">Geocoding Services <\/a> for your API key.<\/p>\n<ul>\n<li>Open your <a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/geocoding\" target=\"_blank\" rel=\"noopener noreferrer\">API console dashboard<\/a><\/li>\n<li>Select the API project from the top.<\/li>\n<li>Check if the GeoCoding API service is enabled.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10099 size-full\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Geocoding-Service-e1532000442326.png\" alt=\"\" width=\"840\" height=\"248\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Geocoding-Service-e1532000442326.png 840w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Geocoding-Service-e1532000442326-300x89.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Geocoding-Service-e1532000442326-768x227.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Geocoding-Service-e1532000442326-705x208.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Geocoding-Service-e1532000442326-600x177.png 600w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/li>\n<li>If the GeoCoding service is not visible click on &#8221; Enable APIs and services&#8221; on top next to your project name.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10100\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Enable-Services-e1532000605822.png\" alt=\"\" width=\"487\" height=\"131\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Enable-Services-e1532000605822.png 487w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Enable-Services-e1532000605822-300x81.png 300w\" sizes=\"auto, (max-width: 487px) 100vw, 487px\" \/><\/li>\n<li>Search for the GeoCoding API service and enable it.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10103\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Enable-Service.png\" alt=\"\" width=\"673\" height=\"313\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Enable-Service.png 673w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Enable-Service-300x140.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/07\/Enable-Service-600x279.png 600w\" sizes=\"auto, (max-width: 673px) 100vw, 673px\" \/><\/li>\n<\/ul>\n<\/div><\/section>\n<div  class='hr av-ve9b5-9db0ac7630311b942b52c9f5a490309d hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-jmspl-7c187328f70588c98adaca2f01357968 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Resource<\/h2>\n<\/div><\/section>\n<div  class='hr av-ejqfl-a93dd9db3ed91a37a5e86840abd00cfc hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-jmspl-147be01c85d47d8b59ffc22bd22257ea '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Quick Links<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-jmspl-147be01c85d47d8b59ffc22bd22257ea '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><a href=\"https:\/\/developers.google.com\/maps\/documentation\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google Maps Documentation<\/a><br \/>\n<a href=\"https:\/\/developers.google.com\/maps\/documentation\/embed\/start?hl=en_US\" target=\"_blank\" rel=\"noopener noreferrer\">Quick Start Maps<\/a><br \/>\n<a href=\"https:\/\/cloud.google.com\/maps-platform\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google maps free trial<\/a><br \/>\n<a href=\"https:\/\/developers.google.com\/maps\/billing\/understanding-cost-of-use\" target=\"_blank\" rel=\"noopener noreferrer\">Billing and usage<\/a><br \/>\n<a href=\"https:\/\/cloud.google.com\/maps-platform\/pricing\/sheet\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google maps pricing<\/a><br \/>\n<a href=\"https:\/\/console.developers.google.com\/flows\/enableapi?apiid=maps_backend,geocoding_backend,directions_backend,distance_matrix_backend,elevation_backend,places_backend&#038;keyType=CLIENT_SIDE&#038;reusekey=true\" target=\"_blank\" rel=\"noopener noreferrer\">Register an API key<\/a><br \/>\n<a href=\"https:\/\/console.developers.google.com\/apis\/dashboard\" target=\"_blank\" rel=\"noopener noreferrer\">Manage your API key&#8217;s<\/a><br \/>\n<a href=\"https:\/\/developers.google.com\/maps\/documentation\/embed\/guide\" target=\"_blank\" rel=\"noopener noreferrer\">Embed Maps<\/a><br \/>\n<a href=\"http:\/\/googlemaps.github.io\/libraries\" target=\"_blank\" rel=\"noopener noreferrer\">API Library<\/a><\/p>\n<p><strong>Map Styles<\/strong>:<br \/>\n<a href=\"https:\/\/snazzymaps.com\/plugins\" target=\"_blank\" rel=\"noopener noreferrer\">Custom map style<\/a><br \/>\n<a href=\"http:\/\/www.webiconset.com\/map-icons\/\" target=\"_blank\" rel=\"noopener noreferrer\">Map icons<\/a><\/p>\n<\/div><\/section>\n<div  class='hr av-ejqfl-a93dd9db3ed91a37a5e86840abd00cfc hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-2rsx-c44e1d1ce67650cdc98564315715563c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Contributed video<\/strong>:<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=bsTlJYjPz6Q\"> Google Map Element Tutorial <\/a><\/p>\n<\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[2,8],"tags":[],"class_list":["post-345","post","type-post","status-publish","format-standard","hentry","category-documentation","category-media-elements","documentation","media-elements"],"modified_by":"vinay","_links":{"self":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/345","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/comments?post=345"}],"version-history":[{"count":23,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/345\/revisions"}],"predecessor-version":[{"id":13112,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/345\/revisions\/13112"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=345"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=345"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=345"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}