{"title":"Phlox Map","id":36620,"link":"https:\/\/env.averta.net\/en\/step\/phlox-map\/","parent":[37224,35059],"content":"<p><img decoding=\"async\" loading=\"lazy\" class=\"alignright wp-image-36510 size-full\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/map.png\" alt=\"map\" width=\"327\" height=\"360\" \/>Phlox <strong>Map Widget?<\/strong>will add a map to your desired widget area or anywhere on your posts and page, by customizing the widget in the <strong>Page Builder<\/strong>. It helps you to display your location on your website visitors. Various options control this widget. You can change its height, type, style, etc.<\/p>\n<p>Follow below steps to add <strong>Phlox Map<\/strong> to a widget area or in a page content:<\/p>\n<ol>\n<li>Go to your <strong>WordPress admin panel<\/strong><\/li>\n<li>Click?<b>Appearance<\/b> on the <b>Dashboard<\/b><\/li>\n<li>Then click?<strong>Widgets<\/strong><\/li>\n<li>Find <strong>[Phlox] Map?<\/strong>among the available widgets and add it to your desired <strong><a href=\"https:\/\/env.averta.net\/en\/step\/adding-widgets-to-different-widget-areas\/?b=36406,36406\" title=\"Adding Widgets to Different Widget Areas\">Widget Area<\/a><\/strong><\/li>\n<\/ol>\n<div style=\"clear: both;\"><\/div>\n<h3>Video Tutorial<\/h3>\n<div style=\"position: relative; height: 0; padding-bottom: 56.25%;\"><iframe loading=\"lazy\" width=\"560\" height=\"315\" style=\"position: absolute; width: 100%; height: 100%; left: 0; display: block;\" src=\"https:\/\/www.youtube.com\/embed\/ZKMypryYnto?rel=0\" frameborder=\"0\" encrypted-media=\"\" allowfullscreen=\"allowfullscreen\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">?<\/span><\/iframe><\/div>\n<hr style=\"clear: both;\" \/>\n<h3>Access Map Options in Elementor Page Builder<\/h3>\n<ol>\n<li>Go to your <strong>WordPress Admin Panel<\/strong><\/li>\n<li>Click the <b>Pages?<\/b>on the <b>Dashboard<\/b><\/li>\n<li>Click the <b>Add New<\/b><\/li>\n<li>Navigate to the top left hand of the WordPress text-box and find?<strong><a href=\"https:\/\/env.averta.net\/en\/step\/getting-started-with-elementor-page-builder\/?b=55475,55475\" title=\"Getting Started with Elementor Page Builder\">Edit with Elementor<\/a>?<\/strong>button.<\/li>\n<li>Check out?<strong>Elements<\/strong><\/li>\n<li>Scroll down to?<strong>PHLOX &#8211; General?<\/strong>section<\/li>\n<li>Choose?<strong>Map<\/strong><\/li>\n<\/ol>\n<p><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-map-content-elementor.png\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-55896 alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-map-content-elementor.png\" alt=\"\" width=\"299\" height=\"620\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-map-content-elementor.png 299w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-map-content-elementor-145x300.png 145w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-map-content-elementor-83x173.png 83w\" sizes=\"(max-width: 299px) 100vw, 299px\" \/><\/a>After you add map to your post or page, you are able to customize it by available options:<\/p>\n<ul>\n<li>\n<h4>Content<\/h4>\n<\/li>\n<\/ul>\n<h4>Map<\/h4>\n<p>To show your place on the map, you need to put <strong>Longitude<\/strong> and <strong>Latitude<\/strong>. In order to find out a place?s latitude\/longitude, right click the place or area on google maps and select What?s here. Then you will find a coordinates box at the bottom of the page.<\/p>\n<p>If you want to popup a text after marker is clicked, you can add the text as a?<strong>Marker info<\/strong>.<\/p>\n<p>There last option here is?<strong>Marker Icon<\/strong>. Here you can change the default icon of your map marker and add your own icon marker.<\/p>\n<p>You can set the default and initial resolution by changing?<strong>Zoom<\/strong>?from 1 to 20. Also, you can?enable?<strong>Zoom with mouse wheel?<\/strong>in order to let your visitors change it by mouse wheel.<\/p>\n<div style=\"clear: both;\"><\/div>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-55897 alignleft\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-map-style-elementor.png\" alt=\"\" width=\"301\" height=\"641\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-map-style-elementor.png 301w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-map-style-elementor-141x300.png 141w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-map-style-elementor-81x173.png 81w\" sizes=\"(max-width: 301px) 100vw, 301px\" \/><\/p>\n<ul>\n<li>\n<h4>Style<\/h4>\n<\/li>\n<\/ul>\n<p>There are two?<strong>Map types<\/strong>.?<strong>Roadmap?<\/strong>and?<b>Satellite<\/b>. Besides, you can change?map<strong> Height?<\/strong>on desktop, tablet, and mobile. After editing these two options, you can copy a preset?<strong>Map style<\/strong> from?<a href=\"https:\/\/snazzymaps.com\/\">this website<\/a>?to change the appearance of your map.<\/p>\n<p>To add navigations such as zoom in, zoom out, fullscreen view button, etc. to your map, you need to enable?<strong>Navigation control<\/strong>.<\/p>\n<p>You can set the default and initial resolution by changing?<strong>Zoom<\/strong>?from 1 to 20. Also, you can?enable?<strong>Zoom with mouse wheel?<\/strong>in order to let your visitors change it by mouse wheel.<\/p>\n<p class=\"aswi-text-box box-recommend\"><strong>Recommended: <\/strong>Check out <a href=\"https:\/\/env.averta.net\/en\/step\/getting-started-with-elementor-page-builder\/?b=55475,55475\" title=\"Getting Started with Elementor Page Builder\">this article<\/a> to know more about Advanced tab and start working with Elementor.<\/p>\n<hr \/>\n<h3>Access Map Options in SiteOrigin Page Builder<\/h3>\n<ol>\n<li>Go to your <strong>WordPress Admin Panel<\/strong><\/li>\n<li>Click?<b>Pages?<\/b>on the <b>Dashboard<\/b><\/li>\n<li>Click <b>Add New<\/b><\/li>\n<li>Navigate to the top right hand of the WordPress editor and find <strong><a href=\"https:\/\/env.averta.net\/en\/step\/getting-started-with-siteorigin-page-builder\/?b=36079,36079\" title=\"Getting Started with SiteOrigin Page Builder\">Page Builder<\/a><\/strong>, beside text tab<\/li>\n<li>Click?<strong>Add Widget<\/strong><\/li>\n<li>Click?<strong>Phlox?<\/strong>and choose?<strong>[Phlox]?Map<\/strong><\/li>\n<li>Click?<strong>Edit?<\/strong>on the right side of the widget on?<strong>Page Builder<\/strong><\/li>\n<\/ol>\n<p>After you add a map to your post or page, you are able to customize it by available options:<\/p>\n<h4><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/map-widget.png\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-36624 alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/map-widget.png\" alt=\"map-widget\" width=\"431\" height=\"935\" \/><\/a>Title<\/h4>\n<p>Your map can have a title. In this section, you can add a title for your map or leave it empty if you do not want a title.<\/p>\n<h4>Height<\/h4>\n<p>You can change the map height in pixels and choose a latitude\/longitude over the map.<\/p>\n<h4>Latitude and Longitude<\/h4>\n<p>To find a place&#8217;s latitude\/longitude, right click the place or area on google maps and select What&#8217;s here. Then you will find a coordinates box at the bottom of the page.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-36546\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/longlat.png\" alt=\"longlat\" width=\"452\" height=\"310\" \/><\/p>\n<h4>Map Type<\/h4>\n<p>Map type can be roadmap or satellite.<\/p>\n<h4>Map Style<\/h4>\n<p>With filling out the map style, you can customize the standard Google base maps&#8217; presentation.<\/p>\n<h4>Marker Info<\/h4>\n<p>You are able to have a marker popup text on your map.<\/p>\n<h4>Navigation Control<\/h4>\n<p>Navigation control appears on the map if you switch it on.<\/p>\n<h4>Zoom<\/h4>\n<p>Also, you are provided to zoom in\/out by using the mouse wheel scroll.<\/p>\n<h4>Extra Class Name<\/h4>\n<p>This field lets?you customize the widget. Write a style on?your CSS file, then add the defined class name here.<\/p>\n","type":"solution"}