Directorist supports two types of maps out of the box by default. Google Maps and OpenStreetMap. 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.
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.
However, we will try our best to add the support for the map view layout to OpenStreetMap in a coming release.
Open Street Map
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.
Now visit the Dashboard → Directory Listings → Settings → Listings → Map. You can customize all options related to maps on that page.
Maps Settings
Select the OpenStreetMap from the Select Map option. You may also optionally set the default latitude and longitude for the map and adjust the zoom level of the map. You also adjust the height of the map on this page.
Disabling Map
Optionally, you may also disable the map on your site completely. If you want to disable the map completely. Please follow the following steps.
Visit Directory Listings → Directory Settings → Listing Settings → Single Listing page. Set the Disable Google Map option to ‘YES‘ and save the changes.
Visit Directory Listings → Directory Settings → Listing Settings → Form Fields page. Set the Enable Map option to ‘NO‘ and save the changes.
Google Map
You need an API key to use Google Maps on your directory website. You can find your API key for Google Maps in this link. Please follow the instruction there and copy your API key.
Now visit the Dashboard → Directory Listings → Settings → Listings → Map. You can customize all options related to maps on that page.
Maps Settings
Select the Google Map from the Select Map option. Then paste the Google Maps API key that you copied in the beginning in the Google Map API Key option field.
You may also optionally set the default latitude and longitude for the map and adjust the zoom level of the map. You also adjust the height of the map on this page.
Map API not working properly?
You need to follow the below steps to make the API work.
Step 1: 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]
Step 2: In this stage, you need to enable the Maps JavaScript API under APIs in the Google Cloud Platform Console. Go to the https://console.developers.google.com/apis/library and look for the Javascript Map API and enable it.
Step 3: Enable Billing on the Google Cloud Project at https://console.cloud.google.com/project/_/billing/enableStep 4: After enabling it, make sure you have the following API enabled.
1. Places API
2. Geocoding API
These don't require any keys, just enabling it will get the job done. Just go to API in the left side panel here https://console.developers.google.com/google/maps-apis/api-list and you will notice a list of APIs. Enable the 2 APIs above. Please check the screenshot below
That's all about configuring maps for Directorist.
That's all about configuring maps for Directorist.
Maps Settings