html - How to remove Using the alpha channel of the Google Maps JavaScript API. For development purposes only

I am trying to build a make using the 3d photorealistic maps from google and even if i have billing and api set up i can seam to get rid of the banner

Using the alpha channel of the Google Maps JavaScript API. For development purposes only.



<!DOCTYPE html>
<html>

<head>
   <title>Step 3 - Simple Marker</title>
   <style>
       body {
           height: 100vh;
           margin: 0;
       }
   </style>
</head>

<body>
   <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/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: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
           v: "alpha",
       });
   </script>
   <script>
       let map3D = null;

       async function init() {
           const { Map3DElement, MapMode, Marker3DElement } = await google.maps.importLibrary("maps3d");

           map3D = new Map3DElement({
               center: {  lat: 25.807096, lng: -80.361428, altitude: 30},
               range: 200,
               tilt: 70,
               heading: 250,
               mode: MapMode.SATELLITE,
           });

           const markers = [
               { lat: 25.807096, lng: -80.361428, altitude: 20, label: "Google UK" },
               {  lat: 25.806642, lng:  -80.363456, altitude: 20, label: "Statue of Liberty" },
               {  lat: 25.805468, lng:-80.364287, altitude: 20, label: "Eiffel Tower" },
               {  lat: 25.804730, lng: -80.364945, altitude: 20, label: "Los Angeles" }
           ];

           markers.forEach(markerData => {
               const marker = new Marker3DElement({
                   position: { lat: markerData.lat, lng: markerData.lng, altitude: markerData.altitude },
                   label: markerData.label,
                   altitudeMode: 'ABSOLUTE',
                   extruded: true,
               });
               map3D.append(marker);
           });

           document.body.append(map3D);
       }
       init();
   </script>
</body>

</html>

trying to build a 3d map around golf courses

I am trying to build a make using the 3d photorealistic maps from google and even if i have billing and api set up i can seam to get rid of the banner

Using the alpha channel of the Google Maps JavaScript API. For development purposes only.



<!DOCTYPE html>
<html>

<head>
   <title>Step 3 - Simple Marker</title>
   <style>
       body {
           height: 100vh;
           margin: 0;
       }
   </style>
</head>

<body>
   <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/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: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
           v: "alpha",
       });
   </script>
   <script>
       let map3D = null;

       async function init() {
           const { Map3DElement, MapMode, Marker3DElement } = await google.maps.importLibrary("maps3d");

           map3D = new Map3DElement({
               center: {  lat: 25.807096, lng: -80.361428, altitude: 30},
               range: 200,
               tilt: 70,
               heading: 250,
               mode: MapMode.SATELLITE,
           });

           const markers = [
               { lat: 25.807096, lng: -80.361428, altitude: 20, label: "Google UK" },
               {  lat: 25.806642, lng:  -80.363456, altitude: 20, label: "Statue of Liberty" },
               {  lat: 25.805468, lng:-80.364287, altitude: 20, label: "Eiffel Tower" },
               {  lat: 25.804730, lng: -80.364945, altitude: 20, label: "Los Angeles" }
           ];

           markers.forEach(markerData => {
               const marker = new Marker3DElement({
                   position: { lat: markerData.lat, lng: markerData.lng, altitude: markerData.altitude },
                   label: markerData.label,
                   altitudeMode: 'ABSOLUTE',
                   extruded: true,
               });
               map3D.append(marker);
           });

           document.body.append(map3D);
       }
       init();
   </script>
</body>

</html>

trying to build a 3d map around golf courses

Share Improve this question asked Mar 16 at 1:22 Roger Urbina 91 bronze badge

I cannot reproduce anything. Your code shows: Oops! Something went wrong. This page didn't load Google Maps correctly. See the JavaScript console for technical details. – Sergey A Kryukov Commented Mar 16 at 3:54
Hi segey thank you for taking the time, you would need to past in you. Own Google Maps api KEY in order for the map to load, I made mine all Xxxxxx for obvious reasons – Roger Urbina Commented Mar 16 at 15:53
1 Thank you for the note; yes, I know about the keys. I know that the Google Maps API code samples provide the keys for testing; you could do the same and insert a key from the Google samples in your code sample. You know, when you ask a question that can be reproduced right away, it is always possible to make a ready-to-test code sample. See also: How to create a Minimal, Reproducible Example. Thank you for understanding. – Sergey A Kryukov Commented Mar 16 at 16:16
1 also recommended: using the "html snippet" function of the question editor. it's in the toolbar. the document icon with <> written on it. that makes this runnable right here, no copypasting to somewhere else. – Christoph Rackwitz Commented Mar 16 at 18:51
@Christoph Rackwitz — Right. I did not edit the question to rework the code into a code snippet only because it only shows a Google Maps API error. – Sergey A Kryukov Commented Mar 17 at 3:12

| Show 1 more comment

2 Answers 2

Sorted by: Reset to default 0

Change the version of your maps sdk, your current version is alpha which shows you this message.

{
  key: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
  v: "weekly", // Changed from 'alpha'
}

As google states in their docs:

Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).

You aren't allowed to remove the Banner.

It is for development purposes only and should not be used in production.

This is there to prevent commercial use, since Maps3D isn't launched yet (It's Experimental) and usage on it is not being charged either.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - How to remove Using the alpha channel of the Google Maps JavaScript API. For development purposes only - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)