{"id":603,"date":"2024-03-08T11:21:50","date_gmt":"2024-03-08T11:21:50","guid":{"rendered":"https:\/\/doc.freevision.me\/luxed\/?p=603"},"modified":"2024-03-08T11:21:54","modified_gmt":"2024-03-08T11:21:54","slug":"stratum-widgets-advanced-google-maps-elementor-widget","status":"publish","type":"post","link":"https:\/\/doc.freevision.me\/luxed\/stratum-widgets-advanced-google-maps-elementor-widget\/","title":{"rendered":"Stratum Widgets: Advanced Google Maps Elementor Widget"},"content":{"rendered":"\n<p>The free version of Elementor provides you with a basic Google Maps widget, but if you want to customize the map further, use the Advanced Maps Elementor widget by&nbsp;<a href=\"https:\/\/wordpress.org\/plugins\/stratum\/\">Stratum<\/a>. It\u2019s also free but gives you access to way more tools integrated from the official Google Maps services.<\/p>\n\n\n\n<p><em>See also:&nbsp;<a href=\"https:\/\/motopress.com\/blog\/getwid-wordpress-blocks-google-maps-gutenberg-block\/\">the Google Maps widget for the block editor<\/a>&nbsp;(Gutenberg)<\/em><\/p>\n\n\n\n<p>All you need to get started is to obtain your Google Maps API key:<\/p>\n\n\n\n<p><a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/get-api-key\">How to get an API key for Google Maps<\/a><\/p>\n\n\n\n<p>To use the API key associated with your project on your Elementor WordPress website, go to WordPress dashboard &gt; Stratum &gt; Settings &gt; API &gt; Google Maps API key &gt; insert your key.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/doc.freevision.me\/luxed\/wp-content\/uploads\/sites\/25\/2024\/03\/stratum-google-maps-widget.png\" alt=\"stratum google maps widget\" class=\"wp-image-956560\"\/><\/figure><\/div>\n\n\n<h2>The Purpose of the Advanced Posts Elementor Widget<\/h2>\n\n\n\n<p><a href=\"https:\/\/youtu.be\/R0WQXtcAzGs\"><\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/youtu.be\/R0WQXtcAzGs\">Google Maps Elementor Widget by Stratum<\/a><\/p>\n\n\n\n<p>This maps Elementor widget is perfect for showcasing your business address\/addresses on an interactive Google map on any page, without a need to integrate third-party plugins.<\/p>\n\n\n\n<h2>Key Benefits of the Advanced Map Widget for Elementor<\/h2>\n\n\n\n<p>Unlike a native Elementor widget for adding a Google map, you can customize the widget by Stratum employing the following features:<\/p>\n\n\n\n<ul>\n<li>Display unlimited locations on the map using custom markers (marker clustering).<\/li>\n\n\n\n<li>Adjust a default map interface with regard to user interaction (zoom, fullscreen, etc.).<\/li>\n\n\n\n<li>Choose a theme map style to be a better match for your&nbsp;<a href=\"https:\/\/motopress.com\/products\/category\/elementor-templates\/\">Elementor WordPress theme<\/a>&nbsp;design.<\/li>\n<\/ul>\n\n\n\n<h2>General Features &amp; Settings of the Google Maps Elementor Widget<\/h2>\n\n\n\n<p>You can use single or multiple markers on your map.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/doc.freevision.me\/luxed\/wp-content\/uploads\/sites\/25\/2024\/03\/general-settings-google-maps.jpg\" alt=\"general settings google maps\" class=\"wp-image-956561\"\/><\/figure><\/div>\n\n\n<p><strong>Interaction controls: Zoom and pan (dragging) settings<\/strong><\/p>\n\n\n\n<p>Select the preferable way users will interact with your Google map:<\/p>\n\n\n\n<ul>\n<li>Enable zooming and panning<\/li>\n\n\n\n<li>Completely disable zooming and panning (dragging is allowed but the map stays of the same scale)<\/li>\n\n\n\n<li>Prevent unintentional zooming while scrolling a page.<\/li>\n<\/ul>\n\n\n\n<p>You can also set up a default zoom level:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/doc.freevision.me\/luxed\/wp-content\/uploads\/sites\/25\/2024\/03\/advanced-google-maps-elementor-widget-zoom-level.gif\" alt=\"advanced google maps elementor widget zoom level\" class=\"wp-image-956567\"\/><\/figure><\/div>\n\n\n<p><strong>Advanced Map marker settings<\/strong><\/p>\n\n\n\n<p>It\u2019s easy to add unlimited markers and customize their appearance:<\/p>\n\n\n\n<ul>\n<li>Marker title<\/li>\n\n\n\n<li>Marker longitude and latitude<\/li>\n\n\n\n<li>Optional description<\/li>\n\n\n\n<li>The pop-up window width.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/doc.freevision.me\/luxed\/wp-content\/uploads\/sites\/25\/2024\/03\/map-marker-settings-1.jpg\" alt=\"map marker settings\" class=\"wp-image-956575\"\/><\/figure><\/div>\n\n\n<p><strong>Advanced Map controls<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/doc.freevision.me\/luxed\/wp-content\/uploads\/sites\/25\/2024\/03\/advanced-google-maps-elementor-maps-control.gif\" alt=\"advanced google maps elementor maps control\" class=\"wp-image-956577\"\/><\/figure><\/div>\n\n\n<ul>\n<li>Street view<\/li>\n\n\n\n<li>Map type (allow users to toggle between the street and satellite views)<\/li>\n\n\n\n<li>Zoom controls<\/li>\n\n\n\n<li>Fullscreen (allow users to enter the fullscreen mode).<\/li>\n<\/ul>\n\n\n\n<p>Remember that the default behavior is that all the map interaction controls disappear if the map is viewed on small devices (200x200px).<\/p>\n\n\n\n<p><strong>Advanced Map styles<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/doc.freevision.me\/luxed\/wp-content\/uploads\/sites\/25\/2024\/03\/advanced-google-maps-elementor-map-theme.gif\" alt=\"advanced google maps elementor map theme\" class=\"wp-image-956578\"\/><\/figure><\/div>\n\n\n<p><em>Note:<\/em>&nbsp;Map styling can be used to prevent businesses, public transit icons or other points of interest from appearing on the map.<\/p>\n\n\n\n<p>You can select the theme source and choose the preferable map styling:<\/p>\n\n\n\n<ul>\n<li>Google Standard<\/li>\n\n\n\n<li>Snazzy<\/li>\n\n\n\n<li>Custom (add your CSS styles)<\/li>\n<\/ul>\n\n\n\n<p>Heading over to Styles, you can configure the default map height. Using the Advanced Elementor styling settings, it\u2019s easy to apply more motion effects, change backgrounds, adjust the spacing and configure other common styling Elementor settings.<\/p>\n\n\n\n<h2>Stratum Free Elementor Widgets: Download the Google Maps Elementor Widget<\/h2>\n\n\n\n<p>If you want to create a more tailored look for Google Maps on WordPress, this Google Maps widget for Elementor can be your go-to solution.<\/p>\n\n\n\n<p>Feel free to get the Advanced Google Maps Elementor widget along with other awesome ones by downloading Stratum widgets for Elementor:<\/p>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/plugins\/stratum\/\">Stratum Free Elementor Widgets Download<\/a><\/p>\n\n\n\n<p>You can also view designs created with our Google Maps widget (and other 20+ widgets) on our&nbsp;<a href=\"https:\/\/stratum.getmotopress.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Stratum demo<\/a>&nbsp;page.<br>Also, it will be useful to know that the addon is now available in the premium version!&nbsp;<a href=\"https:\/\/motopress.com\/products\/stratum-pro\/\" target=\"_blank\" rel=\"noreferrer noopener\">Stratum PRO<\/a>&nbsp;helps users reach the beyond-advanced level in design customization. The plugin lets you access the most tempting content, layout, and styling settings for very affordable pricing \u2013 only $19 as an annual fee powered up with priority MotoPress support.<br>Unlock the entire functionality of Stratum&nbsp;<a href=\"https:\/\/motopress.com\/stratum-elementor-widgets-pro-vs-lite\/\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor widgets<\/a>&nbsp;and enjoy the website building experience on maximum.<\/p>\n\n\n\n<p><em>If you are also working with the Gutenberg WordPress block editor, make sure to check out&nbsp;<\/em><a href=\"https:\/\/wordpress.org\/plugins\/getwid\/\"><em>Getwid<\/em><\/a><em>&nbsp;\u2013 our huge collection of free Gutenberg blocks.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The free version of Elementor provides you with a basic Google Maps widget, but if you want to customize the map further, use the Advanced Maps Elementor widget by&nbsp;Stratum. It\u2019s also free but gives you access to way more tools integrated from the official Google Maps services. See also:&nbsp;the Google Maps widget for the block [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[31,28,29],"tags":[],"_links":{"self":[{"href":"https:\/\/doc.freevision.me\/luxed\/wp-json\/wp\/v2\/posts\/603"}],"collection":[{"href":"https:\/\/doc.freevision.me\/luxed\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/doc.freevision.me\/luxed\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/doc.freevision.me\/luxed\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/doc.freevision.me\/luxed\/wp-json\/wp\/v2\/comments?post=603"}],"version-history":[{"count":1,"href":"https:\/\/doc.freevision.me\/luxed\/wp-json\/wp\/v2\/posts\/603\/revisions"}],"predecessor-version":[{"id":610,"href":"https:\/\/doc.freevision.me\/luxed\/wp-json\/wp\/v2\/posts\/603\/revisions\/610"}],"wp:attachment":[{"href":"https:\/\/doc.freevision.me\/luxed\/wp-json\/wp\/v2\/media?parent=603"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/doc.freevision.me\/luxed\/wp-json\/wp\/v2\/categories?post=603"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/doc.freevision.me\/luxed\/wp-json\/wp\/v2\/tags?post=603"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}