Assigned
Status Update
No update yet.
Comments
ka...@google.com
ka...@google.com
Thanks for your suggestion!
We'll be reviewing this for further consideration. Please star this issue to get updates and leave comments for additional information. Please note that starring the issue also provides our product team with valuable feedback on the importance of the issue to our customers.
ka...@google.com
Thank you for your patience.
After further checking, it seems that your 3D ball model was too small to be visible in the original scale. We were able to make all 5 models visible by setting the scale to 1000. Please refer to the attached screenshot.
Description
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
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=`
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
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>