How to Easily Configure Map Services for Your MyListing Website

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

This is a topic that is brought up quite often, especially when it comes to the complexity of integrating Google Maps.

This guide will teach you how to easily set up your preferred Map Services solution provider, whether it be Google Maps or Mapbox.

Google Maps vs. Mapbox

There is no right or wrong answer here regarding which map service provider to use.

Ultimately, it comes down to a combination of personal preference and whether or not your website has any specific requirements for Map Services.

For my projects and client projects, Mapbox is typically the preference.

Mapbox is easier to implement all around, from account creation down to applying a custom skin. So far, I haven’t found a reason to use Google Maps, and I feel I’m 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 allow you to easily keep up with your billing usage. I recommend setting a recurring calendar reminder to check in on your usage once your MyListing website starts to pick up steam.

With Google Maps, you can set quotas, but this feature is not always seen as a good thing amongst the MyListing crowd, as it can prevent Map Services from working. Some prefer to pay for overages rather than 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: 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 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.

You can check out some of the custom Mapbox skins I’ve implemented by viewing the Club’s various MyListing Starter Sites.

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. 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 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; 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).

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.

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 do all the adding of Listings 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 on 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 would like 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

NEW: MyListing Club Community

Get a true community experience that Facebook just can't offer.

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.

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

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.

  • Elementor Pro ($49)
  • Perfmatters ($25)
  • Permalink Manager Pro ($45)
  • SEOPress Pro ($39)
  • UiPress ($39)
  • WooCommerce Product Vendors ($79) 
  • WooCommerce Subscriptions ($199)
  • WP Rocket ($49)