Setting up Google Maps

The Actito Push UI module uses Google’s Maps API to present Map notifications. To enable this functionality, you must create a Google Maps API key and include it when loading the Google Maps JavaScript API.

You can generate a new API key in the Google Cloud Console. Once your key is created, use the recommended bootstrap loader to load the Maps JavaScript API:

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

Ensure that the following APIs are enabled for your Google Cloud project:

• Maps JavaScript API

When setting usage restrictions for your API key, make sure both of these APIs remain accessible.

tip

We recommend restricting your API key to specific domains for security purposes. You can configure these restrictions in the Google Cloud Console under API & Services → Credentials.

For more information about loading and configuring the Google Maps JavaScript API, refer to Google’s official documentation.