{"id":104063,"date":"2023-02-04T17:28:35","date_gmt":"2023-02-04T11:58:35","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&#038;p=104063"},"modified":"2023-07-18T10:11:42","modified_gmt":"2023-07-18T04:41:42","slug":"google-maps-elementor-widget-settings-overview","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/google-maps-elementor-widget-settings-overview\/","title":{"rendered":"Google Maps Elementor Widget Settings Overview"},"content":{"rendered":"\n<p>Google Maps is a powerful tool for businesses looking to optimise their digital presence. Elementor\u2019s Google Maps integration allows businesses to easily and quickly create interactive, dynamic maps embedded anywhere on their website. This integration will enable businesses to share their exact location, give customers directions, and show where their business is in relation to nearby attractions.&nbsp;<\/p>\n\n\n\n<p>The Plus Addons for Elementor Google Map widget offers a fully integrated solution; businesses can create a truly engaging and informative experience for their website visitors. The Google map widget by The Plus Addons for Elementor provides businesses access to a comprehensive suite of features and customisation options. Businesses can customise the look and feel of the maps, such as by adding markers and applying different styles.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-75 is-style-fill\"><a class=\"wp-block-button__link has-nxt-global-color-8-color has-nxt-global-color-1-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/widgets\/google-maps?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" style=\"border-radius:5px\" target=\"_blank\" rel=\"noreferrer noopener\">LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Required Setup<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor FREE Plugin<\/a> installed &amp; activated.<\/li>\n\n\n\n<li>You need to have <a href=\"https:\/\/wordpress.org\/plugins\/the-plus-addons-for-elementor-page-builder\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">The Plus Addons for Elementor plugin<\/a> installed and activated.<\/li>\n\n\n\n<li>This is a Premium widget, you need the <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/pricing\/?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" target=\"_blank\" rel=\"noreferrer noopener\">PRO version of The Plus Addons for Elementor<\/a>.<\/li>\n\n\n\n<li>Make sure the Google Map widget is activated. To verify this, visit Plus Settings \u2192 and Search for Google Map and activate.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Learn via Video Tutorial:<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Advanced Google Maps using The Plus Addons for Elementor\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/NwY-Pt8q-6g?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to Activate the Google Map Widget?<\/h2>\n\n\n\n<p>Go to&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The Plus Settings <\/strong>\u2192<strong> Plus widgets&nbsp;<\/strong><\/li>\n\n\n\n<li><strong>Search <\/strong>the widget name<strong> <\/strong>and<strong> turn on the toggle <\/strong>then<strong> <\/strong>click <strong>Save.<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"486\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/google-map-activate-1024x486.png\" alt=\"google map activate\" class=\"wp-image-104065\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/google-map-activate-1024x486.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/google-map-activate-300x142.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/google-map-activate-768x364.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/google-map-activate-1536x728.png 1536w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/google-map-activate-600x284.png 600w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/google-map-activate.png 1913w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Now in order to make the Google Map widget work you have to add a Google Maps API Key. <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/generate-elementor-google-maps-api-key\/\" target=\"_blank\" rel=\"noreferrer noopener\">You can learn the process from here<\/a>.<\/p>\n\n\n\n<p>Once you have your Google Maps API key go to<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The Plus Settings <\/strong>\u2192<strong> Extra Options&nbsp;<\/strong><\/li>\n\n\n\n<li>Scroll down to <strong>Google Map API Key<\/strong> section and paste your API key<strong>.<\/strong><\/li>\n\n\n\n<li>And on the other <strong>Google Map API Key<\/strong> section, choose <strong>Show<\/strong> from the dropdown, then click on <strong>Save<\/strong>.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"495\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/google-map-api-1024x495.png\" alt=\"google map api\" class=\"wp-image-104066\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/google-map-api-1024x495.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/google-map-api-300x145.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/google-map-api-768x372.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/google-map-api-1536x743.png 1536w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/google-map-api-600x290.png 600w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/google-map-api.png 1910w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Key Features<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Add multiple locations<\/strong> &#8211; You can easily add <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/elementor-google-maps-multiple-locations-pin\/\" target=\"_blank\" rel=\"noreferrer noopener\">multiple locations in the Google Maps<\/a>.<\/li>\n\n\n\n<li><strong>Add custom marker<\/strong> &#8211; Easily <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/elementor-google-maps-custom-marker\/\" target=\"_blank\" rel=\"noreferrer noopener\">add custom marker images for each location<\/a>.<\/li>\n\n\n\n<li><strong>Show address in a tooltip<\/strong> &#8211; You can show the location name and address in a tooltip of the pin marker.<\/li>\n\n\n\n<li><strong>Multiple map variations<\/strong> &#8211; You can choose from multiple Google Maps variations.<\/li>\n\n\n\n<li><strong>Customise map options<\/strong> &#8211; You can easily add or remove different map options, like zoom control, pan control, scale control etc.<\/li>\n\n\n\n<li><strong>Adjust map zoom level<\/strong> &#8211; Easily adjust the default map zoom level.<\/li>\n\n\n\n<li><strong>Different map styles<\/strong> &#8211; There are multiple map styles to choose from.<\/li>\n\n\n\n<li><strong>Add map overlay content<\/strong> &#8211; You can easily <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/elementor-google-maps-text-overlay\/\" target=\"_blank\" rel=\"noreferrer noopener\">add custom text as overlay content on your Google Maps<\/a>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How to add the Google Map in Elementor?<\/h2>\n\n\n\n<p>To embed Google Maps in Elementor, search for Google Map in the Elementor widget panel and drag and drop the <strong>Google Map<\/strong> (TP) widget on the page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/google-map-widget.png\" alt=\"google map widget\" class=\"wp-image-104067\"\/><\/figure>\n\n\n\n<p>Once you add the widget on the page, go to <strong>Content<\/strong> &gt; <strong>Add Multiple Location Point<\/strong> and open the first item.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"240\" height=\"919\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/google-map-content.png\" alt=\"google map content\" class=\"wp-image-104068\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/google-map-content.png 240w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/google-map-content-78x300.png 78w\" sizes=\"(max-width: 240px) 100vw, 240px\" \/><\/figure>\n\n\n\n<p>Under the <strong>Map Locations,<\/strong> add the <strong>Latitude<\/strong> and <strong>Longitude<\/strong> values of the location you want to generate the map for.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.latlong.net\/\" target=\"_blank\" rel=\"noreferrer noopener\">Find the Latitude and Longitude values of any location<\/a>.<\/p>\n\n\n\n<p>Under the <strong>Address text for Tooltip<\/strong> text area add the location name and address that will show in a tooltip when a user clicks on the pin marker.<\/p>\n\n\n\n<p>You can add a custom image as a pin icon for your location from the <strong>Pin Icon<\/strong> section.<\/p>\n\n\n\n<p>Click on the <strong>+ADD ITEM<\/strong> button to add multiple locations to your map. <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/elementor-google-maps-multiple-locations-pin\/\" target=\"_blank\" rel=\"noreferrer noopener\">You can learn more about the process from here<\/a>.<\/p>\n\n\n\n<p>Finally, you have the option to adjust the height of the map.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Style and add Color to Google Maps in Elementor?<\/h2>\n\n\n\n<p>Do you want to customise the style of Google Maps?<\/p>\n\n\n\n<p>The Plus Addons for Elementor Google Map widget offers many options to customise and change the style of Google Maps in Elementor.To customise the Google Map go to the <strong>Map Style<\/strong> tab.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"240\" height=\"899\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/google-map-style.png\" alt=\"google map style\" class=\"wp-image-104069\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/google-map-style.png 240w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/google-map-style-80x300.png 80w\" sizes=\"(max-width: 240px) 100vw, 240px\" \/><\/figure>\n\n\n\n<p>From <strong>Map Zoom, <\/strong>you can set the default zoom level of the map.<\/p>\n\n\n\n<p>If you want to remove or add specific options from your map, you can do that from the <strong>Map Options<\/strong>. From here, you can add or remove options like Zoom Control, Pan Control, Draggable, Scale Control and many more.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"299\" height=\"760\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/google-map-options.png\" alt=\"google map options\" class=\"wp-image-104070\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/google-map-options.png 299w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/google-map-options-118x300.png 118w\" sizes=\"(max-width: 299px) 100vw, 299px\" \/><\/figure>\n\n\n\n<p>Then you can choose a specific variation for your map from the <strong>Google Map Variations<\/strong> dropdown. You can choose from the four options below-<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>ROADMAP (Displays a standard, default 2D map)<\/li>\n\n\n\n<li>HYBRID (Displays a photographic map + roads and city names)<\/li>\n\n\n\n<li>SATELLITE (Displays a photographic map)<\/li>\n\n\n\n<li>TERRAIN (Displays a map with mountains, rivers, etc.)<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>Then you\u2019ll find an option to add custom styling and colour to the map, turn on the <strong>Custom Style Maps<\/strong> toggle.<\/p>\n\n\n\n<p>Here you\u2019ll find seven predefined styles for your map under the <strong>Creative Map Style<\/strong> dropdown. Choose the option that fits your website design.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"747\" height=\"938\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/google-map-style-preview.png\" alt=\"google map style preview\" class=\"wp-image-104071\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/google-map-style-preview.png 747w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/google-map-style-preview-239x300.png 239w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/google-map-style-preview-600x753.png 600w\" sizes=\"(max-width: 747px) 100vw, 747px\" \/><\/figure>\n\n\n\n<p>But if you want to customise the styles even further, you can do that by using Hue, Saturation and Lighting, to enable this option turn on the <strong>Modify Google Maps Hue, Saturation, Lightness<\/strong> toggle.<\/p>\n\n\n\n<p>From here you can add a hue colour and adjust the saturation and lightness level to create different variations of your map.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1675\" height=\"888\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/google-map-hue.gif\" alt=\"google map hue\" class=\"wp-image-104072\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: Creative Map Style and Modify Google Maps Hue, Saturation, and Lightness options will not work with the SATELLITE (Displays a photographic map) map variation.<\/em><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Map Overlay<\/h2>\n\n\n\n<p>You can easily add custom text as an overlay on Google Maps from the <strong>Map Overlay<\/strong> tab. You can <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/elementor-google-maps-text-overlay\/\" target=\"_blank\" rel=\"noreferrer noopener\">learn more about the process here<\/a>.<\/p>\n\n\n\n<p><strong>On Scroll View Animation<\/strong> &#8211;&nbsp; This is our global extension available for all our widget, this adds scrolling animation as the widget comes in viewport.<\/p>\n\n\n\n<p><a href=\"https:\/\/docs.posimyth.com\/tpae\/on-scroll-view-animation\/\">Learn more about On Scroll View Animation<\/a><\/p>\n\n\n\n<p>Advanced options remain common for all our widget, you can explore all it options from here.<\/p>\n\n\n\n<p><a href=\"https:\/\/theplusblocks.com\/docs\/advanced-tab-settings-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">View Advanced tab tutorial.<\/a><\/p>\n","protected":false},"author":16,"featured_media":104505,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[548,527],"class_list":["post-104063","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-google-maps","docs-plus-widgets"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/104063","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/comments?post=104063"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/104063\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/104505"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=104063"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=104063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}