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:

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

Creating an API Key

Lets get started! To create your application's API key, first, Go to the API Console. Log in with any Gmail or Google Apps email address.




  1. From the projects list near the top left, create a new project. Give it a name relevant to the website.
  2. The new project can take some time to show up.  Once it appears in your product list, click the menu icon at the top left and select API Manager, then select Library. Here you'll find Google Maps JavaScript API from in the library
  3. Click Enable near the top.
  4. When prompted, click Credentials.
  5. Click Create credentials.
  6. Select API Key from the options, then choose Browser Key form the options.
  7. Add your URL to the list of accepted sites. Look carefully at the URL format example provided in the URL field.

    *NOTES:
    - It is important to add an asterisk ( * ) and a dot ( . ) at the beginning of the URL to allow for sub-domains and changes from http to https.
    EXAMPLE : *.madwire.com/*

    - It is important to add a forward slash ( / ) and an asterisk ( * ) at the end of the URL.
    EXAMPLE : *.madwire.com/*

    - If the site is still on a .uxinetwork subdomain, add it as well. Be sure to add the slash and asterisk at the end.
    EXAMPLE: demos.uxinetwork.com/*

    FINAL RESULT:
    demos.uxinetwork.com/*
    *.madwire.com/*



  8. Click Create.
  9. Copy  the provided key and paste it in the Google Maps Api Key field on the Map Styles dashboard on the UXi site.
  10. Click Save Map Styles.

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.