Map Settings

uListing plugin allows using three mapping services to navigate listings. They are Google Map, OpenStreetMap, and Mapbox maps.

Using one of these services is quite easy in our plugin layout. You can choose any map service and navigate your listings in the inventory & single layout pages of that listing type.

Go to Listing Types > Settings > Main Settings to choose the desired map service.

You need an API key to use the Google Map and you need an access token to use the Mapbox service. OpenStreetMap does not require any key.

Map element in the Inventory layout:

Then go to the Inventory layout section of this setting and open your chosen layout.

Choose the Map attribute given among General attributes and put it where you want it to appear:

Then save your changes and open the inventory page of any listing type and it is enough to follow these steps to use those thirty party map services in uListing plugin:

Location element in the Single page layout:

Go to the Single page section of the listing type and drag the location element where you want it to appear:

Save your changes, and open any listing single page layout to see the result:

However, you must get the credential like API key (in Google Map) and the access token (in Mapbox). To set up the map setting itself, we will go further in the explanation below for each map service.

Google Map

Google Map is a well-known map service with a lot of functionalities and API data. For getting an API key and enable them in your site, your site should be live in the server not in your local server. Because you will register to Google Cloud Platform with your live site address.

To get a Google API key, billing info is required. Google Map provides you free 28,000 map loads and searches per month. If you want to use more, you should choose some pricing plan.

Go to the Google Maps API Key Setup Link, click the button Get Started, and choose the Map option over there:

Click the Continue button and enter your project name:

As it is mentioned, you need to provide billing info via the credit card data:

In the next steps, you must fill more information like account type and credit card information:

After filling in all the required information, please start your free trial:

You’re all set! Find the API Keycode as displayed in the image below. Copy the code and click on Done.

Now, you need to paste it in the Google map API key input field:

However, you are not in the finish since you need to enable Google API services as well:

Go to your Google Cloud Platform dashboard via this link.

Then go to APIs & Services > Library, you need to enable three API keys for this purpose shown below:

Search for Maps JavaScript API and activate it:

Search for the Places API and enable it:

Search for the Geocoding API and enable it:

As a result, you will see the Google mapping service in your inventory pages like below:

OpenStreetMap

OpenStreetmap is a collaborative project to create a free editable map of the world. As it is said above, you do not need to get any keys to use OpenStreetmap service. Just choose it in the Map settings and check your map attribute in the inventory page layout as explained above.

As a result, you will see the OpenStreetmap mapping service in your inventory pages like below:

Mapbox

Mapbox is a mapping and location cloud platform which helps you to navigate your listings situated over the world. It is a free service to use map loaders and search loaders.

Mapbox provides free 50, 000 locator loads and 50, 000 searches per month.

You need to create your account on Mapbox official website to get the access token.

You can get more details about how the Mapbox access tokens here.

Then you need to verify your Mapbox account via the registered email.

Then open your Mapbox profile > Tokens page:

Copy the access token and paste it into Map settings over the Mapbox input field:

As a result, you will see the Mapbox mapping service in your inventory pages: