How to Easily Configure Map Services for Your MyListing Website

Building better MyListing websites. One guide at a time.

Table of Contents

Overview

Guide Updated: 9/14/2021

This is a topic that is brought up quite often, especially when it comes to the complexity of integrating Google Maps. Our How to Easily Configure Map Services for Your MyListing Website guide will show you how to easily set up your preferred Map Services solution provider (Google Maps or Mapbox).

For those that don’t know, Map Services are used for displaying maps, place suggestions, and geocoding throughout the MyListing theme.

Google Maps vs. Mapbox

There is no right or wrong answer here. Ultimately, it comes down to a combination of personal preference and whether or not your website has any specific requirements for Map Services.

For our own projects, we always use Mapbox. It’s just easier to implement all around, from account creation all the way down to applying a custom skin. So far, we have not found a reason to use Google Maps and we feel we are in good company, as brands like Facebook, Pinterest, and others are powered by Mapbox.

Getting started with either of these services is Free of charge. However, it is important to note that you can start to incur charges with both services if your website makes a ton of API calls, which is typically seen with larger, more popular websites.

Google Maps and Mapbox give you the ability to easily keep up with your billing usage at all times. We recommend setting a recurring calendar reminder to check in on your usage, once your MyListing website starts to really pick up steam.

With Google Maps you can set quotas, but this is feature is not always seen as a good thing amongst the MyListing crowd, as it can prevent Map Services from working at all. Some prefer to pay for any overages, rather than to provide their users with a bad experience.

Mapbox doesn’t allow you to set quotas currently but does provide protections to prevent API usage spikes, and again, you can easily monitor usage in real-time.

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: We 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 a daunting task.).
  4. If you choose a template and depending on which template you chose, you will be presented with an option to select a color variation, which you can choose in this step.
  5. Click the ‘Customize’ button.
  6. From here, you will customize your map to your liking and when you’re ready, click the ‘Share’ icon in the top menu.
  7. Style URL > Click the clipboard icon to copy the URL.

We welcome you to check out our custom Mapbox skins, by viewing our Starter Site 3 and Starter Site 4 Explore pages.

Mapbox Settings For MyListing

  1. Theme Tools > Theme Options >Map Services.
  2. Choose ‘Mapbox’.
  3. Mapbox API Access Token > Paste in your API token that was copied from the ‘Mapbox Account’ section above.
  4. Languages > Typically you can leave this at the default, to let the browser dictate which language to load.
  5. Autocomplete returns results FOR> Make a selection here based on the needs of your particular project.
  6. Autocomplete returns results IN > Make a selection here based on the needs of your particular project.
  7. Custom Map Styles > Add your desired label and then paste in your map style URL that was copied from the ‘Mapbox Custom Skin’ section above.
  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 as we will reference it here 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 and this key will be automatically assigned to all of your APIs (Places, Geocoding, and Maps JavaScript).

  1.  

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. Languages > Typically you can leave this at the default, to let the browser dictate which language to load.
  5. Autocomplete returns results FOR> Make a selection here based on the needs of your particular project.
  6. Autocomplete returns results IN > Make a selection here based on the needs of your particular project.
  7. Custom Map Styles > Add your desired label and then paste in your map style JSON that was copied from the ‘Google Maps Custom Skin’ section above.
  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.

Video Tutorial

Play Video

WooCommerce Subscriptions Ready

The latest version of the WooCommerce Subscriptions plugin is included (unlicensed) and once you have a Starter Site in hand, you can easily put in your own pricing, package features, graphics, etc.

Should you not wish to use WooCommerce Subscriptions, you can simply turn the Listing Subscription packages into standard MyListing packages in just a few clicks and be on your way.

  • Custom WooCommerce Endpoint Design
  • WooCoommerce Subscriptions Setup
  • Listing Subscription Packages
  • Listing Subscription Switching
  • Stripe Payment Gateway Plugin
  •  and more…

Note: The latest version of the WooCommerce Subscriptions plugin is included, but you need to purchase your own license or sign up for a qualifying MyListing Website Care plan if you wish to receive future plugin updates and support.

Premium Assets

Get licensed, premium plugins, valued at over $600 in the first year alone, making a Starter Site investment a no-brainer.

You will get licensed copies of all the plugins listed below, with the exception of the WooCommerce Subscriptions and WooCommerce Product Vendors, and the licenses are yours to keep, for as long as the plugins remain on your website.

  • Admin 2020 ($39)
  • Crocoblock Suite ($130)
  • Elementor Pro ($49)
  • Perfmatters ($25)
  • Permalink Manager Pro ($45)
  • SEOPress Pro ($39)
  • WooCommerce Product Vendors ($79) 
  • WooCommerce Subscriptions ($199)
  • WP Rocket ($49)