{"id":5115,"date":"2019-01-31T09:59:34","date_gmt":"2019-01-31T09:59:34","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=5115"},"modified":"2026-02-11T13:52:22","modified_gmt":"2026-02-11T13:52:22","slug":"how-to-create-google-map-api-key-to-use-advanced-map-widget-for-elementor","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-create-google-map-api-key-to-use-advanced-map-widget-for-elementor\/","title":{"rendered":"How to Create Google Maps API Key"},"content":{"rendered":"\n

API keys are the credentials that identify the project to which the application is making a call.<\/p>\n\n\n\n

Google Maps API key<\/strong> is used to access Google Maps. Some applications or plugins using Google Maps require an individual token.<\/p>\n\n\n\n

So if you need to use Google Maps<\/strong> on your site, you should go to the Google Maps Platform<\/strong> and get your key to embed a Google map.<\/p>\n\n\n\n

In this guide, we will look through the API key creation process and adding an Advanced Map <\/strong>widget from JetElements<\/em> to your WordPress website.<\/p>\n\n\n\n

Create a Google Map API Key<\/strong><\/h2>\n\n\n\n
\n

Go to Google Cloud Console<\/strong><\/a> and click the \u201cGet started for free<\/strong>\u201d button.<\/p>\n\n\n\n

\"get<\/a><\/div>\n\n\n\n

You will be redirected to Step 1 of 2<\/strong> of account registration. Choose your Google account and your Country<\/strong>. Afterward, hit the \u201cAgree & continue<\/strong>\u201d button.<\/p>\n\n\n\n

\"account<\/a><\/div>\n\n\n\n

The Step 2<\/strong> of 2<\/strong> page will be the billing page. Fill in all the required fields and remember to include the ZIP code.<\/p>\n\n\n\n

\"the<\/a><\/div>\n\n\n\n

You will also have to put in your card data in the Payment method <\/strong>section. Afterward, click the \u201cStart free<\/strong>\u201d button.<\/p>\n\n\n\n

\"the<\/a><\/div>\n\n\n\n

You will be asked to answer two more questions in a short survey, so Google Maps can serve you better. Once you have answered, click the \u201cNext<\/strong>\u201d button.<\/p>\n\n\n\n

Type in the \u201cGoogle Maps Platform\u201d request in the search bar.<\/p>\n\n\n\n

The API key is now generated. Copy it and click the \u201cGo to Google Maps Platform<\/strong>\u201d button.<\/p>\n\n\n\n

\"your<\/a><\/div>\n\n\n\n

Now, go to the APIs & Services<\/em><\/strong>. Find the \u201cGeocoding API\u201d service and make sure it is activated.<\/p>\n\n\n\n

Activate the \u201cMaps JavaScript API\u201d service the same way.<\/p>\n\n\n\n

\"geocoding<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Add an API Key to JetElements Settings<\/strong><\/h2>\n\n\n\n
\n

Go to WordPress Dashboard > Crocoblock <\/em><\/strong>> JetPlugins Settings > JetElements <\/em><\/strong>tab. <\/p>\n\n\n\n

Open the Integrations<\/strong> tab. Here you can see the Google Maps<\/strong> section, where you should paste the API key in the Google Map API Key <\/strong>field.<\/p>\n\n\n

<\/svg><\/div>
Things to know<\/div>

You can also select another Map Provider<\/strong> if preferred. Among the available providers are \u201cLeaflet\u201d and \u201cMapbox.\u201d<\/p><\/div><\/div>\n\n\n\n

You can activate the Disable Google Maps API JS file <\/strong>toggle if it is already included by another plugin or theme.<\/p>\n\n\n\n

Additionally, you can select the preferred Geocoding Provider<\/strong>: \u201cGoogle,\u201d \u201cOpenStreetMap,\u201d \u201cPhoton,\u201d or \u201cBing.\u201dAnother feature in this section is the Separate Geocoding API key<\/strong>, which, when activated, allows you to add a separate key for the Geocoding API. This option allows you to set more precise restrictions for your API key.<\/p>\n\n\n\n

\"integrations<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Build a Page with an Advanced Map Widget<\/h2>\n\n\n\n
\n

Head to the Elementor editor of the page where you want to place the map.<\/p>\n\n\n\n

Add an Advanced Map <\/strong>widget to the page.<\/p>\n\n\n\n

Select the Map center type <\/strong>and set the desired Map Center Address<\/strong>. For instance, we leave the default \u201cLondon Eye\u201d location.<\/p>\n\n\n\n

Work on other widget settings and customize the page additionally according to your preferences.<\/p>\n\n\n\n

\"advanced<\/a><\/div>\n\n\n\n

When you\u2019re ready, press the \u201cPublish<\/strong>\u201d button.<\/p>\n<\/div><\/div>\n\n\n\n

Check the Result<\/h2>\n\n\n\n
\n

Open the just-edited page on the front end. Here, you can now observe the Advanced Map <\/strong>widget with the location you have selected as the Map Center Address<\/strong>.<\/p>\n\n\n\n

\"advanced<\/a><\/div>\n<\/div><\/div>\n\n\n\n

That\u2019s all; now you know how to embed Google Maps on your WordPress site using the JetElements <\/em>plugin.<\/p>\n","protected":false},"excerpt":{"rendered":"

From this tutorial, you will learn how to create a Google Maps API key and use it to add the Advanced Map widget of the JetElements plugin to your WordPress website.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[513],"yoast_head":"\nHow to Embed Google Maps on Your Site \u2014 JetElements | Crocoblock<\/title>\n<meta name=\"description\" content=\"Check how to add a Google map using the Advanced Map widget for Elementor. Follow the instructions to know how to adjust a Google Maps key for your WordPress website.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-create-google-map-api-key-to-use-advanced-map-widget-for-elementor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Embed Google Maps on Your Site \u2014 JetElements | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Check how to add a Google map using the Advanced Map widget for Elementor. Follow the instructions to know how to adjust a Google Maps key for your WordPress website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-create-google-map-api-key-to-use-advanced-map-widget-for-elementor\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-11T13:52:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/get-started-for-free-in-the-google-cloud-console-1024x640.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-create-google-map-api-key-to-use-advanced-map-widget-for-elementor\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-create-google-map-api-key-to-use-advanced-map-widget-for-elementor\/\",\"name\":\"How to Embed Google Maps on Your Site \u2014 JetElements | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2019-01-31T09:59:34+00:00\",\"dateModified\":\"2026-02-11T13:52:22+00:00\",\"description\":\"Check how to add a Google map using the Advanced Map widget for Elementor. Follow the instructions to know how to adjust a Google Maps key for your WordPress website.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-create-google-map-api-key-to-use-advanced-map-widget-for-elementor\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-create-google-map-api-key-to-use-advanced-map-widget-for-elementor\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-create-google-map-api-key-to-use-advanced-map-widget-for-elementor\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create Google Maps API Key\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Embed Google Maps on Your Site \u2014 JetElements | Crocoblock","description":"Check how to add a Google map using the Advanced Map widget for Elementor. Follow the instructions to know how to adjust a Google Maps key for your WordPress website.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-create-google-map-api-key-to-use-advanced-map-widget-for-elementor\/","og_locale":"en_US","og_type":"article","og_title":"How to Embed Google Maps on Your Site \u2014 JetElements | Crocoblock","og_description":"Check how to add a Google map using the Advanced Map widget for Elementor. Follow the instructions to know how to adjust a Google Maps key for your WordPress website.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-create-google-map-api-key-to-use-advanced-map-widget-for-elementor\/","og_site_name":"Help Center","article_modified_time":"2026-02-11T13:52:22+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/get-started-for-free-in-the-google-cloud-console-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-create-google-map-api-key-to-use-advanced-map-widget-for-elementor\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-create-google-map-api-key-to-use-advanced-map-widget-for-elementor\/","name":"How to Embed Google Maps on Your Site \u2014 JetElements | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2019-01-31T09:59:34+00:00","dateModified":"2026-02-11T13:52:22+00:00","description":"Check how to add a Google map using the Advanced Map widget for Elementor. Follow the instructions to know how to adjust a Google Maps key for your WordPress website.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-create-google-map-api-key-to-use-advanced-map-widget-for-elementor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-create-google-map-api-key-to-use-advanced-map-widget-for-elementor\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-create-google-map-api-key-to-use-advanced-map-widget-for-elementor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Create Google Maps API Key"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/5115"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=5115"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=5115"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=5115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}