IMPORTANT: If your production system or service is down file a Severity 1 support case at console.cloud.google.com/google/maps-apis

REMINDER: Please do not disclose any possible PII such as: email address, IP, contact number, any part of name, project numbers and billing accounts as these information may violate security and privacy. Comments or attachments that include PII will be removed and restricted from public viewing.

It is OK to share your API Project ID, but _not_ API keys or client ID credentials.

Furthermore, please refrain from replying to a comment as this will make your email address visible. Instead, you may use the Issue Tracker’s comment feature for your replies.

Please delete this sentence and the text above it after reading.
---
# Describe your issue

# Please report the version of Google Maps API
# Open the developer console and type: 'google.maps.version' and then press enter.
# Example:
# > google.maps.version
# <- "3.34.7"

# What steps will reproduce the problem? Please also provide a code sample which demonstrates your issue (e.g. via jsfiddle.net, or jsbin.com)

this is the code I used and the attached glb file
<!DOCTYPE html>
<html>
<head>
<title>Photorealistic 3D Maps in Maps JavaScript models</title>
<style>
html,
body {
height:100%;
margin: 0;
padding: 0;
}

gmp-map-3d {
height: 400px;
width: 800px;
}
</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.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>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script type="text/javascript">
// Maps JS API is loaded using Dynamic Library import https://developers.google.com/maps/documentation/javascript/load-maps-js-api#dynamic-library-import

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

const map = new Map3DElement({
center: {lat: 37.7438, lng: -121.5088, altitude: 1800},
heading: -90,
tilt: 90,
defaultLabelsDisabled: true,
});

document.body.append(map);

const models = [
// A model with regular settings.
{
position: {lat: 37.76, lng: -121.63, altitude: 0},
orientation: {tilt: 270},
},
// Scaled down model.
{
position: {lat: 37.75, lng: -121.63, altitude: 0},
orientation: {tilt: 270},
scale: 0.8,
},
// Scaled up model.
{
position: {lat: 37.735, lng: -121.63, altitude: 0},
orientation: {tilt: 270},
scale: 1.2,
},
// A model with an additional transformation applied.
{
position: {lat: 37.72, lng: -121.63, altitude: 0},
orientation: {tilt: 270, roll: 90},
},
// Non-clamped to the ground model.
{
position: {lat: 37.71, lng: -121.63, altitude: 1000},
altitudeMode: 'RELATIVE_TO_GROUND',
orientation: {tilt: 270},
},
];

for (const {position, altitudeMode, orientation, scale} of models) {
const model = new Model3DElement({
src: './ball.glb',
position,
altitudeMode,
orientation,
scale,
});

map.append(model);
}
}

init();

</script>
</body>
</html>

Issue 379330012

Links (6)

Issue metadata