Get a Maps Demo Key: Try out select Maps JavaScript API and Places UI Kit features at no cost with a Maps Demo Key—no billing information required.

Trigger camera movement on marker click

The following example shows how to trigger an action when a marker is clicked in 3D Maps in Maps JavaScript.

[フレーム]

JavaScript

asyncfunctioninit(){
// Include the interactive marker class
const{Map3DElement,Marker3DInteractiveElement}=
awaitgoogle.maps.importLibrary('maps3d');
// We will use this to place the camrea for the intial view but also to fly around the starting point.
constoriginalCamera={
center:{lat:39.1178,lng:-106.4452,altitude:4395.4952},
range:1500,
tilt:74,
heading:0,
};
constmap=newMap3DElement({
...originalCamera,
mode:'SATELLITE',
});
// Create the interactive marker and set the attributes.
constinteractiveMarker=newMarker3DInteractiveElement({
position:{lat:39.1178,lng:-106.4452,altitude:100},
altitudeMode:'RELATIVE_TO_MESH',
extruded:true,
label:'Mount Elbert',
});
// Specify the action to take on click.
interactiveMarker.addEventListener('gmp-click',()=>{
map.flyCameraAround({
camera:originalCamera,
durationMillis:50000,
repeatCount:1,
});
});
map.append(interactiveMarker);
document.body.append(map);
}
voidinit();index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
html,
map{
height:100%;
}
body{
height:100%;
margin:0;
padding:0;
}style.css

HTML

<html>
 <head>
 <title>Map</title>
 <link rel="stylesheet" type="text/css" href="./style.css" />
 <script type="module" src="./index.js"></script>
 <script>
 // prettier-ignore
 (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: "GOOGLE_MAPS_API_KEY"
 });
 </script>
 </head>
 <body>
 <div id="map"></div>
 </body>
</html>index.html

Clone Sample

Git and Node.js are required to run this sample locally. Follow these instructions to install Node.js and NPM. The following commands clone, install dependencies and start the sample application.

gitclonehttps://github.com/googlemaps-samples/js-api-samples.git
cdsamples/3d-marker-click-event
npmi
npmstart

Trigger camera movement on marker click Stay organized with collections Save and categorize content based on your preferences.

JavaScript

CSS

HTML

Clone Sample

Trigger camera movement on marker click