{"id":207,"date":"2020-05-08T23:28:42","date_gmt":"2020-05-08T23:28:42","guid":{"rendered":"https:\/\/directorist.com\/docs\/?post_type=wpwax_directorist&#038;p=207"},"modified":"2021-07-26T16:26:49","modified_gmt":"2021-07-26T10:26:49","slug":"configuring-maps","status":"publish","type":"wpwax_directorist","link":"https:\/\/directorist.com\/documentation\/directorist\/advanced-settings\/configuring-maps\/","title":{"rendered":"Configuring Maps"},"content":{"rendered":"<div id=\"eckb-article-content-header\">\n<p id=\"12155\" class=\"eckb-article-title kb-article-id\"><span style=\"font-size: inherit\">Directorist supports two types of maps out of the box by default.\u00a0 <\/span><strong style=\"font-size: inherit\">Google Maps<\/strong><span style=\"font-size: inherit\">\u00a0and\u00a0<\/span><strong style=\"font-size: inherit\">OpenStreetMap<\/strong><span style=\"font-size: inherit\">. However, you can use only one map at a time on your site. You can either use Google Maps or OpenStreetMap. You may already know it is free to use OpenStreetMap.<\/span><\/p>\n<\/div>\n<div id=\"eckb-article-content-body\">\n<div id=\"kb-article-content\">\n<p>However, you may also use Google Maps for free with a limited quota provided by Google. You can use Google Maps by buying a premium plan in case you exceed the free quota. Now it is up to you which map you would like to use on your site. It is good to know that the Map View Layout of Directorist listings works with Google Maps at the moment.<\/p>\n<p>However, we will try our best to add the support for the map view layout to OpenStreetMap in a coming release.<\/p>\n<p><iframe loading=\"lazy\" title=\"How to configure the Directorist map\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/bnqP8-AE7ro?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<\/div>\n<div id=\"eckb-article-content-header\">\n<h3 id=\"12161\" class=\"eckb-article-title kb-article-id\">Open Street Map<\/h3>\n<\/div>\n<div id=\"eckb-article-content-body\">\n<div id=\"kb-article-content\">\n<p>OpenStreetMap is free to use. It is supported by Directorist out of the box. You do not need to use any API key unlike Google Map if you choose to use OpenStreetMap.<\/p>\n<p>Now visit the <strong>Dashboard \u2192 Directory Listings \u2192 Settings \u2192 Listings \u2192 Map<\/strong>. You can customize all options related to maps on that page.<\/p>\n<figure id=\"attachment_3439\" class=\"wp-caption aligncenter\" aria-describedby=\"caption-attachment-3439\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1016 size-full\" src=\"http:\/\/directorist.com\/documentation\/wp-content\/uploads\/sites\/5\/2020\/05\/15-map-settings.png\" alt=\"\" width=\"1919\" height=\"871\" srcset=\"https:\/\/directorist.com\/documentation\/wp-content\/uploads\/sites\/5\/2020\/05\/15-map-settings.png 1919w, https:\/\/directorist.com\/documentation\/wp-content\/uploads\/sites\/5\/2020\/05\/15-map-settings-300x136.png 300w, https:\/\/directorist.com\/documentation\/wp-content\/uploads\/sites\/5\/2020\/05\/15-map-settings-1024x465.png 1024w, https:\/\/directorist.com\/documentation\/wp-content\/uploads\/sites\/5\/2020\/05\/15-map-settings-768x349.png 768w, https:\/\/directorist.com\/documentation\/wp-content\/uploads\/sites\/5\/2020\/05\/15-map-settings-1536x697.png 1536w\" sizes=\"auto, (max-width: 1919px) 100vw, 1919px\" \/><\/figure>\n<h3>Maps Settings<\/h3>\n<p>Select the\u00a0<strong>OpenStreetMap<\/strong>\u00a0from the\u00a0<strong>Select Map<\/strong>\u00a0option. You may also optionally set the\u00a0<strong>default latitude<\/strong>\u00a0and\u00a0<strong>longitude<\/strong> for the map and adjust the zoom level of the map. You also adjust the height of the map on this page.<\/p>\n<h3>Disabling Map<\/h3>\n<p>Optionally, you may also disable the map on your site completely. If you want to disable the map completely. Please follow the following steps.<\/p>\n<ul>\n<li>Visit <strong>Directory<\/strong><strong>\u00a0Listings \u2192 Directory Settings \u2192 Listing Settings \u2192 Single Listing<\/strong>\u00a0page. Set the\u00a0<strong>Disable Google Map<\/strong>\u00a0option to \u2018<strong>YES<\/strong>\u2018 and save the changes.<\/li>\n<li>Visit <strong>Directory<\/strong><strong>\u00a0Listings \u2192 Directory Settings \u2192 Listing Settings \u2192 Form Fields<\/strong>\u00a0page. Set the\u00a0<strong>Enable Map<\/strong>\u00a0option to \u2018<strong>NO<\/strong>\u2018 and save the changes.<\/li>\n<\/ul>\n<div id=\"eckb-article-content-header\">\n<h3 id=\"12157\" class=\"eckb-article-title kb-article-id\">Google Map<\/h3>\n<\/div>\n<div id=\"eckb-article-content-body\">\n<div id=\"kb-article-content\">\n<p>You need an API key to use Google Maps on your directory website. You can find your API key for Google Maps\u00a0<a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/get-api-key\" target=\"_blank\" rel=\"noopener noreferrer\">in this link<\/a>. Please follow the instruction there and copy your API key.<\/p>\n<p>Now visit the <strong>Dashboard \u2192 Directory Listings \u2192 Settings \u2192 Listings \u2192 Map<\/strong>. You can customize all options related to maps on that page.<\/p>\n<h3 id=\"attachment_3439\" class=\"wp-caption aligncenter\" aria-describedby=\"caption-attachment-3439\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1018 size-full\" src=\"http:\/\/directorist.com\/documentation\/wp-content\/uploads\/sites\/5\/2020\/05\/Maps-settings-1.png\" alt=\"\" width=\"1920\" height=\"1812\" srcset=\"https:\/\/directorist.com\/documentation\/wp-content\/uploads\/sites\/5\/2020\/05\/Maps-settings-1.png 1920w, https:\/\/directorist.com\/documentation\/wp-content\/uploads\/sites\/5\/2020\/05\/Maps-settings-1-300x283.png 300w, https:\/\/directorist.com\/documentation\/wp-content\/uploads\/sites\/5\/2020\/05\/Maps-settings-1-1024x966.png 1024w, https:\/\/directorist.com\/documentation\/wp-content\/uploads\/sites\/5\/2020\/05\/Maps-settings-1-768x725.png 768w, https:\/\/directorist.com\/documentation\/wp-content\/uploads\/sites\/5\/2020\/05\/Maps-settings-1-1536x1450.png 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><br \/>\nMaps Settings<\/h3>\n<p>Select the\u00a0<strong>Google Map<\/strong>\u00a0from the\u00a0<strong>Select Map<\/strong>\u00a0option. Then paste the Google Maps API key that you copied in the beginning in the\u00a0<strong>Google Map API Key<\/strong>\u00a0option field.<\/p>\n<p>You may also optionally set the\u00a0<strong>default latitude<\/strong>\u00a0and\u00a0<strong>longitude<\/strong> for the map and adjust the zoom level of the map. You also adjust the height of the map on this page.<\/p>\n<\/div>\n<h3>Map API not working properly?<\/h3>\n<p>You need to follow the below steps to make the API work.<\/p>\n<p><strong>Step 1:<\/strong> Make sure, you have set the Javascript Google Map API key correctly. [You must need the JAVASCRIPT API to make it work, any other will not work]<\/p>\n<p><strong>Step 2:<\/strong> In this stage, you need to enable the Maps JavaScript API under APIs in the Google Cloud Platform Console. Go to the\u00a0<a href=\"https:\/\/console.developers.google.com\/apis\/library\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/console.developers.google.com\/apis\/library<\/a>\u00a0and look for the Javascript Map API and enable it.<\/p>\n<p><strong>Step 3:<\/strong> Enable Billing on the Google Cloud Project at\u00a0<a href=\"https:\/\/console.cloud.google.com\/project\/_\/billing\/enable\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/console.cloud.google.com\/project\/_\/billing\/enable<\/a><\/p>\n<p><strong>Step 4:<\/strong> After enabling it, make sure you have the following API enabled.<\/p>\n<p><em>1. Places API<br \/>\n2. Geocoding API<\/em><\/p>\n<p>These don&#8217;t require any keys, just enabling it will get the job done. Just go to API in the left side panel here\u00a0<a href=\"https:\/\/console.developers.google.com\/google\/maps-apis\/api-list\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/console.developers.google.com\/google\/maps-apis\/api-list<\/a> and you will notice a list of APIs. Enable the 2 APIs above. Please check the screenshot below<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/i.imgur.com\/4A8tn6o.png\" \/><\/p>\n<p>That&#8217;s all about configuring maps for Directorist.<\/p>\n<div id=\"kb-article-content\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":2298,"parent":0,"menu_order":0,"template":"","class_list":["post-207","wpwax_directorist","type-wpwax_directorist","status-publish","hentry","wpwax_directorist_category-advanced-settings"],"acf":[],"_links":{"self":[{"href":"https:\/\/directorist.com\/documentation\/wp-json\/wp\/v2\/wpwax_directorist\/207","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/directorist.com\/documentation\/wp-json\/wp\/v2\/wpwax_directorist"}],"about":[{"href":"https:\/\/directorist.com\/documentation\/wp-json\/wp\/v2\/types\/wpwax_directorist"}],"author":[{"embeddable":true,"href":"https:\/\/directorist.com\/documentation\/wp-json\/wp\/v2\/users\/2298"}],"wp:attachment":[{"href":"https:\/\/directorist.com\/documentation\/wp-json\/wp\/v2\/media?parent=207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}