Easily Configure Map Services for Your MyListing Website

Suppose you provide maps and location functionality throughout your website (Explore pages, Single Listing Location Blocks, etc.). In that case, you must set up Google Maps, Mapbox, or OpenStreetMap for your Map Services.

This guide will teach you to easily set up your preferred Map Services solution provider and configure Map Service settings throughout your MyListing website.

Choosing a Map Services Provider

There is no right or wrong answer regarding which map service provider to use. Ultimately, it comes down to personal preference and whether or not your website has any specific requirements for Map Services.

Here is a great article that compares Google Maps, Mapbox, and OpenStreetMap in depth. After weighing the pros and cons of the available service providers, I recommend Mapbox.

Mapbox

Mapbox Account

1. Create your Mapbox account.
2. Access Tokens > Click the ‘Create a token’ button.
3. Name > Enter as desired.
4. URL > Input the full URL for your website. (e.g., https://mylisting.club) and click the ‘Add URL’ button.
5. Click the ‘Create token’ button.
6. Click the clipboard icon next to your token to copy it for placement on your website.

Mapbox Custom Skin (Optional)

If you would like to enhance the design of your maps to match them with your overall branding, for example, here are the steps to do that.

1. Visit Mapbox Studio.
2. Click the ‘New style’ button.
3. Start with a premade template, or choose ‘Blank’ to create your own from scratch. (Note: I recommend starting with a template and then adjusting it to fit your needs, as there can be a lot to these maps, and building them up from scratch can be daunting.).
4. If you choose a template, and depending on which template you choose, you will be given the option to select a color variation, which you can choose in this step.
5. Click the ‘Customize’ button.
6. From here, you can customize your map to your liking. When you’re ready, click the ‘Share’ icon in the top menu.
7. Style URL > Click the clipboard icon to copy the URL.

You can view the Club’s various MyListing Starter Sites to see some of the custom Mapbox skins I’ve implemented.

Mapbox Settings For MyListing

1. Theme Tools > Theme Options > Map Services.
2. Choose ‘Mapbox’.
3. Mapbox API Access Token > Paste in your API token copied from the ‘Mapbox Account’ section above.
4. Language > Typically, you can leave this at the default to let the browser dictate which language to load.
5. Autocomplete returns results FOR > Select the best option for your project or leave blank to return all.
6. Autocomplete returns results IN > Select the best option for your project or leave blank to return all.
7. Custom Map Styles > Add your desired label and paste the URL copied from the ‘Mapbox Custom Skin’ section above into your map style.
8. Save changes.
9. Edit your Explore page(s), assigning your custom map skin where desired.
10. Edit your Listing Type(s), assigning your custom map skin to the ‘Location’ field, the ‘Location Block’ (Single Page > Content & Tabs), and the ‘Quick View’ (Preview Card > Quick View). as desired.

Google Maps

Project Setup

1. Get started by visiting the Google Maps Platform Credentials page.
2. Click the ‘Create Project’ button.
3. Project Name > Enter as desired.
4. Click the ‘Create’ button.
5. Click on the ‘Places API’ card.
6. Click the ‘Enable’ button.
7. Additional APIs > Click the ‘Geocoding API’ link.
8. Click the ‘Enable’ button.
9. Additional APIs > Click the ‘Maps JavaScript API’ link.
10. Click the ‘Enable’ button.
11. Hover over the menu icons at the left-hand side of the screen to expose the full menu, and then select ‘Credentials.’
12. Click ‘Create Credentials’ and choose ‘API Key.’
13. Copy the API Key and save it to a secure location; we will reference it shortly.
14. Click ‘Restrict Key’.
15. Name > Enter as desired.
16. Application Restrictions > HTTP.
17. Website Restrictions > Click ‘Add An Item.’
18. In the ‘Referrer’ box, enter your domain name. (e.g., mylisting.club).
19. Click ‘Done’.
20. Save Changes.

At this point, you have created and secured your API Key, which will be automatically assigned to all of your APIs (Places, Geocoding, and Maps JavaScript).

Google Maps Custom Skin (Optional)

1. Open the Google Map Styling Wizard.
2. Click the ‘No thanks, take me to the old style wizard’ link.
3. Adjust the map style as desired.
4. Click the ‘Finish’ button.
5. Click ‘Copy JSON’.
6. On your website, go to Theme Tools > Map Services.
7. Custom Map Skins > Add a label for your map style and paste your JSON code.
8. Save changes.

Google Maps Settings For MyListing

1. Theme Tools > Theme Options > Map Services.
2. Choose ‘Google Maps’.
3. Google Maps API Key > Paste in your API key that was copied from the ‘Project Setup’ section above.
4. Language > Typically, you can leave this at the default to let the browser dictate which language to load.
5. Autocomplete returns results FOR > Select the best option for your project or leave blank to return all.
6. Autocomplete returns results IN > Select the best option for your project or leave blank to return all.
7. Custom Map Styles > Add your desired label and then paste the JSON copied from the ‘Google Maps Custom Skin’ section above in your map style.
8. Save changes.
9. Edit your Explore page(s), assigning your custom map skin where desired.
10. Edit your Listing Type(s), assigning your custom map skin to the ‘Location’ field, the ‘Location Block’ (Single Page > Content & Tabs), and the ‘Quick View’ (Preview Card > Quick View). as desired.

OpenStreetView

1. Theme Tools > Theme Options > Map Services.
2. Choose ‘OpenStreetMap’.
3. Language > Typically, you can leave this at the default to let the browser dictate which language to load.
4. Geocoding Provider > Nominatim
5. Autocomplete returns results FOR > Select the best option for your project.
6. Autocomplete returns results IN > Select the best option for your project or leave blank to return all.
7. Custom Map Styles > Add your desired label and paste the URL copied from the ‘Mapbox Custom Skin’ section above into your map style.
8. Save changes.
9. Edit your Explore page(s), assigning your custom map skin where desired.
10. Edit your Listing Type(s), assigning your custom map skin to the ‘Location’ field, the ‘Location Block’ (Single Page > Content & Tabs), and the ‘Quick View’ (Preview Card > Quick View). as desired.

Apply Map Settings Across Your MyListing Site

Listing Location Field

This is the map that people will see when they go to add their Listings (i.e., Submit Form), so if you add all of the Listings to your website yourself, you can skip this altogether. 

1. Listing Types > Edit the desired Listing Type.
2. Fields > Location Field (Note: I assume you have added this field.).
3. Map Skin > Assign a Custom Map Skin or choose one of the Map Skins included with the theme.
4. Default Map Location > Assign the desired coordinates. (Note: Since I’m in the United States, I like to put in the coordinates for the center of the US, which is Lat 37.935533 and Long -97.213871.).
5. Default Map Zoom Level > Assign the desired zoom level. (Note: Since I’m in the United States, I like to put in a zoom level that shows the entire US, which is ‘3’.).

Listing Location Block

This is the map that people see when viewing Listings on a MyListing website.

1. Listing Types > Edit the desired Listing Type.
2. Single Page > Content & Tabs > Edit the Tab where the Location block will live.
3. Add the Location block by clicking the ‘Location’ button or dragging it into the Tab.
4. Map Skin > Assign a Custom Map Skin or choose one of the Map Skins included with the theme.
5. Default Map Location > Assign the desired coordinates. (Note: Since I’m in the United States, I like to put in the coordinates for the center of the US, which is Lat 37.935533 and Long -97.213871.).
6. Default Map Zoom Level > Assign the desired zoom level. (Note: Since I’m in the United States, I like to put in a zoom level that shows the entire US, which is ‘3’.).

Listing Quick View

This is the map that people see when clicking on the ‘Quick View’ icon within a Listing Preview Card.

1. Listing Types > Edit the desired Listing Type.
2. Single Page > Preview Card > Quick View.
3. Map Skin > Assign a Custom Map Skin or choose one of the Map Skins included with the theme.

Explore Pages

This is the map that people see when viewing Explore pages that are using a map-enabled template.

1. Create and edit a page with Elementor you want to use as your Explore page.
2. Add the ’27 > Explore Listings’ widget to the page.
3. Template > Choose a template that provides the map to be displayed (ex. Template 1).
4. Map > Map Skin > Assign a Custom Map Skin or choose one of the Map Skins included with the theme.
5. Map > Zoom map using mouse scroll? > Leave enabled unless you have a good reason not to use this.
6. Default Latitude > Assign the desired Latitude value. (Note: Since I’m in the United States, I like to put in the coordinates for the center of the US, which uses a Latitude of 37.935533.).
7. Default Longitude> Assign the desired Longitude value. (Note: Since I’m in the United States, I like to put in the coordinates for the center of the US, which uses a Longitude of -97.213871.).
8. Zoom Levels > Adjust all of these options as desired.

Video Tutorial