{"id":241,"date":"2018-05-23T05:19:33","date_gmt":"2018-05-23T05:19:33","guid":{"rendered":"https:\/\/webnus.site\/dox\/?p=241"},"modified":"2026-10-13T10:34:39","modified_gmt":"2026-10-13T10:34:39","slug":"map-view-skin-settings","status":"publish","type":"knowledgebase","link":"https:\/\/webnus.net\/dox\/modern-events-calendar\/map-view-skin-settings\/","title":{"rendered":"Map View Skin Settings"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">&nbsp;Map View Skin in the Modern Events Calendar is one of the most practical views. Your website visitors can get to know the event location and find those that are close to them at a glance. Or go for hotspots and the most attractive event sites.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Map_View_Skin_Shortcode\"><\/span>Map View Skin Shortcode<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You can use shortcodes in your internal pages to have this on your website. The shortcodes are located in&nbsp;<strong>M.E. Calendar &gt;  Shortcodes<\/strong>. If you want to use &#8220;Geolocation,&#8221; you need to enable this feature:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2018\/05\/map.png\" data-rel=\"lightbox-image-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"2878\" height=\"1442\" src=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2018\/05\/map.png\" alt=\"Map View Skin\" class=\"wp-image-10092\" title=\"\" srcset=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2018\/05\/map.png 2878w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2018\/05\/map-300x150.png 300w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2018\/05\/map-1024x513.png 1024w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2018\/05\/map-768x385.png 768w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2018\/05\/map-1536x770.png 1536w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2018\/05\/map-2048x1026.png 2048w\" sizes=\"auto, (max-width: 2878px) 100vw, 2878px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Then, on the front end of the website, the end-user should be allowed access to the location on the browser.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Map_View_Layout\"><\/span>Map View Layout<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Here is the demo of Map View Skin in the Modern Events Calendar:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/mec.webnus.net\/map-view\/\" target=\"_blank\" rel=\"noreferrer noopener\">Map View<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"map-shortcode-options\"><span class=\"ez-toc-section\" id=\"Map_View_Shortcode_Options\"><\/span>Map View Shortcode Options<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">These are the options you see in <strong>M.E. Calendar &gt; Shortcodes<\/strong> after choosing the <strong>Map View<\/strong> skin. MEC Pro and some addons can add more styles and options.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Option<\/th><th>What it does<\/th><th>Values<\/th><\/tr><\/thead><tbody><tr><td><strong>Start Date<\/strong><\/td><td>The date the view starts showing events from.<\/td><td>Today \/ Tomorrow \/ Yesterday \/ Start of Last Month \/ Start of Current Month \/ Start of Next Month \/ On a certain date<\/td><\/tr><tr><td><strong>Certain Start Date<\/strong><\/td><td>The exact start date, used when Start Date is set to &quot;On a certain date&quot;.<\/td><td>Date<\/td><\/tr><tr><td><strong>Maximum events<\/strong><\/td><td>Maximum number of events shown on the map.<\/td><td>Number<\/td><\/tr><tr><td><strong>Geolocation<\/strong><\/td><td>Centers the map on the visitor&#39;s location.<\/td><td>On \/ Off<\/td><\/tr><tr><td><strong>Disable Geolocation Force Focus<\/strong><\/td><td>Stops the map from forcing focus to the visitor&#39;s location.<\/td><td>On \/ Off<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"map-faq\"><span class=\"ez-toc-section\" id=\"Map_View_FAQ\"><\/span>Map View FAQ<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_do_I_add_the_Map_View_to_a_page\"><\/span>How do I add the Map View to a page?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Go to <strong>M.E. Calendar &gt; Shortcodes<\/strong>, add a new shortcode, choose <strong>Map View<\/strong> as the skin, set the options above and publish it. Then copy the generated shortcode (for example <code>[MEC id=\"123\"]<\/code>) into any page, post or widget.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_do_I_show_only_some_events\"><\/span>How do I show only some events?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Open the <strong>Filter Options<\/strong> of the same shortcode and limit events by category, location, organizer, label, tag or author. See <a href=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/making-advanced-shortcodes\/\">Making Advanced Shortcodes<\/a> for every filter.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Why_is_the_Map_View_empty_or_gray\"><\/span>Why is the Map View empty or gray?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The map needs a Google Maps API key and events with a location. Add your key in the Map section of the MEC settings (see <a href=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/event-modules\/\">Event Modules<\/a>) and check <a href=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/mec-not-working\/\">MEC Not Working<\/a> if it still does not load.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You can use shortcodes in your internal pages to have this on your website. The shortcode is located in M.E.Calendar > Settings > Shortcodes. It generally resembles the skin. Here\u2019s the original demo:<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","template":"","knowledgebase_cat":[42],"class_list":["post-241","knowledgebase","type-knowledgebase","status-publish","hentry","knowledgebase_cat-shortcodes"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":8}},"_links":{"self":[{"href":"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-json\/wp\/v2\/knowledgebase\/241","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-json\/wp\/v2\/knowledgebase"}],"about":[{"href":"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-json\/wp\/v2\/types\/knowledgebase"}],"author":[{"embeddable":true,"href":"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-json\/wp\/v2\/comments?post=241"}],"version-history":[{"count":2,"href":"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-json\/wp\/v2\/knowledgebase\/241\/revisions"}],"predecessor-version":[{"id":13734,"href":"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-json\/wp\/v2\/knowledgebase\/241\/revisions\/13734"}],"wp:attachment":[{"href":"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-json\/wp\/v2\/media?parent=241"}],"wp:term":[{"taxonomy":"knowledgebase_cat","embeddable":true,"href":"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-json\/wp\/v2\/knowledgebase_cat?post=241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}