In order to use advanced Google Maps features on a UXi site, an API key needs to be created on the Google APIs Manager.  To avoid usage issues with Google's API, this process should be completed using a Gmail or Google Apps email address belonging to the client.


If you are setting up the API key as a client:

  • Skip step 10. Instead, simply copy the provided API key and send it to your project manager or marketing executive.
  • Your project manager or marketing executive will provide the URL(s) that will be needed in step 12.

Creating an API Key

Lets get started! To get started, log-in to the Google API Console.

  1. Click the Projects list at the top of the dashboard.

  2. Click + Create a project from the top right of the pop up window. (If there is an existing project for the site, select it from the list.)

  3. Give the project a name that corresponds with the client account.

  4. Click Create.

  5. After the project has been created, select it from the Projects List at the top left.

  6. Click Enable APIs and Services.

  7. Search for Google Maps JavaScript API or select it from the list.

  8. Click Enable.

  9. Click Create Credentials to create the API key.

  10. Copy the resulting API key and paste it to the UXi Settings > Map Styles dashboard and save.

  11. Give the API key a name that corresponds with the site title.

  12. Select HTTP referrers (web sites) to restrict access to the API key.

    Let's use the Bob's Billiards example from above. If the mockup URL is bobsbilliards-mu.websites360.com and the final URL is bobsbilliards.com

    12 A: Add the Mockup URL
    If the site is still on a mockup .websites360.com subdomain, add that URL. Be sure to add the slash and asterisk at the end. This allows the API key to be used on any page of the site.
    EXAMPLE: bobsbilliards-mu.websites360.com/*

    12 B: Add the live URL
    It is important to add very specific settings here:
    Add an asterisk ( * ) and a dot ( . ) at the beginning of the URL to allow for sub-domains and changes from http to https.
    Add a forward slash ( / ) and an asterisk ( * ) at the end of the URL.
    EXAMPLE : *.bobsbilliards.com/*

    FINAL RESULT:
    bobsbilliards-mu.websites360.com/*
    *.bobsbilliards.com/*

  13. Click Save.


Custom map styles are possible with the use of the Google Maps API. 

Accessing the Google Maps JavaScript API also allows custom map styles to be added to the site. Simply click Enable Map Styles to get started.


 Add a Custom Map Marker to use as the 'pin' for each location by clicking Add Marker, then uploading or selecting an image from the media library.


Use the Hue / Saturation / Lightness sliders to create a unique, themed map to use in the Locations Finder and Locations Map widgets.