1. शुरू करने से पहले
इस ट्यूटोरियल में, अपने ऐप्लिकेशन में 3D मार्कर जोड़ने और उन्हें स्टाइल देने का तरीका बताया गया है. आपको किसी खास जगह पर और उसके आस-पास फ़्लाइट की मदद से, अपने ऐप्लिकेशन को ऐनिमेट करने का तरीका भी पता चलेगा.
यह ट्यूटोरियल, पहले codelab में बताए गए कॉन्सेप्ट पर आधारित है. अगर आपने अभी तक वह कोडलैब पूरा नहीं किया है, तो इस ऐप्लिकेशन के लिए ज़रूरी बुनियादी जानकारी पाने के लिए, वह कोडलैब पूरा करें.
आपको क्या करना होगा
इस ऐप्लिकेशन में, यूरोप में Google के मुख्य ऑफ़िस के बारे में खास जानकारी दी गई है. उपयोगकर्ता किसी ऑफ़िस को चुनकर, उसे एक्सप्लोर करने के लिए उसमें और उसके आस-पास फ़्लाइट कर सकते हैं. इसके बाद, सामान्य व्यू पर वापस जाने के लिए ज़ूम आउट कर सकते हैं. ये सुविधाएं, आम तौर पर यात्रा और एक्सप्लोरेशन ऐप्लिकेशन में मिलती हैं. इनसे उपयोगकर्ताओं को बेहतर अनुभव मिलता है.
इस कोडलैब में, आपको एक ऐसा 3D वेब ऐप्लिकेशन बनाना होगा जो ये काम करता हो:
- Maps JavaScript API को डाइनैमिक तरीके से लोड करता है.
- मैप में 3D मार्कर जोड़ता है.
- SVG का इस्तेमाल करके मार्कर को स्टाइल करता है.
- मार्कर पर और उसके आस-पास जाने की सुविधा जोड़ी गई.
- कोड से जगहों की जानकारी को ऐरे में बदलता है.
आपको क्या सीखने को मिलेगा
- मार्कर कैसे काम करते हैं.
- मार्कर को स्टाइल करने का तरीका.
- पहले से मौजूद फ़ंक्शन के साथ ऐनिमेशन कैसे काम करता है.
- बेहतर फ़्रेमिंग के लिए, कैमरे की जगहों की तुलना में पॉइंट की जगहों को दिखाना.
- आइटम को बेहतर तरीके से फ़्रेम करने के लिए, कैमरे के पैरामीटर कैप्चर करने के बारे में अहम जानकारी.
ज़रूरी शर्तें
इस कोडलैब को पूरा करने के लिए, आपको यहां दिए गए आइटम के बारे में जानकारी होनी चाहिए. अगर आपको Google Maps Platform के साथ काम करने का पहले से पता है, तो सीधे Codelab पर जाएं.
Google Maps Platform के ज़रूरी प्रॉडक्ट
इस कोडलैब में, आपको Google Maps Platform के इन प्रॉडक्ट का इस्तेमाल करना होगा:
- Maps JavaScript एपीआई
इस कोडलैब के लिए अन्य ज़रूरी शर्तें
इस कोडलैब को पूरा करने के लिए, आपको इन खातों, सेवाओं, और टूल की ज़रूरत होगी:
- बिलिंग की सुविधा वाला Google Cloud खाता.
- Maps JavaScript API की सुविधा वाला Google Maps Platform API पासकोड.
- JavaScript, एचटीएमएल, और सीएसएस की बुनियादी जानकारी.
- आपकी पसंद का टेक्स्ट एडिटर या आईडीई, ताकि फ़ाइल में बदलाव करके उसे देखा जा सके.
- फ़ाइल को काम करते समय देखने के लिए वेब ब्राउज़र.
2. सेट अप करें
Google Maps Platform सेट अप करना
अगर आपके पास Google Cloud Platform खाता और बिलिंग की सुविधा वाला प्रोजेक्ट नहीं है, तो बिलिंग की सुविधा वाला खाता और प्रोजेक्ट बनाएं. ऐसा करने का तरीका जानने के लिए, कृपया Google Maps Platform का इस्तेमाल शुरू करना देखें.
- Cloud Console में, प्रोजेक्ट वाले ड्रॉप-डाउन मेन्यू पर क्लिक करें. इसके बाद, उस प्रोजेक्ट को चुनें जिसे इस कोडलैब के लिए इस्तेमाल करना है.
- इस कोडलैब के लिए ज़रूरी Google Maps Platform API और एसडीके को Google Cloud Marketplace में जाकर चालू करें. ऐसा करने के लिए, इस वीडियो या दस्तावेज़ में बताया गया तरीका अपनाएं.
- Cloud Console के क्रेडेंशियल पेज पर जाकर, एक एपीआई पासकोड जनरेट करें. ऐसा करने के लिए, इस वीडियो या दस्तावेज़ में बताया गया तरीका अपनाएं. Google Maps Platform का इस्तेमाल करने के लिए, एपीआई पासकोड ज़रूरी है.
3. सिंपल ग्लोब
ऐप्लिकेशन बनाने के लिए, बुनियादी सेटअप करना ज़रूरी है. इससे, पृथ्वी का "ब्लू मार्बल" व्यू सबसे सही तरीके से दिखेगा, जैसा कि इमेज में दिखाया गया है:
स्टार्टर पेज का कोड जोड़ना
साइट में ग्लोब जोड़ने के लिए, आपको अपने पेज पर यह कोड जोड़ना होगा. इससे Maps JavaScript API के लिए लोडर और एक init फ़ंक्शन जोड़ दिया जाएगा. यह फ़ंक्शन, पेज में मैप 3D एलिमेंट बनाता है. इस एलिमेंट में, आपको मार्कर का कोड जोड़ना होगा.
पक्का करें कि आपने पेज पर अपनी कुंजी जोड़ी हो. यह कुंजी, सेट अप करने के लिए सेक्शन में बनाई जाती है. ऐसा न करने पर, 3D एलिमेंट को शुरू नहीं किया जा सकेगा.
<!DOCTYPE html>
<html>
<head>
<title>Step 1 - Simple Globe</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.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: "<INSERT 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>
let map3D = null;
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
map3D = new Map3DElement({
mode: MapMode.HYBRID,
});
document.body.append(map3D);
}
init();
</script>
</body>
</html>
ऐसा करने के बाद, आपको अपनी पसंद की जगह को फ़्रेम करना शुरू करना होगा. यह काम अगले चरण में किया जाएगा.
4. फ़्रेम का पहला व्यू
ग्लोब व्यू वाला मैप बनाने के बाद, आपको शुरुआती जगह को फ़्रेम करना होगा. इससे आपके उपयोगकर्ता को यह तुरंत पता चल जाता है कि वह कहां काम कर रहा है.
इस उदाहरण में, यूरोप में मौजूद Google के ऑफ़िस पर फ़ोकस किया गया है. हालांकि, इस तरीके को दुनिया भर में किसी भी जगह पर लागू किया जा सकता है. जैसे, किसी पूरे देश से लेकर किसी शहर के ब्लॉक तक. इस प्रॉडक्ट की तेज़ी और सुविधाओं की मदद से, कोड में कम से कम बदलाव करके अपने ऐप्लिकेशन को ग्लोबल से लोकल पर स्केल किया जा सकता है.
3D मैप को इस तरह देखने के लिए, आपको शुरुआती फ़्रेमिंग से शुरू करना होगा:
कैमरे को यूरोप पर फ़्रेम करें
डिसप्ले को दिखाए गए तरीके से देखने के लिए, आपको डिसप्ले को सही तरीके से फ़्रेम करना होगा. ऐसा करके, आपको ऐसा लगेगा कि आपने अंतरिक्ष में कैमरा लगाकर, नीचे की ओर देख रहे हैं.
इसके लिए, मैप कंट्रोल पर मौजूद कई पैरामीटर का इस्तेमाल करके, कैमरे की जानकारी सेट की जा सकती है. डायग्राम में देखा जा सकता है कि पैरामीटर, "असल" दुनिया में कैसे इंटरैक्ट करते हैं. खास तौर पर, सेंटर पॉइंट वह होता है जिस पर कैमरा फ़ोकस कर रहा होता है. साथ ही, आपके फ़ोकस करने की जगह से उसकी दूरी (रेंज) भी होती है. आपको कैमरे के पर्सपेक्टिव का टिल्ट भी सेट करना होगा. ऐसा न करने पर, आपको सीधे नीचे की ओर Earth दिखेगा.
आखिरी सेटिंग, हेडिंग, कैमरे की दिशा तय करती है. इसे उत्तर दिशा से ऑफ़सेट के तौर पर मेज़र किया जाता है. शुरुआती डिसप्ले सेट अप करने के लिए, ये वैल्यू 3D मैप एलिमेंट पर ऑब्जेक्ट के तौर पर लागू की जाती हैं. अपडेट किए गए 3D एलिमेंट कन्स्ट्रक्टर के साथ कोड में यह देखा जा सकता है.
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.HYBRID
});
कैमरे के पैरामीटर कैप्चर करना
3D मैप में किसी व्यू को फ़्रेम करने के लिए, कैमरे को सटीक जगह पर रखना ज़रूरी है. इसे सिर्फ़ कोड की मदद से हासिल करना मुश्किल हो सकता है. इस प्रोसेस को आसान बनाने के लिए, इस मददगार हैक का इस्तेमाल करें: अपने पेज पर एक फ़ंक्शन जोड़ें, जो ज़रूरी व्यू पर क्लिक करने पर कैमरे के पैरामीटर कैप्चर करता हो. पैरामीटर, कंसोल पर आउटपुट हो जाएंगे. इसके बाद, उन्हें आपके ऑब्जेक्ट की कैमरा सेटिंग में कॉपी किया जा सकेगा.
आपको वह कोड मिल सकता है जिसका इस्तेमाल बाद में किया जा सकता है. इसे दिखाए गए इस पेज के सैंपल में जोड़ा गया है. हालांकि, यह अगले पेजों के सैंपल में नहीं होगा, क्योंकि कोडलैब के लिए इसकी ज़रूरत नहीं है. हालांकि, अगर आपको बेहतर कैमरा पोज़िशनिंग की मदद से ज़्यादा इमर्सिव डेमो बनाने हैं, तो इसे याद रखें.
map3D.addEventListener('gmp-click', (event) => {
console.log("camera: { center: { lat: " + map3D.center.lat + ", lng : " + map3D.center.lng + ", altitude: " + map3D.center.altitude + " }, range: " + map3D.range + ", tilt: " + map3D.tilt + " ,heading: " + map3D.heading + ", }");
console.log("{ lat: " + event.position.lat + ", lng : " + event.position.lng + ", altitude: " + event.position.altitude + " }");
// Stop the camera animation when the map is clicked.
map3D.stopCameraAnimation();
});
stopCameraAnimation फ़ंक्शन के इस्तेमाल पर ध्यान दें. अगर पेज ज़ूम इन या ऑर्बिटिंग कर रहा है, तो ऐनिमेशन को रोकना फ़ायदेमंद होता है, ताकि उस समय डिसप्ले में जगह को कैप्चर किया जा सके. इस कोड की मदद से, ऐसा किया जा सकता है. ज़्यादा जानकारी के लिए, stopCameraAnimation के दस्तावेज़ देखें.
क्लिक से मिलने वाले आउटपुट का उदाहरण, जैसा कि कंसोल में दिखाया गया है.
camera: { center: { lat: 51.39870122020001, lng : -0.08573187165829443, altitude: 51.66845062662254 }, range: 716.4743880553578, tilt: 50.5766672986501 ,heading: -1.048260134782318, }
step2.html:40 { lat: 51.398158351120536, lng : -0.08561139388593597, altitude: 51.860469133677626 }
कैमरे के टेक्स्ट का इस्तेमाल, 3D Maps में अलग-अलग ऑब्जेक्ट में JSON इनपुट के तौर पर किया जा सकता है. दूसरा आउटपुट, क्लिक किए गए पॉइंट की असल जगह की जानकारी होती है. यह पॉइंट बनाने या मार्कर की पोज़िशनिंग के लिए भी काम की होती है.
पेज को सही तरीके से फ़्रेम करने के बाद, मार्कर जोड़े जा सकते हैं. इसके बारे में जानने के लिए, अगले चरण पर जाएं.
सेक्शन का समाधान
इस चरण के लिए, लागू किए गए पेज को समाधान के तौर पर दिखाया जाता है, ताकि आपके लागू करने की पुष्टि की जा सके. (अगर कॉपी किया जा रहा है, तो पक्का करें कि आपने अपनी एपीआई पासकोड का इस्तेमाल किया हो).
<!DOCTYPE html>
<html>
<head>
<title>Step 2 - Europe View</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.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: "<INSERT 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>
let map3D = null;
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.HYBRID,
});
map3D.addEventListener('gmp-click', (event) => {
console.log("camera: { center: { lat: " + map3D.center.lat + ", lng : " + map3D.center.lng + ", altitude: " + map3D.center.altitude + " }, range: " + map3D.range + ", tilt: " + map3D.tilt + " ,heading: " + map3D.heading + ", }");
console.log("{ lat: " + event.position.lat + ", lng : " + event.position.lng + ", altitude: " + event.position.altitude + " }");
map3D.stopCameraAnimation();
});
document.body.append(map3D);
}
init();
</script>
</body>
</html>
5. सिंपल मार्कर
इस सेक्शन में, आपको अपना पहला मार्कर जोड़ने का तरीका पता चलेगा. सबसे पहले, आपको मार्कर के बारे में सामान्य जानकारी मिलेगी.
3D मैप में दो अलग-अलग मार्कर क्लास बनाई जा सकती हैं: Marker3DElement क्लास और Marker3DInteractiveElement क्लास. इनमें से किसी एक को चुनने का फ़ैसला इस बात पर निर्भर करता है कि आपको मार्कर पर क्लिक करने की सुविधा चालू करनी है या नहीं. इसके अलावा, ये दोनों एलिमेंट एक जैसे ही होते हैं. इसलिए, आपको पहले Marker3DElement बनाना होगा और फिर आने वाले चरणों में इसे Marker3DInteractiveElement में "अपग्रेड" करना होगा.
इस चरण के लिए पूरा समाधान यहां देखा जा सकता है:
अपने मार्कर को थोड़ा बड़ा करना
सबसे पहले यह जानना ज़रूरी है कि 3D मैप में मौजूद बाकी चीज़ों की तरह मार्कर भी 3D होते हैं. इसका मतलब है कि जगह की ऊंचाई (ऊंचाई) हो सकती है और उस ऊंचाई को समुद्र तल, जमीन, मेश के हिसाब से पोज़िशन के तौर पर दिखाया जा सकता है या जमीन पर क्लैंप करने के लिए सेट किया जा सकता है और ऊंचाई की जगह को अनदेखा किया जा सकता है. AltitudeMode के दस्तावेज़ में, ऊंचाई के कॉन्स्टेंट सेक्शन में ज़्यादा जानकारी देखी जा सकती है.
extruded वैल्यू का इस्तेमाल करके, यह भी सेट किया जा सकता है कि मार्कर एक्सट्रूज़ किया गया है या नहीं. इससे यह तय होगा कि मार्कर के नीचे जमीन तक एक छोटी लाइन खींची जाएगी या नहीं. इससे, ऊंचाई के हिसाब से मार्कर की असल पोज़िशन को दिखाने में मदद मिलेगी. यह लाइन, जमीन पर पॉइंट चुनने के लिए काम की होती है. इसका एक उदाहरण, Google की यूनाइटेड किंगडम की जगह की जानकारी से देखा जा सकता है. दोनों को एक्सट्रूज़न किया गया है और उनकी पोज़िशन को पूरी ऊंचाई पर सेट किया गया है. पहला 75 मीटर और दूसरा 125 मीटर पर है.
|
|
ऊंचाई 75 मीटर. | ऊंचाई 125 मीटर. |
ऑक्लूज़न और कॉलिज़न वाले मार्कर छिपाना या दिखाना
हो सकता है कि हमारे डेमो में यह ज़रूरी न हो, क्योंकि मार्कर की पोज़िशन काफ़ी अलग-अलग हैं. हालांकि, उन मार्कर के लिए जिनकी पोज़िशन एक-दूसरे से ओवरलैप हो सकती है या जो इमारतों के पीछे हो सकते हैं, collisionBehavior या drawsWhenOccluded वैल्यू की मदद से यह कंट्रोल किया जा सकता है कि उनके साथ क्या होगा.
टक्कर के व्यवहार के लिए, आपके पास ये विकल्प हैं:
REQUIRED: (डिफ़ॉल्ट) चाहे कोई भी ऑब्जेक्ट आपके मॉडल से टकराए, मार्कर हमेशा दिखे.OPTIONAL_AND_HIDES_LOWER_PRIORITYमार्कर को सिर्फ़ तब दिखाएं, जब वह दूसरे मार्कर से ओवरलैप न हो. अगर इस तरह के दो मार्कर ओवरलैप होते हैं, तो ज़्यादाzIndexवाला मार्कर दिखाया जाता है. अगर दोनों काzIndexएक ही है, तो स्क्रीन पर सबसे नीचे मौजूद वर्टिकल पोज़िशन वाला स्क्रीनशॉट दिखाया जाता है.REQUIRED_AND_HIDES_OPTIONALमार्कर को हमेशा दिखाएं, भले ही उस पर कोई अन्य मार्कर ओवरलैप हो. साथ ही, ऐसे सभीOPTIONAL_AND_HIDES_LOWER_PRIORITYमार्कर या लेबल छिपाएं जो मार्कर के साथ ओवरलैप होंगे.
इमेज में दिखाया गया है कि टक्कर के व्यवहार के आधार पर, मार्कर को कैसे दिखाया जा रहा है. REQUIRED सेट करते समय सभी मार्कर दिखते हैं. हालांकि, REQUIRED_AND_HIDES_OPTIONAL का इस्तेमाल करने पर, स्क्रीन पर सबसे नीचे मौजूद मार्कर दिखेंगे. अगर आप चाहें, तो zIndex की मदद से अन्य मार्कर को सबसे ऊपर दिखाया जा सकता है.
|
|
ज़रूरी है | REQUIRED_AND_HIDES_OPTIONAL |
ओक्लूज़न के लिए, यह चुना जा सकता है कि मार्कर, बिल्डिंग के पीछे खींचे जाएं या नहीं. यह नीचे दी गई इमेज में दिखाया गया है. drawsWhenOccluded को 'सही है' पर सेट करने पर, इमारतों के पीछे मार्कर थोड़े धुंधले दिखते हैं. इसे 'गलत है' पर सेट करने पर, इमारतों के पीछे मार्कर नहीं दिखते. ज़्यादा जानकारी के लिए, नीचे दी गई टेबल देखें:
|
|
|
|
जैसा कि बताया गया है, अगर ओकुलेड मार्कर को ड्रॉ करने की अनुमति है, तो ओवरलैप होने की वजह से छिपे हुए मार्कर धुंधले दिखेंगे. इमेज में, कुछ मार्कर इमारतों से छिपे हुए हैं और कुछ अन्य मार्कर से छिपे हुए हैं.
ज़्यादा जानकारी के लिए, 2D मैप में collision-behavior के उदाहरण देखें.
कैनवस से ड्रॉइंग मिटाना
अब अपना पहला मार्कर बनाने का समय आ गया है. उपयोगकर्ता के मार्कर पर फ़ोकस करने के लिए, 3D मैप में डिफ़ॉल्ट लेबल बंद किए जा सकते हैं.
3D मैप एलिमेंट की mode वैल्यू को SATELLITE पर सेट करें.
ज़्यादा जानकारी के लिए, मोड देखें.
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.SATELLITE
});
इससे यह 3D मैप बनता है:
पहला मार्कर जोड़ना
साफ़ कैनवस पर, अब पहला मार्कर जोड़ा जा सकता है. मुख्य पैरामीटर में पोज़िशन और लेबल शामिल हैं.
मार्कर जोड़ने के लिए, मार्कर की पोज़िशन सेट करें. मार्कर के ऊपर दिखने वाला लेबल और अन्य एलिमेंट भी शामिल किए जा सकते हैं. इनके बारे में Marker3DElement दस्तावेज़ में बताया गया है.
हमारा मार्कर जोड़ने के लिए, आपको उस लाइन के बाद यह कोड जोड़ना होगा जो डिफ़ॉल्ट लेबल को छिपाती है, जैसा कि दिखाया गया है:
const marker = new Marker3DElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
map3D.append(marker);
मार्कर बनाने के बाद, उसे जोड़ने के तरीके का इस्तेमाल करके 3D मैप में जोड़ें. याद रखें कि मार्कर, 3D मैप में चाइल्ड एलिमेंट के कलेक्शन के तौर पर सेव किए जाते हैं. किसी मार्कर में बदलाव करने के लिए, आपको उसे इस कलेक्शन से ऐक्सेस करना होगा.
एपीआई लोड करते समय, Marker3DElement को लाइब्रेरी की सूची में जोड़कर पक्का करें कि वह Maps JavaScript API से लोड हो.
const { Map3DElement, MapMode, Marker3DElement } = await google.maps.importLibrary("maps3d");
अब पेज लोड होने पर, आपको पूरा यूरोप दिखेगा. साथ ही, लंदन ऑफ़िस के ऊपर एक मार्कर दिखेगा. ऐनिमेशन में दिखाए गए तरीके से, मैन्युअल तौर पर ज़ूम इन करके, बनाई गई जगह पर मार्कर देखा जा सकता है.
पहला मार्कर लोड करने के बाद, अगला चरण यह है कि उसे बेहतर बनाया जाए.
सेक्शन का समाधान
इस चरण के लिए, लागू किए गए पेज को समाधान के तौर पर दिखाया जाता है, ताकि आपके लागू करने की पुष्टि की जा सके. (अगर कॉपी किया जा रहा है, तो पक्का करें कि आपने अपनी एपीआई पासकोड का इस्तेमाल किया हो).
<!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.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: "<INSERT 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>
let map3D = null;
async function init() {
const { Map3DElement, MapMode, Marker3DElement } = await google.maps.importLibrary("maps3d");
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.SATELLITE,
});
const marker = new Marker3DElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
map3D.append(marker);
document.body.append(map3D);
}
init();
</script>
</body>
</html>
6. SVG मार्कर
इस चरण में, मार्कर को बदलकर उसे बेहतर बनाया जाएगा. साथ ही, मार्कर में फ़्लैग जोड़कर, उस देश के बारे में जानकारी दी जाएगी जहां वह मौजूद है. आइए, देखते हैं कि यह कैसे किया जाता है. इसके लिए, आपको PinElement के बारे में जानना होगा.
आखिर में, आपको ऐसा नया लुक दिखेगा:
PinElement की मदद से, पिन को पसंद के मुताबिक बनाना
JavaScript API में मार्कर के बीच शेयर किए जाने वाले एलिमेंट में से एक, PinElement है. भले ही, वे 2D या 3D मैप हों. Map3DElement में Marker3DElement जोड़ते समय , उस एलिमेंट के चाइल्ड के तौर पर Marker3DElement में PinElement जोड़ा जाता है.
PinElement में, सामान्य मार्कर में बदलाव करने की सुविधा होती है. इससे, मार्कर के बॉर्डर का रंग, अंदरूनी पॉइंट (या ग्लिफ़) का रंग, और बैकग्राउंड का रंग सेट किया जा सकता है. इन्हें 2D मार्कर दिखाने वाली इमेज में देखा जा सकता है.
एलिमेंट के ज़रिए मार्कर का साइज़ भी सेट किया जा सकता है. इसके लिए, एलिमेंट की स्केल वैल्यू सेट करें. >1 का मतलब है कि मार्कर सामान्य से बड़ा है और <1 का मतलब है कि मार्कर सामान्य से छोटा है.
अगर आपको ग्लिफ़ को ज़्यादा कस्टमाइज़ करना है, लेकिन PinElement के स्टैंडर्ड मैप पिन लुक को बनाए रखना है, तो ग्लिफ़ को इमेज या svg फ़ाइल से भी बदला जा सकता है.
PinElements के अलावा
इस चरण में, आपको स्टैंडर्ड PinElement को एसवीजी फ़्लैग और अलग-अलग रंगों के साथ अपडेट करना होगा. हालांकि, यह भी ध्यान रखें कि मार्कर के लुक को पूरी तरह से बदला जा सकता है, ताकि वह मैप पिन जैसा न दिखे. मार्कर में, टेंप्लेट का इस्तेमाल करके नए ग्राफ़िक भी जोड़े जा सकते हैं. जैसे, HTMLImageElement और SVGElement. Marker3DElement-Slots दस्तावेज़ में, इस बारे में ज़्यादा जानकारी मिल सकती है.
मार्कर को स्टाइल करने के अलग-अलग तरीके जानने के लिए, यहां दिए गए सैंपल देखें.
|
|
PinElement की मदद से, बुनियादी तरीके से बनाए गए मार्कर. सैंपल देखें. | टेंप्लेट की मदद से, SVG और इमेज के ज़रिए मार्कर को पसंद के मुताबिक बनाने की सुविधा. सैंपल देखें. |
PinElement जोड़ें
मार्कर का लुक बदलने के लिए, सबसे पहले यह पक्का करना होगा कि PinElement लाइब्रेरी को पेज में जोड़ दिया गया हो. ऐसा करने के लिए, maps3d लाइब्रेरी इंपोर्ट करने के बाद, कोड की यह लाइन जोड़ें:
const { Map3DElement, MapMode, Marker3DElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
अब एलिमेंट लोड हो गया है, इसलिए PinElement का रेफ़रंस दिया जा सकता है और उसे बनाया जा सकता है. कोड देखें और मार्कर बनाने की जगह के बीच में उसे जोड़ें. इसके बाद, मार्कर को 3D मैप में जोड़ें.
const marker = new Marker3DElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const markerPin = new PinElement({
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
});
marker.append(markerPin);
map3D.append(marker);
आपने सिर्फ़ एक बुनियादी पिन लोड नहीं किया है. इसलिए, PinElement को सेट अप करने के साथ-साथ, उसके बैकग्राउंड के रंग और स्केल को सेट अप करने जैसी कई चीज़ें करनी होंगी.
सबसे पहले, फ़्लैग आइकॉन के लिए एसवीजी इमेज का रेफ़रंस देना होगा. इस मामले में, यूनियन जैक. इन्हें https://flagicons.lipis.dev/ जैसे कलेक्शन से पाया जा सकता है.
आइकॉन बनाने के बाद, उसे ऐसी जगह पर रखा जा सकता है जहां साइट उसे ढूंढ सके. इस मामले में, इमेज की जगह को हार्ड कोड किया जा सकता है या डायरेक्ट्री के स्टब के तौर पर साइट की मौजूदा जगह का इस्तेमाल किया जा सकता है, जैसा कि यहां बेस वैरिएबल के साथ दिखाया गया है. इसके बाद, इसे सर्वर पर मौजूद सही फ़्लैग की जगह से लिंक किया जा सकता है. यहां यह '/images/gb.svg' में मौजूद है.
इससे PinElement बनता है, जो इस तरह दिखता है:
फ़्लैग और कोड को सही जगह पर डालने के बाद, आपको ऐसा 3D मैप दिखेगा:
अब हमारा मार्कर पूरी तरह से तैयार है. इसे क्लिक करने लायक भी बनाया जा सकता है, ताकि इंटरैक्टिविटी जोड़ी जा सके. यह अगले चरण में किया जाएगा.
सेक्शन का समाधान
इस चरण के लिए, लागू किए गए पेज को समाधान के तौर पर दिखाया जाता है, ताकि आपके लागू करने की पुष्टि की जा सके. (अगर कॉपी किया जा रहा है, तो पक्का करें कि आपने अपनी एपीआई पासकोड का इस्तेमाल किया हो).
यह भी न भूलें कि आपको फ़्लैग की SVG (या अपनी पसंद की PNG फ़ाइल!) फ़ाइल डाउनलोड करनी होगी और उसे ऐसी डायरेक्ट्री में सेव करना होगा जिसे आपके पेज से ऐक्सेस किया जा सके. यहां इसे इमेज फ़ोल्डर में सेव किया गया है.
<!DOCTYPE html>
<html>
<head>
<title>Step 4 - SVG 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.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: "<INSERT 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>
let map3D = null;
async function init() {
const { Map3DElement, MapMode, Marker3DElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.SATELLITE,
});
const marker = new Marker3DElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const markerPin = new PinElement({
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
});
marker.append(markerPin);
map3D.append(marker);
document.body.append(map3D);
}
init();
</script>
</body>
</html>
7. इंटरैक्टिव मार्कर
आखिरी चरण में, पेज पर एक मार्कर जोड़ा गया था. हालांकि, यह अच्छा दिखने के अलावा कुछ काम का नहीं है. आपको अब भी 3D मैप के साथ उसी तरह इंटरैक्ट करना होगा. अगला चरण, मार्कर पर क्लिक करने पर उससे कुछ करने की सुविधा जोड़ना है. इससे मार्कर, उपयोगकर्ता के इंटरैक्शन पर प्रतिक्रिया दे पाएगा.
इस सुविधा को जोड़ने के लिए, आपको Marker3DElement को Marker3DInteractiveElement में बदलना होगा. आखिर में, आपको एक जैसा दिखने वाला पेज दिखेगा. हालांकि, इसमें मार्कर पर क्लिक करने पर, अब एक सूचना पॉप-अप होगी. यह कुछ इस तरह दिखेगी:
सबसे पहले, मार्कर क्लास बदलें
किसी मार्कर में इंटरैक्टिविटी जोड़ने के लिए, आपको यह पक्का करना होगा कि वह सही क्लास का इस्तेमाल कर रहा हो. Marker3DInteractiveElement की ज़रूरत होती है. हालांकि, यह Marker3DElement का एक्सटेंशन है. इसलिए, आपको नई क्लास लोड करने और कन्स्ट्रक्टर पर क्लास का नाम बदलने के अलावा कुछ भी करने की ज़रूरत नहीं है.
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.SATELLITE,
});
const marker = new Marker3DInteractiveElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
दूसरा, मार्कर में क्लिक इवेंट जोड़ें
इसके बाद, उपयोगकर्ता के इंटरैक्शन को मैनेज करने और उस पर रिस्पॉन्स देने के लिए, मार्कर में क्लिक इवेंट जोड़ें. स्निपेट में, मार्कर में क्लिक इवेंट जोड़ा गया है. इस मामले में, एक सूचना ट्रिगर होती है और एक टेक्स्ट पॉप-अप होता है. यह टेक्स्ट, मार्कर से लेबल दिखाता है. यह लेबल, ट्रिगर किए गए इवेंट के टारगेट से मिलता है. इससे हमें लेबल प्रॉपर्टी को ऐक्सेस करने में मदद मिलती है. मार्कर बनने के तुरंत बाद, अपने ऐप्लिकेशन में यह कोड जोड़ें.
marker.addEventListener('gmp-click', (event) => {
alert('You clicked on : ' + event.target.label);
event.stopPropagation();
});
ध्यान दें कि stopPropagation इवेंट का इस्तेमाल यह पक्का करने के लिए किया जाता है कि स्टैक में मौजूद अन्य क्लिक लिसनर, 3D मैप के मुख्य कैनवस जैसे मौजूदा ऑब्जेक्ट पर ट्रिगर हों.
इसलिए, अब अपना ऐप्लिकेशन चलाने पर, आपको यह नतीजा दिखेगा:
मार्कर पर क्लिक करने पर कुछ करने की सुविधा की मदद से, अब अगले चरण में पेज पर कुछ ऐनिमेशन जोड़ा जा सकता है.
सेक्शन का समाधान
इस चरण के लिए, लागू किए गए पेज को समाधान के तौर पर दिखाया जाता है, ताकि आपके लागू करने की पुष्टि की जा सके. (अगर कॉपी किया जा रहा है, तो पक्का करें कि आपने अपनी एपीआई पासकोड का इस्तेमाल किया हो).
<!DOCTYPE html>
<html>
<head>
<title>Step 5 - Interactive 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.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: "<INSERT 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>
let map3D = null;
async function init() {
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.SATELLITE,
});
const marker = new Marker3DInteractiveElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
marker.addEventListener('gmp-click', (event) => {
alert('You clicked on : ' + event.target.label);
event.stopPropagation();
});
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const markerPin = new PinElement({
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
});
marker.append(markerPin);
map3D.append(marker);
document.body.append(map3D);
}
init();
</script>
</body>
</html>
8. सीधे इस पर जाएं
इस चरण में, मार्कर पर क्लिक करके जोड़े गए ऐनिमेशन की मदद से, उस जगह पर फ़्लाइट की जाएगी. इसे यहां देखें.
flyCameraTo का इस्तेमाल करके ऐनिमेशन बनाना
इसे पेज पर जोड़ने के लिए, आपको 3D Maps के flyCameraTo तरीके का इस्तेमाल करना होगा. इसमें कैमरा, आपकी मौजूदा जगह से उस जगह पर ऐनिमेशन के साथ जाता है जहां आपको जाना है. इसके लिए, दोनों जगहों के बीच इंटरपोलेशन किया जाता है और 3D मैप में फ़्लाइट को ऐनिमेशन के साथ दिखाया जाता है.
flyCameraTo का इस्तेमाल करते समय, आपको FlyToAnimationOptions की जानकारी देनी होगी. इसमें दो प्रॉपर्टी होती हैं: endCamera, जो वह जगह है जहां ऐनिमेशन के आखिर में कैमरे को ले जाना है और durationMillis, जो ट्रांज़िशन में लगने वाले समय को मिलीसेकंड में दिखाती है.
उदाहरण में, कैमरे को मार्कर की पोज़िशन वाली इमारत को देखने के लिए सेट करें. इसके लिए, कैमरे को 65 डिग्री तक झुकाएं, 500 मीटर की रेंज पर सेट करें, और 0 डिग्री की हेडिंग के साथ उत्तर की ओर पॉइंट करें. ऐनिमेशन की अवधि को 12,500 मिलीसेकंड (12.5 सेकंड) पर सेट करें.
पेज पर मौजूद मौजूदा सूचना इवेंट को flyCameraTo स्निपेट से बदलें:
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: {
center: marker.position,
tilt: 65,
range: 500,
heading: 0,
},
durationMillis: 12500,
});
event.stopPropagation();
});
बस, अब आपको पेज को रीफ़्रेश करना होगा और मार्कर पर क्लिक करके, Google UK पर जाना होगा. यह ऐनिमेशन में दिखाया गया है:
इस चरण में, आपने क्लिक किया जा सकने वाला एक मार्कर जोड़ा है. इस मार्कर पर क्लिक करने से, कैमरा उस जगह पर फ़्लाय करता है. अगले चरण में, आपको पॉइंट के चारों ओर कैमरे को फ़्लाय करने की सुविधा जोड़नी होगी, ताकि वह जगह की ऑर्बिट में घूम सके.
सेक्शन का समाधान
इस चरण के लिए, लागू किए गए पेज को समाधान के तौर पर दिखाया जाता है, ताकि आपके लागू करने की पुष्टि की जा सके. (अगर कॉपी किया जा रहा है, तो पक्का करें कि आपने अपनी एपीआई पासकोड का इस्तेमाल किया हो).
<!DOCTYPE html>
<html>
<head>
<title>Step 6 - Zoom To</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.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: "<INSERT 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>
let map3D = null;
async function init() {
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.SATELLITE,
});
const marker = new Marker3DInteractiveElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: {
center: marker.position,
tilt: 65,
range: 500,
heading: 0,
},
durationMillis: 12500,
});
event.stopPropagation();
});
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const markerPin = new PinElement({
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
});
marker.append(markerPin);
map3D.append(marker);
document.body.append(map3D);
}
init();
</script>
</body>
</html>
9. आस-पास उड़ना
हमारे ऐनिमेशन का आखिरी एलिमेंट, इमारत के चारों ओर ऑर्बिट को ऐनिमेट करने के लिए, flyCameraAround तरीके का इस्तेमाल करना है. आखिर में, आपको एक ऐनिमेशन दिखेगा, जो इमारत पर उड़कर उसके चारों ओर घूमेगा, जैसा कि ऐनिमेशन में दिखाया गया है. असल उदाहरण के लिए, यह शायद थोड़ा तेज़ है. हालांकि, यह कार्रवाई के काम करने का तरीका दिखाने के लिए मददगार है. इसमें ज़्यादा समय नहीं लगता. आपके पास समय में बदलाव करने का विकल्प होता है, ताकि आपको अपनी ज़रूरत के हिसाब से वैल्यू मिल सके.
चलिए, आस-पास घूमते हैं!
flyCameraAround का तरीका, flyCameraTo फ़ंक्शन से मिलता-जुलता है. यह इनपुट के तौर पर कई विकल्प लेता है. इन विकल्पों से यह कंट्रोल होता है कि कैमरे के पैरामीटर के तौर पर किस जगह की ऑर्बिट की जाए और ऑर्बिट में लगने वाला समय मिलीसेकंड में कितना हो. आखिर में, आपके पास यह तय करने का विकल्प भी होता है कि तय किए गए समय में कितने रोटेशन हो सकते हैं. FlyAroundAnimationOptions में जाकर, सभी विकल्प देखे जा सकते हैं
हालांकि, एक मिनट इंतज़ार करें!
इस ऐनिमेशन में, ऐनिमेशन को किसी जगह पर फ़्लाइट करते हुए और उसके आस-पास फ़्लाइट करते हुए देखा जा सकता है. ऐसा करने के लिए, 3D Maps gmp-animationend इवेंट का इस्तेमाल करें. इससे यह पक्का किया जा सकता है कि अगला ऐनिमेशन ट्रिगर करने से पहले, मौजूदा ऐनिमेशन पूरा हो गया है. यह ऐनिमेशन रुकने से पहले सिर्फ़ एक बार होना चाहिए.
कोड देखें और उसे पिछले सेक्शन में जोड़े गए कोड के बाद डालें.
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: {
center: marker.position,
tilt: 65,
range: 500,
heading: 0,
},
durationMillis: 5000,
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraAround({
camera: {
center: marker.position,
tilt: 65,
range: 500,
heading: 0,
},
durationMillis: 5000,
rounds: 1
});
}, { once: true });
event.stopPropagation();
});
gmp-animationend इवेंट को सुनने की सुविधा जोड़ने पर, flyCameraAround इवेंट को ट्रिगर किया जा सकता है. शुरू करने के पॉइंट को उसी पॉइंट पर सेट करना जिसका इस्तेमाल, फ़्लाइट टू मेथड के आखिरी कैमरे के लिए किया गया था, इसका मतलब है कि ट्रांज़िशन आसानी से होगा. इससे नई जगह पर जाने के दौरान, कैमरे की गति में कोई रुकावट नहीं आएगी. फिर से, durationMillis को ऐनिमेशन पूरा होने में लगने वाले समय को कंट्रोल करने के लिए सेट किया गया है. इस मामले में, rounds एक और विकल्प है और इसे 1 पर सेट किया गया है.
इसका मतलब है कि कैमरा उस पॉइंट के चारों ओर पांच सेकंड में एक बार घूमेगा. अपने हिसाब से इन वैल्यू को आज़माकर, अपने लिए सही वैल्यू ढूंढें.
इस बिंदु पर ऐनिमेशन खत्म हो जाएगा, लेकिन आपको इस कोड के साथ gmp-animationend इवेंट फिर से ट्रिगर नहीं करना है. ऐसा करने पर, ऑर्बिट अनलिमिटेड तरीके से चलती रहेगी. इससे बचने के लिए, एक बार की सेटिंग को सही के बराबर सेट करें. इसका मतलब है कि इवेंट पूरा होने के बाद, उसे हटा दिया जाएगा. इससे अनलिमिटेड लूप से बचा जा सकेगा.
इसे जोड़ने के बाद, आपको समाधान चलाने में मदद मिलेगी. साथ ही, ऐनिमेशन में दिखाए गए तरीके से, आखिर में मार्कर के चारों ओर ऐनिमेशन फ़्लाय करते हुए दिखेगा:
इस चरण में, आपने एक मार्कर जोड़ा है जिस पर क्लिक किया जा सकता है. इसके बाद, कैमरा मार्कर की जगह पर और उसके आस-पास घूमता है. अगले चरण में, ज़्यादा पॉइंट जोड़ने का समय आ गया है. साथ ही, हम पॉइंट के बीच स्विच कर पाएंगे.
सेक्शन का समाधान
इस चरण के लिए, लागू किए गए पेज को समाधान के तौर पर दिखाया जाता है, ताकि आपके लागू करने की पुष्टि की जा सके. (अगर कॉपी किया जा रहा है, तो पक्का करें कि आपने अपनी एपीआई पासकोड का इस्तेमाल किया हो).
<!DOCTYPE html>
<html>
<head>
<title>Step 7 - Zoom Around</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.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: "<INSERT 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>
let map3D = null;
const europeCamera = {
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
};
async function init() {
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
...europeCamera,
mode: MapMode.SATELLITE,
});
const marker = new Marker3DInteractiveElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: {
center: marker.position,
tilt: 65,
range: 500,
heading: 0,
},
durationMillis: 5000,
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraAround({
camera: {
center: marker.position,
tilt: 65,
range: 500,
heading: 0,
},
durationMillis: 5000,
rounds: 1
});
}, { once: true });
event.stopPropagation();
});
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const markerPin = new PinElement({
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
});
marker.append(markerPin);
map3D.append(marker);
document.body.append(map3D);
}
init();
</script>
</body>
</html>
10. पेरिस!
लंदन एक शानदार शहर है, लेकिन पेज पर यह अकेला सा दिख रहा है. इसलिए, चलिए पेरिस से शुरू करके कुछ नई जगहें जोड़ते हैं. ऐसा करने के लिए, जगह की सभी जानकारी को सेव करने के लिए ऐरे का इस्तेमाल किया जा सकता है. इसके बाद, मार्कर के डिसप्ले पैरामीटर और कैमरे की जगहों पर जाने और उनके आस-पास जाने की सुविधा को सेट करने वाले फ़ंक्शन और वैरिएबल के इनपुट के तौर पर इसका इस्तेमाल किया जा सकता है. उदाहरण के लिए, किसी इमारत का बेहतर कैमरा शॉट लेने के लिए, मार्कर पॉइंट की जगह से फ़्रेम अलग हो सकता है.
Location Array
किसी खास जगह की सभी जानकारी को हार्ड कोड में डालने की ज़रूरत नहीं है. जैसे, व्यू कैमरा, मार्कर पॉइंट, और डिसप्ले के विकल्प. इस डेटा को सेव करने के लिए, JSON ऑब्जेक्ट के छोटे कलेक्शन का इस्तेमाल किया जा सकता है. इसके बाद, मार्कर बनाने और ऐप्लिकेशन में इस्तेमाल करने पर, इसे लागू किया जा सकता है. इस उदाहरण को कोड स्निपेट में देखा जा सकता है. इसमें ऐरे को सेव करने के लिए, officeLocations नाम का वैरिएबल बनाया गया है.
init फ़ंक्शन से ठीक पहले, यह कोड जोड़ें. यह भी ध्यान रखें कि बेस वैरिएबल को init फ़ंक्शन से बाहर ले जाया गया है, ताकि इसे ऑफ़िस की सभी जगहों पर लागू किया जा सके.
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const europeCamera = {
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
};
const officeLocations = [
{
"name": "Google France",
"camera": {
"center": { lat: 48.877276, lng: 2.329978, altitude: 48 },
"range": 178,
"tilt": 57.48,
"heading": -17,
},
"point": { lat: 48.8775183, lng: 2.3299791, altitude: 60 },
"pin": {
"background": 'white',
"glyph": new URL(base + '/images/fr.svg'),
"scale": 1.0,
},
},
{
"name": "Google UK",
"camera": {
"center": { lat: 51.5332, lng: -0.1260, altitude: 38.8 },
"range": 500,
"tilt": 56.21672368296945,
"heading": -31.15763027564165,
},
"point": { lat: 51.5332, lng: -0.1260, altitude: 75 },
"pin": {
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
},
}]
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
हर ऑफ़िस की जगह की ये प्रॉपर्टी होती हैं:
- name : जगह का नाम.
- camera : यह शुरुआती व्यू होता है, जिसमें फ़्लाइट की जगह और आस-पास की जगहें देखी जा सकती हैं.
- point : मार्कर डालने की जगह.
- पिन : मार्कर पिन के रंग और ग्लिफ़ प्रॉपर्टी की जानकारी
अलग-अलग ऐंगल
यहां आपको दिख सकता है कि यूनाइटेड किंगडम के लिए, कैमरे का सेंटर और मार्कर पॉइंट एक ही है (ऊंचाई को छोड़कर), जबकि फ़्रांस के लिए कैमरा और पॉइंट अलग-अलग हैं. ऐसा इसलिए है, क्योंकि फ़्रांस की जगह के लिए, मार्कर को कैमरे के शुरुआती व्यू से अलग जगह पर होना चाहिए. इससे, पूरी इमारत को बेहतर तरीके से देखा जा सकता है. यह मार्कर पॉइंट का इस्तेमाल करने से बेहतर है.
यूरोप पर वापस जाएं
एक से ज़्यादा पॉइंट होने का एक फ़ंक्शन यह है कि इनके बीच स्विच करने की ज़रूरत होती है. चुनने के लिए, ड्रॉप-डाउन का इस्तेमाल किया जा सकता है. हालांकि, इस उदाहरण में कैमरा हर बार यूरोपियन व्यू पर वापस जाएगा, ताकि उपयोगकर्ता कोई दूसरी जगह चुन सके.
ऐसा करने के लिए, शुरुआती व्यू को किसी वैरिएबल में सेव करना होगा. इसका इस्तेमाल, कैमरे को यूरोप के पूरे व्यू पर रीसेट करने के लिए किया जा सकता है. इस उदाहरण में, europeCamera नाम का एक नया वैरिएबल जोड़ें, ताकि इसे बाद में इस्तेमाल किया जा सके.
init फ़ंक्शन को अपडेट करना
आपको सबसे पहले Map3DElement बनाते समय, europeCamera ऑब्जेक्ट को इनपुट के तौर पर इस्तेमाल करना होगा.
आपको दूसरा बदलाव यह करना होगा कि मार्कर बनाने वाले सेक्शन को लूप में लपेटें, ताकि उसे वैरिएबल में सेव किए गए पैरामीटर के साथ अपडेट किया जा सके. इन्हें दिखाए गए कोड में देखा जा सकता है:
- office.point : मार्कर की जगह.
- office.name : मार्कर के लेबल के लिए इस्तेमाल किया जाने वाला ऑफ़िस का नाम.
- office.camera : कैमरे की शुरुआती जगह.
- office.pin : डिसप्ले में अंतर के लिए PinElement के विकल्प
साथ ही, फ़्रेंच फ़्लैग के लिए SVG फ़ाइल या इमेज भी लेना न भूलें!
async function init() {
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
...europeCamera,
mode: MapMode.SATELLITE,
});
officeLocations.forEach(office => {
const marker = new Marker3DInteractiveElement({
position: office.point,
label: office.name,
altitudeMode: 'ABSOLUTE',
extruded: true,
});
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: office.camera,
durationMillis: 5000,
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraAround({
camera: office.camera,
durationMillis: 5000,
rounds: 1
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraTo({
endCamera: europeCamera,
durationMillis: 5000,
});
}, { once: true });
}, { once: true });
event.stopPropagation();
});
const markerPin = new PinElement(office.pin);
marker.append(markerPin);
map3D.append(marker);
});
document.body.append(map3D);
}
ध्यान दें कि flyCameraAround ऐनिमेशन के बाद, दूसरा gmp-animationend फ़ंक्शन जोड़ा गया है. इसका मकसद, स्टोर किए गए europeCamera वैरिएबल का इस्तेमाल करके, यूरोपियन व्यू पर वापस जाने की प्रोसेस को मैनेज करना है. ऐनिमेशन में दिखाए गए तरीके से:
इस चरण में, ऐप्लिकेशन को दो जगहों के साथ इस्तेमाल करने की सुविधा जोड़ी गई है. साथ ही, ऐनिमेशन और जगह की जानकारी वाले कलेक्शन का इस्तेमाल करके, एक जगह से दूसरी जगह जाने की सुविधा भी जोड़ी गई है. अगले चरण में, ऑफ़िस की बाकी जगहों को ऐरे में जोड़ दिया जाएगा.
सेक्शन का समाधान
इस चरण के लिए, लागू किए गए पेज को समाधान के तौर पर दिखाया जाता है, ताकि आपके लागू करने की पुष्टि की जा सके. (अगर कॉपी किया जा रहा है, तो पक्का करें कि आपने अपनी एपीआई पासकोड का इस्तेमाल किया हो).
यह भी न भूलें कि आपको फ़्लैग की एसवीजी (या अपनी पसंद की PNG फ़ाइलें) फ़ाइल डाउनलोड करनी होगी और उसे ऐसी डायरेक्ट्री में सेव करना होगा जिसे आपके पेज से ऐक्सेस किया जा सके. यहां इसे इमेज फ़ोल्डर में सेव किया गया है.
<!DOCTYPE html>
<html>
<head>
<title>Step 8 - Paris!</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.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: "<INSERT 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>
let map3D = null;
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const europeCamera = {
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
};
const officeLocations = [
{
"name": "Google France",
"camera": {
"center": { lat: 48.877276, lng: 2.329978, altitude: 48 },
"range": 178,
"tilt": 57.48,
"heading": -17,
},
"point": { lat: 48.8775183, lng: 2.3299791, altitude: 60 },
"pin": {
"background": 'white',
"glyph": new URL(base + '/images/fr.svg'),
"scale": 1.0,
},
},
{
"name": "Google UK",
"camera": {
"center": { lat: 51.5332, lng: -0.1260, altitude: 38.8 },
"range": 500,
"tilt": 56.21672368296945,
"heading": -31.15763027564165,
},
"point": { lat: 51.5332, lng: -0.1260, altitude: 75 },
"pin": {
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
},
}]
async function init() {
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
...europeCamera,
mode: MapMode.SATELLITE,
});
officeLocations.forEach(office => {
const marker = new Marker3DInteractiveElement({
position: office.point,
label: office.name,
altitudeMode: 'ABSOLUTE',
extruded: true,
});
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: office.camera,
durationMillis: 5000,
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraAround({
camera: office.camera,
durationMillis: 5000,
rounds: 1
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraTo({
endCamera: europeCamera,
durationMillis: 5000,
});
}, { once: true });
}, { once: true });
event.stopPropagation();
});
const markerPin = new PinElement(office.pin);
marker.append(markerPin);
map3D.append(marker);
});
document.body.append(map3D);
}
init();
</script>
</body>
</html>
11. इसी तरह की ज़्यादा जगहें
ऐप्लिकेशन में अब सभी ज़रूरी सुविधाएं मौजूद हैं. हालांकि, 3D मैप अब भी थोड़ा खाली दिखता है. इसलिए, इसे थोड़ा बेहतर बनाने के लिए, आपको कुछ और जगहें जोड़नी होंगी. ऐरे का इस्तेमाल करके, नई जगहों की जानकारी को अपने यूनीक मार्कर के साथ आसानी से जोड़ा जा सकता है. आखिरी चरण में, तब तक मार्कर जोड़ते रहें, जब तक कि आपको यह व्यू न दिख जाए.
ज़्यादा मार्कर जोड़ना.
यूरोप के कई देशों में, Google के कई ऑफ़िस हैं. इसलिए, हम मैप में उनमें से कुछ को जोड़ते हैं. इसके लिए, ऐरे को अपडेट करना ही ज़रूरी है. इसे किसी वेब सेवा से सोर्स किया जा सकता है या किसी स्टैटिक फ़ाइल से दिखाया जा सकता है. हमारे मामले में, इसे आसानी से इस्तेमाल करने के लिए एक ही पेज पर रखा जाएगा.
आपके पास जितने चाहें उतने मार्कर जोड़ने का विकल्प होता है. ये मार्कर, पेज से अपने-आप चुनकर व्यू में जुड़ जाते हैं. सही फ़्लैग ढूंढना न भूलें और उन्हें इमेज डायरेक्ट्री या किसी भी सुविधाजनक जगह पर सेव करें.
const officeLocations = [
{
name: "Google France",
camera: {
center: { lat: 48.877276, lng: 2.329978, altitude: 48 },
range: 178,
tilt: 57.48,
heading: -17,
},
point: { lat: 48.8775183, lng: 2.3299791, altitude: 60 },
pin: {
background: 'white',
glyph: new URL(base + '/images/fr.svg'),
scale: 1.0,
},
},
{
name: "Google UK",
camera: {
center: { lat: 51.5332, lng: -0.1260, altitude: 38.8 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 51.5332, lng: -0.1260, altitude: 75 },
pin: {
background: 'white',
glyph: new URL(base + '/images/gb.svg'),
scale: 1.0,
},
},
{
name: "Google Belgium",
camera: {
center: { lat: 50.83930408436509, lng: 4.38052394507952, altitude: 64.38932203802196},
range: 466.62899893119175,
tilt: 43.61569474716178,
heading: 51.805907046332074,
},
point: { lat: 50.8392653, lng: 4.3808751, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/be.svg'),
scale: 1.0,
},
},
{
name: "Google Czechia",
camera: {
center: {
lat: 50.07004093853976,
lng: 14.402871475443956,
altitude: 223.39574818495532
},
range: 522.0365799222782,
tilt: 62.39511972890614,
heading: -39.150149539328304,
},
point: { lat: 50.0703122, lng: 14.402668199999999, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/cz.svg'),
scale: 1.0,
},
},
{
name: "Google Denmark",
details: "2, Sankt Petri Passage 5, 1165 København",
camera: {
center: {
lat: 55.680359539635866,
lng: 12.570460204526002,
altitude: 30.447654757346044
},
range: 334.8786935049066,
tilt: 55.38819319004654,
heading: 149.63867461295067,
},
point: { lat: 55.6804504, lng: 12.570279099999999, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/dk.svg'),
scale: 1.0,
},
},
,
{
name: "Google Greece",
camera: {
center: {
lat: 38.038634694028055,
lng: 23.802924946201266,
altitude: 196.45884670344995
},
range: 343.57226336076565,
tilt: 54.97375927639567,
heading: -33.26775344055724,
},
point: { lat: 38.038619, lng: 23.8031622, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/gr.svg'),
scale: 1.0,
},
},
{
name: "Google Germany",
camera: {
center: {
lat: 53.55397683312404,
lng: 9.986350507286808,
altitude: 44.83610870143956
},
range: 375.3474077822466,
tilt: 71.35078443829818,
heading: -160.76930098951416,
},
point: { lat: 53.5540227, lng: 9.9863, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/de.svg'),
scale: 1.0,
},
},
{
name: "Google Ireland",
camera: {
center: { lat: 53.339816899999995, lng: -6.2362644, altitude: 38.777415761228006 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 53.339816899999995, lng: -6.2362644, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/ie.svg'),
scale: 1.0,
},
},
{
name: "Google Italy",
camera: {
center: {
lat: 45.486361346538224,
lng: 9.18995496294455,
altitude: 138.55834058400072
},
range: 694.9398023590038,
tilt: 57.822470255679114,
heading: 84.10194883488619,
},
point: { lat: 45.4863064, lng: 9.1894762, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/it.svg'),
scale: 1.0,
},
},
{
name: "Google Lithuania",
camera: {
center: {
lat: 54.698040606567965,
lng: 25.30965338542576,
altitude: 111.80276944294413
},
range: 412.5808304977545,
tilt: 43.50793332082195,
heading: -29.181098269421028,
},
point: { lat: 54.6981204, lng: 25.3098617, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/at.svg'),
scale: 1.0,
},
},
{
name: "Google Netherlands",
camera: {
center: {
lat: 52.33773837150874,
lng: 4.871754560171063,
altitude: 53.68063996154723
},
range: 473.1982259177312,
tilt: 56.216523350388634,
heading: 71.78252318033718,
},
point: { lat: 52.337801, lng: 4.872065999999999, altitude: 100 },
pin: {
background: 'white',
glyph: new URL(base + '/images/nl.svg'),
scale: 1.0,
},
},
{
name: "Google Norway",
camera: {
center: { lat: 59.90991209999999, lng: 10.726020799999999, altitude: 38.777415761228006 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 59.90991209999999, lng: 10.726020799999999, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/no.svg'),
scale: 1.0,
},
},
{
name: "Google Poland",
camera: {
center: { lat: 52.22844380000001, lng: 20.9851819, altitude: 38.777415761228006 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 52.22844380000001, lng: 20.9851819, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/pl.svg'),
scale: 1.0,
},
},
{
name: "Google Portugal",
camera: {
center: {
lat: 38.7240122810727,
lng: -9.150628263172639,
altitude: 55.299662291551044
},
range: 337.7474313328639,
tilt: 56.79772652682846,
heading: 176.0722118222208,
},
point: { lat: 38.723915999999996, lng: -9.150629, altitude: 35 },
pin: {
background: 'white',
glyph: new URL(base + '/images/pt.svg'),
scale: 1.0,
},
},
{
name: "Google Romania",
camera: {
center: {
lat: 44.43076650172983,
lng: 26.109700164718586,
altitude: 125.57895810814505
},
range: 364.25249956711923,
tilt: 38.517539223834326,
heading: -38.81294924429363,
},
point: { lat: 44.4309897, lng: 26.1095719, altitude: 75 },
pin: {
background: 'white',
glyph: new URL(base + '/images/ro.svg'),
scale: 1.0,
},
},
{
name: "Google Spain",
camera: {
center: {
lat: 40.450078762608875,
lng: -3.6930085080020856,
altitude: 753.6446342341894
},
range: 845.7279793010093,
tilt: 46.752510050599746,
heading: 4.718779524265234,
},
point: { lat: 40.450294199999995, lng: -3.6927915, altitude: 175 },
pin: {
background: 'white',
glyph: new URL(base + '/images/es.svg'),
scale: 1.0,
},
},
{
name: "Google Sweden",
camera: {
center: {
lat: 59.33313751316038,
lng: 18.054618219238293,
altitude: 16.728213706832868
},
range: 377.5210725830039,
tilt: 63.59478230626709,
heading: 98.53138488367703,
},
point: { lat: 59.3332093, lng: 18.0536386, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/se.svg'),
scale: 1.0,
},
},
{
name: "Google Switzerland",
camera: {
center: {
lat: 47.365411056285275,
lng: 8.525063594405356,
altitude: 419.2348376754488
},
range: 166.74918737631742,
tilt: 59.31431457129067,
heading: -32.620415961949206,
},
point: { lat: 47.365452, lng: 8.5249253, altitude: 100 },
pin: {
background: 'white',
glyph: new URL(base + '/images/ch.svg'),
scale: 1.0,
},
}
]
ऐसा करने के बाद, आपको इमेज में दिखाए गए पेज जैसा पेज दिखेगा. इस पेज पर, उपयोगकर्ता किसी भी जगह पर क्लिक करके, उस जगह पर जा सकता है और उसके आस-पास घूम सकता है. इसके बाद, वह वापस आ सकता है!
बधाई हो, आपने कोडलैब पूरा कर लिया है. अगले सेक्शन में हम इसे खत्म करेंगे और नई चीज़ें आज़माएंगे!
सेक्शन का समाधान
इस चरण के लिए, लागू किए गए पेज को समाधान के तौर पर दिखाया जाता है, ताकि आपके लागू करने की पुष्टि की जा सके. (अगर कॉपी किया जा रहा है, तो पक्का करें कि आपने अपनी एपीआई पासकोड का इस्तेमाल किया हो).
यह भी न भूलें कि आपको फ़्लैग की एसवीजी (या अपनी पसंद की PNG फ़ाइलें) फ़ाइल डाउनलोड करनी होगी और उसे ऐसी डायरेक्ट्री में सेव करना होगा जिसे आपके पेज से ऐक्सेस किया जा सके. यहां इसे इमेज फ़ोल्डर में सेव किया गया है.
<!DOCTYPE html>
<html>
<head>
<title>Step 9 - More Places!</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.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: "<INSERT 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>
let map3D = null;
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const europeCamera = {
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
};
const officeLocations = [
{
name: "Google France",
details: "8 Rue de Londres, 75009 Paris, France",
camera: {
center: { lat: 48.877276, lng: 2.329978, altitude: 48 },
range: 178,
tilt: 57.48,
heading: -17,
},
point: { lat: 48.8775183, lng: 2.3299791, altitude: 60 },
pin: {
background: 'white',
glyph: new URL(base + '/images/fr.svg'),
scale: 1.0,
},
},
{
name: "Google UK",
details: "6 Pancras Square, London N1C 4AG, UK",
camera: {
center: { lat: 51.5332, lng: -0.1260, altitude: 38.8 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 51.5332, lng: -0.1260, altitude: 75 },
pin: {
background: 'white',
glyph: new URL(base + '/images/gb.svg'),
scale: 1.0,
},
},
{
name: "Google Belgium",
details: "Chau. d'Etterbeek 180, 1040 Brussel",
camera: {
center: { lat: 50.83930408436509, lng: 4.38052394507952, altitude: 64.38932203802196},
range: 466.62899893119175,
tilt: 43.61569474716178,
heading: 51.805907046332074,
},
point: { lat: 50.8392653, lng: 4.3808751, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/be.svg'),
scale: 1.0,
},
},
{
name: "Google Czechia",
details: "Stroupežnického 3191/17, 150 00 Praha 5-Smíchov",
camera: {
center: {
lat: 50.07004093853976,
lng: 14.402871475443956,
altitude: 223.39574818495532
},
range: 522.0365799222782,
tilt: 62.39511972890614,
heading: -39.150149539328304,
},
point: { lat: 50.0703122, lng: 14.402668199999999, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/cz.svg'),
scale: 1.0,
},
},
{
name: "Google Denmark",
details: "2, Sankt Petri Passage 5, 1165 København",
camera: {
center: {
lat: 55.680359539635866,
lng: 12.570460204526002,
altitude: 30.447654757346044
},
range: 334.8786935049066,
tilt: 55.38819319004654,
heading: 149.63867461295067,
},
point: { lat: 55.6804504, lng: 12.570279099999999, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/dk.svg'),
scale: 1.0,
},
},
,
{
name: "Google Greece",
details: "Fragkokklisias 6, Athina 151 25",
camera: {
center: {
lat: 38.038634694028055,
lng: 23.802924946201266,
altitude: 196.45884670344995
},
range: 343.57226336076565,
tilt: 54.97375927639567,
heading: -33.26775344055724,
},
point: { lat: 38.038619, lng: 23.8031622, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/gr.svg'),
scale: 1.0,
},
},
{
name: "Google Germany",
details: "ABC-Straße 19, 20354 Hamburg",
camera: {
center: {
lat: 53.55397683312404,
lng: 9.986350507286808,
altitude: 44.83610870143956
},
range: 375.3474077822466,
tilt: 71.35078443829818,
heading: -160.76930098951416,
},
point: { lat: 53.5540227, lng: 9.9863, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/de.svg'),
scale: 1.0,
},
},
{
name: "Google Ireland",
details: "Gordon House, 4 Barrow St, Grand Canal Dock, Dublin 4, D04 V4X7",
camera: {
center: { lat: 53.339816899999995, lng: -6.2362644, altitude: 38.777415761228006 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 53.339816899999995, lng: -6.2362644, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/ie.svg'),
scale: 1.0,
},
},
{
name: "Google Italy",
details: "Isola Building C, Via Federico Confalonieri, 4, 20124 Milano",
camera: {
center: {
lat: 45.486361346538224,
lng: 9.18995496294455,
altitude: 138.55834058400072
},
range: 694.9398023590038,
tilt: 57.822470255679114,
heading: 84.10194883488619,
},
point: { lat: 45.4863064, lng: 9.1894762, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/it.svg'),
scale: 1.0,
},
},
{
name: "Google Lithuania",
details: "Vilnius Tech Park, Antakalnis st. 17, 2nd building, LT-10312, Vilnius",
camera: {
center: {
lat: 54.698040606567965,
lng: 25.30965338542576,
altitude: 111.80276944294413
},
range: 412.5808304977545,
tilt: 43.50793332082195,
heading: -29.181098269421028,
},
point: { lat: 54.6981204, lng: 25.3098617, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/at.svg'),
scale: 1.0,
},
},
{
name: "Google Netherlands",
details: "Claude Debussylaan 34, 1082 MD Amsterdam",
camera: {
center: {
lat: 52.33773837150874,
lng: 4.871754560171063,
altitude: 53.68063996154723
},
range: 473.1982259177312,
tilt: 56.216523350388634,
heading: 71.78252318033718,
},
point: { lat: 52.337801, lng: 4.872065999999999, altitude: 100 },
pin: {
background: 'white',
glyph: new URL(base + '/images/nl.svg'),
scale: 1.0,
},
},
{
name: "Google Norway",
details: "Bryggegata 6, 0250 Oslo",
camera: {
center: { lat: 59.90991209999999, lng: 10.726020799999999, altitude: 38.777415761228006 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 59.90991209999999, lng: 10.726020799999999, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/no.svg'),
scale: 1.0,
},
},
{
name: "Google Poland",
details: "Rondo Daszynskiego 2, 00-843 Warsaw",
camera: {
center: { lat: 52.22844380000001, lng: 20.9851819, altitude: 38.777415761228006 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 52.22844380000001, lng: 20.9851819, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/pl.svg'),
scale: 1.0,
},
},
{
name: "Google Portugal",
details: "R. Duque de Palmela 37 Piso 4, 1250-097 Lisboa",
camera: {
center: {
lat: 38.7240122810727,
lng: -9.150628263172639,
altitude: 55.299662291551044
},
range: 337.7474313328639,
tilt: 56.79772652682846,
heading: 176.0722118222208,
},
point: { lat: 38.723915999999996, lng: -9.150629, altitude: 35 },
pin: {
background: 'white',
glyph: new URL(base + '/images/pt.svg'),
scale: 1.0,
},
},
{
name: "Google Romania",
details: "Bulevardul Corneliu Coposu 6-8, București 030167",
camera: {
center: {
lat: 44.43076650172983,
lng: 26.109700164718586,
altitude: 125.57895810814505
},
range: 364.25249956711923,
tilt: 38.517539223834326,
heading: -38.81294924429363,
},
point: { lat: 44.4309897, lng: 26.1095719, altitude: 75 },
pin: {
background: 'white',
glyph: new URL(base + '/images/ro.svg'),
scale: 1.0,
},
},
{
name: "Google Spain",
details: "Torre Picasso, Pl. Pablo Ruiz Picasso, 1, Tetuán, 28020 Madrid",
camera: {
center: {
lat: 40.450078762608875,
lng: -3.6930085080020856,
altitude: 753.6446342341894
},
range: 845.7279793010093,
tilt: 46.752510050599746,
heading: 4.718779524265234,
},
point: { lat: 40.450294199999995, lng: -3.6927915, altitude: 175 },
pin: {
background: 'white',
glyph: new URL(base + '/images/es.svg'),
scale: 1.0,
},
},
{
name: "Google Sweden",
details: "Kungsbron 2, 111 22 Stockholm",
camera: {
center: {
lat: 59.33313751316038,
lng: 18.054618219238293,
altitude: 16.728213706832868
},
range: 377.5210725830039,
tilt: 63.59478230626709,
heading: 98.53138488367703,
},
point: { lat: 59.3332093, lng: 18.0536386, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/se.svg'),
scale: 1.0,
},
},
{
name: "Google Switzerland",
details: "Brandschenkestrasse 110, 8002 Zürich",
camera: {
center: {
lat: 47.365411056285275,
lng: 8.525063594405356,
altitude: 419.2348376754488
},
range: 166.74918737631742,
tilt: 59.31431457129067,
heading: -32.620415961949206,
},
point: { lat: 47.365452, lng: 8.5249253, altitude: 100 },
pin: {
background: 'white',
glyph: new URL(base + '/images/ch.svg'),
scale: 1.0,
},
}
]
async function init() {
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
...europeCamera,
mode: MapMode.SATELLITE,
});
officeLocations.forEach(office => {
const marker = new Marker3DInteractiveElement({
position: office.point,
label: office.name,
altitudeMode: 'RELATIVE_TO_GROUND',
extruded: true,
});
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: office.camera,
durationMillis: 2000,
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraAround({
camera: office.camera,
durationMillis: 2000,
rounds: 1
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraTo({
endCamera: europeCamera,
durationMillis: 2000,
});
}, { once: true });
}, { once: true });
event.stopPropagation();
});
const markerPin = new PinElement(office.pin);
marker.append(markerPin);
map3D.append(marker);
});
document.body.append(map3D);
}
init();
</script>
</body>
</html>
12. अगले चरण
इस कोडलैब में, Maps JavaScript API में 3D की सुविधा का इस्तेमाल करके क्या-क्या किया जा सकता है, इसकी बुनियादी जानकारी दी गई है. इसके बाद, मैप में इनमें से कुछ सुविधाएं जोड़कर देखें:
- ऑफ़िस चुनने के लिए, ड्रॉप-डाउन मेन्यू जोड़ें.
- मार्कर की स्टाइल के कुछ अन्य विकल्प इस्तेमाल करके, ज़्यादा फ़्लेयर दिखाएं!.
- Maps JavaScript API के लिए उपलब्ध अन्य लाइब्रेरी देखें. इनसे अन्य सुविधाएं चालू की जा सकती हैं. जैसे, Places की मदद से हर ऑफ़िस की रेटिंग दिखाने के लिए, उसके प्लेस आईडी का इस्तेमाल करना!
वेब पर Google Maps Platform और 3D के साथ काम करने के अन्य तरीकों के बारे में जानने के लिए, ये लिंक देखें: