1. शुरू करने से पहले
इस कोडलैब का मकसद, Maps JavaScript में फ़ोटोरिअलिस्टिक 3D मैप का इस्तेमाल करके, अपना पहला 3D मैप बनाने का तरीका समझना है. इस ट्यूटोरियल में, Maps JavaScript API के सही कॉम्पोनेंट लोड करने, अपना पहला 3D मैप दिखाने, और उस पर सुविधाएं ड्रॉ करने के बारे में बुनियादी बातें सीखी जा सकती हैं.
आपको क्या बनाना है.
इस कोडलैब में, एक ऐसा 3D वेब ऐप्लिकेशन बनाया जाता है जो ये काम करता है:
- Maps JavaScript API को डाइनैमिक तरीके से लोड करता है.
- टोरोंटो के सीएन टावर के बीच में 3D मैप दिखाता है.
- किसी जगह के आस-पास की सीमा दिखाता है.
- 3D मैप पर, लोकप्रिय जगहों की जानकारी दिखाने की सुविधा बंद करता है.
- जगह को कवर करने के लिए, बाउंड्री को एक्सट्रूज़ करता है.
आपको क्या सीखने को मिलेगा
- Google Maps Platform का इस्तेमाल शुरू करना.
- डाइनैमिक लाइब्रेरी इंपोर्ट का इस्तेमाल करके, JavaScript कोड से Maps JavaScript API को डाइनैमिक तरीके से लोड करना.
- Map3DElement क्लास का इस्तेमाल करके, 3D मैप लोड करें.
- मैप पर ड्रॉ करने के लिए, पॉलीगॉन और एक्सट्रूज़न का इस्तेमाल करना.
2. ज़रूरी शर्तें
इस कोडलैब को पूरा करने के लिए, आपको यहां दिए गए आइटम के बारे में जानकारी होनी चाहिए. अगर आपको Google Maps Platform के साथ काम करने का पहले से पता है, तो सीधे Codelab पर जाएं!
Google Maps Platform के ज़रूरी प्रॉडक्ट
इस कोडलैब में, आपको Google Maps Platform के इन प्रॉडक्ट का इस्तेमाल करना होगा:
- Maps JavaScript एपीआई
हां, अपने पेज पर 3D Maps जोड़ने के लिए, आपको बस इतना ही करना होगा. इसके अलावा, कुछ और करने की ज़रूरत नहीं है. यह बहुत आसान है!
इस कोडलैब के लिए अन्य ज़रूरी शर्तें
इस कोडलैब को पूरा करने के लिए, आपको इन खातों, सेवाओं, और टूल की ज़रूरत होगी:
- बिलिंग की सुविधा वाला Google Cloud खाता
- Maps JavaScript API की सुविधा वाला Google Maps Platform API पासकोड
- JavaScript, एचटीएमएल, और सीएसएस की बुनियादी जानकारी
- आपकी पसंद का टेक्स्ट एडिटर या आईडीई, ताकि फ़ाइल में बदलाव करके उसे देखा जा सके
- फ़ाइल को काम करते समय देखने के लिए वेब ब्राउज़र
3. सेट अप करें
Google Maps Platform सेट अप करना
अगर आपके पास Google Cloud Platform खाता और बिलिंग की सुविधा वाला प्रोजेक्ट नहीं है, तो बिलिंग की सुविधा वाला खाता और प्रोजेक्ट बनाएं. ऐसा करने का तरीका जानने के लिए, कृपया Google Maps Platform का इस्तेमाल शुरू करना देखें.
- Cloud Console में, प्रोजेक्ट वाले ड्रॉप-डाउन मेन्यू पर क्लिक करें. इसके बाद, उस प्रोजेक्ट को चुनें जिसे इस कोडलैब के लिए इस्तेमाल करना है.
- इस कोडलैब के लिए ज़रूरी Google Maps Platform API और एसडीके को Google Cloud Marketplace में जाकर चालू करें. ऐसा करने के लिए, इस वीडियो या दस्तावेज़ में बताया गया तरीका अपनाएं.
- Cloud Console के क्रेडेंशियल पेज पर जाकर, एक एपीआई पासकोड जनरेट करें. ऐसा करने के लिए, इस वीडियो या दस्तावेज़ में बताया गया तरीका अपनाएं. Google Maps Platform का इस्तेमाल करने के लिए, एपीआई पासकोड ज़रूरी है.
4. Maps JavaScript API लोड करना
सेट अप करने के सेक्शन में दिए गए सभी चरणों को पूरा करने के बाद, अपना पहला 3D मैप बनाना शुरू किया जा सकता है.
अपने हिसाब से सबसे आसान वेब पेज बनाएं.
सबसे पहले, हम अपना पूरा कोड होस्ट करने के लिए एक बहुत ही बुनियादी वेब पेज बनाएंगे. ऐसा करने के लिए, अपनी पसंद के किसी भी एडिटर या प्लैटफ़ॉर्म का इस्तेमाल किया जा सकता है.
<!DOCTYPE html>
<html>
<head>
<title>3D Maps Codelab</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
</body>
</html>
कोड जोड़ें और फ़ाइल को किसी ऐसी जगह सेव करें जहां उसे ऐक्सेस किया जा सके. इसके लिए, 3dmap.html जैसे किसी नाम का इस्तेमाल करें. इसके बाद, पेज की मौजूदा स्थिति देखने के लिए, इसे वेब ब्राउज़र में खोलें और देखें कि कोई गड़बड़ी तो नहीं है.
2D Maps की तरह ही, 3D Maps के लिए भी Maps JavaScript API ज़रूरी है. इसलिए, आपको सबसे पहले इसे लोड करना होगा.
ऐसा कई तरीकों से किया जा सकता है. इन तरीकों के बारे में जानने के लिए, दस्तावेज़ के Maps JavaScript API को लोड करना सेक्शन में जाएं.
इस डेमो में, हम डाइनैमिक लाइब्रेरी इंपोर्ट करने के नए तरीके का इस्तेमाल करेंगे. इसकी मदद से, सिर्फ़ उन एलिमेंट को लोड किया जा सकता है जिन्हें लोड करना ज़रूरी है. इससे, डाउनलोड के साइज़ और स्टार्टअप के समय में बचत होती है.
डाइनैमिक लोडर जोड़ना
डाइनैमिक लोडर का इस्तेमाल करने के लिए, पक्का करें कि आपने अपने वेब पेज में नीचे दिया गया स्क्रिप्ट टैग जोड़ा हो. साथ ही, सही जगह पर अपना एपीआई पासकोड जोड़ा हो. यह पासकोड, आपको दूसरे चरण में मिला था. इस स्क्रिप्ट टैग को बुनियादी वेब पेज के मुख्य सेक्शन के बीच में रखें.
<script async defer>
(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",
});
</script>
ध्यान दें कि प्रॉडक्ट रिलीज़ के इस चरण में, हम 3D Maps का ऐक्सेस पाने के लिए, एपीआई की ऐल्फ़ा शाखा का इस्तेमाल कर रहे हैं. इसमें प्रॉडक्ट की सबसे ज़्यादा एक्सपेरिमेंटल सुविधाएं शामिल होती हैं. साथ ही, आपको रिलीज़ होने से पहले ऐक्सेस करने की सुविधा वाले कोड को टेस्ट करने की सुविधा मिलती है, ताकि आप रिलीज़ के समय उसका इस्तेमाल कर सकें.
अब आपके पास एक बुनियादी वेब पेज होना चाहिए, जिसमें डाइनैमिक लोडर शामिल हो. अगर पेज खोला जाता है, तो व्यू खाली होगा, लेकिन इसमें कोई गड़बड़ी नहीं होनी चाहिए. अब हम 3D मैप जोड़ने के लिए तैयार हैं.
अगर किसी वजह से आपका कोड काम नहीं कर रहा है, तो छठे चरण पर जाएं और उसे फ़ाइनल नतीजे से तुलना करके देखें कि क्या गड़बड़ी है.
पेज काम क्यों नहीं कर रहा है, यह जानने के लिए अपने ब्राउज़र में गड़बड़ी कंसोल देखें और गड़बड़ी को डीबग करें. गड़बड़ी वाले पेज पर, अलग-अलग ब्राउज़र के लिए ऐसा करने का तरीका बताया गया है. साथ ही, गड़बड़ी के अलग-अलग मैसेज के बारे में भी बताया गया है. साथ ही, एपीआई के काम न करने की कुछ सामान्य वजहें भी बताई गई हैं. डेवलपमेंट के दौरान, इस संसाधन का इस्तेमाल करके यह पता लगाया जा सकता है कि किसी भी लागू करने के तरीके में क्या गड़बड़ी हो सकती है.
5. मैप डिसप्ले करने का तरीका
अब हम पेज पर अपना पहला 3D मैप जोड़ने के लिए पूरी तरह से तैयार हैं!
3D मैप बनाने के लिए, google.maps.maps3d.Map3DElement क्लास का इस्तेमाल किया जाता है. इसकी मदद से, 3D मैप इंस्टेंस बनाए जा सकते हैं और उनका इस्तेमाल किया जा सकता है. इस कोडलैब में, हम HTML टैग के बजाय सीधे 3D मैप ऑब्जेक्ट के साथ काम करेंगे.
Init फ़ंक्शन बनाना और लाइब्रेरी लोड करना
सबसे पहले, हम एक ऐसा फ़ंक्शन बनाएंगे जो एलिमेंट को पेज में लोड करता है. कोड देखें, हम पहले एक असाइनोक्रोनस फ़ंक्शन बनाते हैं. इससे, हमें यह पक्का करने में मदद मिलती है कि बाकी कोड के साथ आगे बढ़ने से पहले, पूरा एलिमेंट लोड हो गया है. इसके बाद, पेज लोड होने पर हम init फ़ंक्शन चलाते हैं.
इसे पेज के मुख्य सेक्शन में, लोडिंग स्क्रिप्ट के बाद जोड़ें.
<script>
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
}
init();
</script>
ध्यान दें कि हम await एक्सप्रेशन का इस्तेमाल करके पक्का करते हैं कि आगे बढ़ने से पहले लाइब्रेरी लोड हो गई है.
3D मैप एलिमेंट बनाना और जगह की जानकारी देना
इसके बाद, हमें उस जगह की जानकारी देनी होगी जहां हमें मैप व्यू चाहिए. 3D Maps के लिए, व्यू सेट करने के लिए कई अलग-अलग पैरामीटर इस्तेमाल किए जा सकते हैं. ये वर्चुअल कैमरे के पैरामीटर होते हैं. इनसे यह पता चलता है कि सीन में आपका ध्यान किस चीज़ पर है.
आइए, सीएन टावर का ऐसा व्यू बनाते हैं जो कुछ ऐसा दिखे.
सबसे पहले, हमें उन निर्देशांकों की जानकारी देनी होगी जिन्हें हमें देखना है. ये दो अलग-अलग व्यू से बने होते हैं
- वह पॉइंट जिसे हमें देखना है. इसमें उसकी ऊंचाई भी शामिल है.
- उस वर्चुअल कैमरे की दूरी और दिशा जिससे पॉइंट को देखा जा रहा है.
नीचे दी गई इमेज से, आपको यह पता चल सकता है कि ये सेटिंग कैसे काम करती हैं.
एलिमेंट का सेंटर वह पॉइंट होता है जिसे देखा जा रहा है. रेंज, ऑब्जेक्ट से आपकी दूरी होती है. वहीं, टिल्ट वह ऐंगल होता है जिससे इमेज देखी जा रही है. अगर आपको ऑब्जेक्ट के हेडिंग और रोल को भी कंट्रोल करना है, तो उन्हें भी सेट किया जा सकता है. हालांकि, हम यहां इसका इस्तेमाल नहीं कर रहे हैं.
अब हम पेज पर 3D मैप बनाएंगे. लाइब्रेरी इंपोर्ट होने के बाद, पेज के init सेक्शन में यह कोड जोड़ें.
const map3DElement = new Map3DElement({
center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
range: 1000,
tilt: 60,
mode: MapMode.HYBRID,
});
document.body.append(map3DElement);
सबसे पहले, हम एलिमेंट बनाते हैं और सही जगह के पैरामीटर सेट करते हैं. इसके बाद, हम पेज पर कॉम्पोनेंट जोड़ते हैं. अगर कोई मौजूदा div है, तो हम उसे असाइन कर सकते हैं.
अब आपका कोड, यहां दिए गए उदाहरण जैसा दिखेगा:
<!DOCTYPE html>
<html>
<head>
<title>3D Maps Codelab</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script async defer>
(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",
});
</script>
<script>
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
const map3DElement = new Map3DElement({
center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
range: 1000,
tilt: 60,
mode: MapMode.HYBRID
});
document.body.append(map3DElement);
}
init();
</script>
</body>
</html>
अब हम फ़ाइल को सेव कर सकते हैं और ब्राउज़र में पेज खोलकर देख सकते हैं कि यह काम कर रहा है या नहीं. हमें कैमरा, टावर को नीचे से देखते हुए दिखना चाहिए, जैसा कि इमेज में दिखाया गया है. आगे बढ़ने और टावर के ऊपर बॉक्स जोड़ने से पहले, कुछ समय तक आज़माएं.
6. सुविधाएं जोड़ना और एक्सट्रूज़न करना
अब हमारे पास 3D मैप है, इसलिए उपयोगकर्ताओं को किसी ऑब्जेक्ट को हाइलाइट करके बताएं कि यह उनकी दिलचस्पी का आइटम है. इस मामले में, हम CN टावर के चारों ओर एक बॉक्स बनाने के लिए, पॉलीगॉन और एक्सट्रूज़न फ़ंक्शन का इस्तेमाल करेंगे, ताकि यह नीचे दिए गए व्यू जैसा दिखे.
ग़ैर-ज़रूरी आइटम छिपाना
आपको सबसे पहले यह दिख सकता है कि हमने दिलचस्प जगहों की जानकारी दिखाने की सुविधा बंद कर दी है. इस मैप में, हमें टावर पर फ़ोकस करना है. इसलिए, हमें दूसरे विज़ुअल एलिमेंट हटाने होंगे.
ऐसा करने के लिए, हमें लेबल छिपाने के लिए कोड में बदलाव करना होगा. बिंदुओं को छिपाने के लिए, मैप की मोड लाइन को SATELLITE पर अपडेट करें.
mode: MapMode.SATELLITE,
इस प्रॉपर्टी को सेट करने पर, मैप पर लेबल बंद हो जाते हैं. इसमें दिलचस्पी वाली जगहों के साथ-साथ, सड़क और सीमा की लाइनें भी शामिल होती हैं. साथ ही, जगह का "साफ़" व्यू बन जाता है.
पॉलीगॉन जोड़ना और उसे स्टाइल देना
अगला चरण, पेज में पॉलीगॉन जोड़ना है. ऐसा दो चरणों में किया जा सकता है. सबसे पहले, हमें ऐसे फ़ंक्शन लोड करने होंगे जिनमें ज़रूरी जानकारी हो. इसके बाद, पॉलीगॉन की स्टाइल से जुड़ी जानकारी देनी होगी. जैसे, उसका रंग या यह कि वह अन्य सुविधाओं के पीछे दिखेगा या नहीं.
सबसे पहले, हम कोड की इस लाइन का इस्तेमाल करके, पेज में ज़रूरी क्लास जोड़ते हैं.
const { Polygon3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");
इससे पेज में Polygon3DElement और AltitudeMode क्लास लोड होती हैं. ये क्लास, व्यू में पॉलीगॉन ऑब्जेक्ट जोड़ने के लिए ज़रूरी हैं.
पॉलीगॉन में कई अलग-अलग सेटिंग हो सकती हैं, जिनसे व्यू को कंट्रोल किया जा सकता है. जैसे, स्ट्रोक की चौड़ाई, रंग (नाम या हेक्स वैल्यू से), और बॉर्डर और भरने की सेटिंग की अपारदर्शिता. इनसे यह भी कंट्रोल किया जा सकता है कि पॉलीगॉन को अन्य सुविधाओं या इमारतों के पीछे दिखाया जाए या नहीं. उदाहरण के लिए, ओकुलेड सेगमेंट ड्रॉ करना. Polygon3DElement क्लास के दस्तावेज़ में ज़्यादा जानकारी देखी जा सकती है.
हमें एक और सुविधा सेट करनी होगी, ताकि पॉलीगॉन को एक्सट्रूज़न वाले तरीके से ड्रॉ किया जा सके. इसका मतलब है कि पॉलीगॉन को सेट की गई ऊंचाई पर ड्रॉ करना और फिर उसे नीचे तक बढ़ाना. इससे पॉलीगॉन को बॉक्स की तरह ऊंचाई मिलती है, जैसा कि ऊपर दी गई इमेज में देखा जा सकता है. इसके लिए, हमें पॉलीगॉन पर ऊंचाई मोड भी सेट करना होगा. इसलिए, हमें ऊपर AltitudeMode कॉन्स्टेंट लोड करने की ज़रूरत पड़ी. पॉलीगॉन को एक्सट्रूज़न करने के लिए, इसे ABSOLUTE या RELATIVE_TO_GROUND पर सेट करना होगा. इससे पॉलीगॉन के वर्टिसेस की ऊंचाई से सही पोज़िशन मिलती है.
कोड, एक लिटरल ऑब्जेक्ट बनाता है जिसमें ये प्रॉपर्टी होती हैं. इनका इस्तेमाल, Polygon3DElement ऑब्जेक्ट बनाने के लिए किया जा सकता है, जैसा कि यहां दिखाया गया है:
const polygonOptions = {
strokeColor: "#EA433580",
strokeWidth: 4,
fillColor: "#0000FF80",
altitudeMode: "ABSOLUTE",
extruded: true,
drawsOccludedSegments: true,
}
const towerPolygon = new google.maps.maps3d.Polygon3DElement(polygonOptions);
अब हमने पॉलीगॉन ऑब्जेक्ट बना लिया है और हमें इसके भौगोलिक निर्देशांक भी सेट करने होंगे. पॉलीगॉन में इनर और आउटर, दोनों कोऑर्डिनेट हो सकते हैं. यह इस बात पर निर्भर करता है कि उन्हें किस तरह दिखाया जा रहा है. innerCoordinates, पॉलीगॉन में कट आउट का फ़ॉर्म देते हैं और outerCoordinates, पॉलीगॉन की बाहरी सीमा तय करते हैं. यह एक पॉलीगॉन है, न कि लाइन. इसलिए, पूरा आकार देने के लिए निर्देशांक एक ही बिंदु से शुरू और खत्म होने चाहिए.
निर्देशांकों की जानकारी देने के लिए, LatLng या LatLngAltitude ऑब्जेक्ट या लिटरल के कलेक्शन का इस्तेमाल किया जा सकता है. हम इसे अपने बेसिक पॉलीगॉन के लिए देख सकते हैं.
towerPolygon.outerCoordinates = [
{ lat: 43.6427196, lng: -79.3876802, altitude: 600 },
{ lat: 43.6421742, lng: -79.3869184, altitude: 600 },
{ lat: 43.643001, lng: -79.3866475, altitude: 600 },
{ lat: 43.6427196, lng: -79.3876802, altitude: 600 }
];
अब हमने पॉलीगॉन के लिए स्टाइल और निर्देशांक सेट अप कर लिए हैं. अब हम इसे पेज पर जोड़ने के लिए तैयार हैं. पॉलीगॉन, मैप एलिमेंट के चाइल्ड एलिमेंट होते हैं. इन्हें पेज में मौजूद किसी मौजूदा मैप ऑब्जेक्ट में जोड़ना ज़रूरी होता है. पेज में यह कोड जोड़ें.
map3DElement.append(towerPolygon);
इसके बाद, हमें यहां दिखाए गए तरीके से पूरी सुविधा मिल जाएगी. हालांकि, इसमें आपकी एपीआई कुंजी होगी. हम पेज को चलाने और नतीजा देखने के लिए तैयार हैं.
<!DOCTYPE html>
<html>
<head>
<title>3D Maps Codelab</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script async defer>
(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",
});
</script>
<script>
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
const map3DElement = new Map3DElement({
center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
range: 1000,
tilt: 60,
mode: MapMode.SATELLITE,
});
const { Polygon3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");
const polygonOptions = {
strokeColor: "#EA433580",
strokeWidth: 4,
fillColor: "#0000FF80",
fillOpacity: 0.2,
altitudeMode: "ABSOLUTE",
extruded: true,
drawsOccludedSegments: true,
}
const towerPolygon = new google.maps.maps3d.Polygon3DElement(polygonOptions);
towerPolygon.outerCoordinates = [
{ lat: 43.6427196, lng: -79.3876802, altitude: 600 },
{ lat: 43.6421742, lng: -79.3869184, altitude: 600 },
{ lat: 43.643001, lng: -79.3866475, altitude: 600 },
{ lat: 43.6427196, lng: -79.3876802, altitude: 600 }
];
map3DElement.append(towerPolygon);
document.body.append(map3DElement);
}
init();
</script>
</body>
</html>
अगर कोड सही है, तो आपको नीचे दिया गया 3D मैप और पॉलीगॉन वाला पेज दिखेगा.
आपने Google Maps Platform का इस्तेमाल करके, अपना पहला 3D मैप बना लिया है. इसके लिए, आपने Maps JavaScript API लोड किया है, 3D मैप बनाया है, और एक्सट्रूज़न वाला पॉलीगॉन जोड़ा है.
7. आगे क्या करना है?
इस कोडलैब में, Maps JavaScript API का इस्तेमाल करके क्या-क्या किया जा सकता है, इसकी बुनियादी जानकारी दी गई है. इसके बाद, मैप में इनमें से कुछ सुविधाएं जोड़कर देखें:
- दिलचस्पी वाली जगहों की जानकारी को टॉगल करने के लिए बटन जोड़ें.
- कुछ ऐसी लाइनें जोड़ें जो अलग-अलग जगहों से आने-जाने का रास्ता दिखाती हों.
- उपयोगकर्ता व्यू को कहां ले जा सकता है, यह कंट्रोल करने के लिए कुछ सीमाएं सेट करें.
- Maps JavaScript API के लिए उपलब्ध अन्य लाइब्रेरी देखें. इन लाइब्रेरी की मदद से, Places या Directions जैसी अन्य सेवाएं चालू की जा सकती हैं.
वेब पर Google Maps Platform और 3D के साथ काम करने के अन्य तरीकों के बारे में जानने के लिए, ये लिंक देखें: