खास जानकारी

Maps JavaScript में 3D Maps की मदद से, 3D मैप का शानदार अनुभव दिया जा सकता है. यह मैप की स्टाइल को पसंद के मुताबिक बनाने, सुलभता को बेहतर बनाने, और इस्तेमाल को आसान बनाने के लिए टूल उपलब्ध कराता है. इससे दिलचस्प और इंटरैक्टिव ऐप्लिकेशन डेवलप किए जा सकते हैं.

Maps JavaScript API में 3D Maps की मदद से क्या-क्या किया जा सकता है, इसका एक उदाहरण यहां दिया गया है:

Maps JavaScript में 3D Maps का इस्तेमाल क्यों करें

Maps JavaScript में 3D मैप, maps3d लाइब्रेरी में Map3DElement (<gmp-map-3d>) क्लास उपलब्ध कराता है. इससे, अपने ऐप्लिकेशन में Google की 3D इमेजरी का इस्तेमाल किया जा सकता है. 3D मैप में, पहले से मौजूद 3D रेंडरिंग की सुविधा मिलती है. इससे आपको 3D रीयल-वर्ल्ड एनवायरमेंट, शहर के व्यू, और लैंडमार्क टूर को शामिल करने या उनके साथ एक्सपेरिमेंट करने की सुविधा मिलती है.

3D इलाके, कैमरे को झुकाने, हेडिंग, और रेंज फ़्लाइओवर, एक्सट्रूडेड 3D बिल्डिंग, और 3D ऑब्जेक्ट, जैसे कि Marker3DElement (<gmp-marker-3d>) के लिए, 3D <gmp-map-3d> (maps3d लाइब्रेरी में Map3DElement) का इस्तेमाल करें. फ़्लैट 2D रोड मैप, स्टैंडर्ड 2D AdvancedMarkerElement पिन, और 2D वेक्टर स्टाइलिंग के लिए, 2D <gmp-map> (maps लाइब्रेरी में MapElement या google.maps.Map) का इस्तेमाल करें.

Maps JavaScript में 3D Maps की मदद से क्या किया जा सकता है?

• मैप पर असली दुनिया का अनुभव दें: SATELLITE या HYBRID मोड (जो सैटलाइट से ली गई तस्वीरों पर बुनियादी मैप के लेबल ओवरले करता है) में, शहरों, इलाकों, और लैंडमार्क की फ़ोटो जैसी दिखने वाली 3D एरियल इमेज रेंडर करें. इसके अलावा, mode प्रॉपर्टी का इस्तेमाल करके, ROADMAP मोड में स्टाइल किया गया 3D बुनियादी मैप दिखाएं. ज़्यादा जानकारी के लिए, मैप मोड बदलना लेख पढ़ें.
• मैप की स्टाइल को पसंद के मुताबिक बनाना:
  • क्लाउड पर मैप की स्टाइलिंग की सुविधा का इस्तेमाल करके 3D मैप बनाना: बुनियादी मैप पर मौजूद लोकप्रिय जगहों (पीओआई) और सड़कों की विज़िबिलिटी और स्टाइल को कंट्रोल करें. ज़्यादा जानकारी के लिए, 3D मैप को पसंद के मुताबिक बनाना लेख पढ़ें.
  • कस्टम मार्कर, पॉपओवर, पॉलीलाइन, और पॉलीगॉन: जगहों की पहचान करें और मैप पर 3D रूट या सीमाएं बनाएं. इसके लिए, MarkerElement, Marker3DElement, Marker3DInteractiveElement, PopoverElement, Polyline3DElement, और Polygon3DElement का इस्तेमाल करें. ज़्यादा जानकारी के लिए, मार्कर, पॉपओवर, और आकार और लाइनें देखें.
  • 3D मॉडल और glTF ऐसेट: Model3DElement का इस्तेमाल करके, असल दुनिया के निर्देशांकों पर इमारतों, लैंडमार्क या ऑब्जेक्ट के कस्टम PBR glTF 3D मॉडल जोड़ें. ज़्यादा जानकारी के लिए, मॉडल देखें.
• इमर्सिव मैप बनाएं:
  • पहले से सेट किए गए कैमरा पाथ: flyCameraTo और flyCameraAround का इस्तेमाल करके, पहले से तय किए गए कैमरा फ़्लाईओवर और ऑर्बिटल ऐनिमेशन की मदद से, उपयोगकर्ताओं को अपने 3D मैप के बारे में बताएं. ज़्यादा जानकारी के लिए, कैमरे के पाथ को ऐनिमेट करना लेख पढ़ें.
  • उपयोगकर्ता के इंटरैक्शन को कंट्रोल करना: उपयोगकर्ताओं के लिए उपलब्ध कंट्रोल और कैमरे के मूवमेंट को पसंद के मुताबिक बनाएं. ज़्यादा जानकारी के लिए, 3D मैप कंट्रोल और एक्सप्लोरेशन, कैमरा व्यू और सीमाओं को सीमित करना, और कैमरे की पोज़िशन कंट्रोल करना देखें.

एक उदाहरण

maps3d लाइब्रेरी को लोड करने और mode="HYBRID", center (lat,lng,altitude), range, tilt, और heading के साथ <gmp-map-3d> एलिमेंट को रेंडर करने के लिए, इस स्निपेट का इस्तेमाल करें:

<gmp-map-3d
  style="height: 400px; width: 100%;"
  mode="HYBRID"
  center="40.7484,-73.9857,200"
  range="900"
  tilt="67"
  heading="35">
</gmp-map-3d>
<script async
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&libraries=maps3d">
</script>

YOUR_API_KEY को अपने Google Maps Platform API पासकोड से बदलें.

Maps JavaScript में 3D मैप इस्तेमाल करने का तरीका

कवरेज

फ़ोटोरियलिस्टिक 3D बिल्डिंग और लैंडमार्क मेश, उन देशों और इलाकों के चुनिंदा महानगरों में उपलब्ध हैं जहां यह सुविधा काम करती है. जिन इलाकों में 3D मेश कवरेज उपलब्ध नहीं है (जैसे कि भारत), वहां <gmp-map-3d> 3D बिल्डिंग के बिना, 3D इलाके की ऊंचाई पर 2D सैटलाइट या रोडमैप की इमेज रेंडर करता है. अगर किसी इलाके में 3D मेश कवरेज नहीं है, तो वहां मौजूद किसी लैंडमार्क को दिखाने के लिए, Model3DElement का इस्तेमाल करके, उसके निर्देशांकों पर कस्टम glTF 3D मॉडल डाला जा सकता है. इसके अलावा, 2D <gmp-map> का इस्तेमाल भी किया जा सकता है. यह सुविधा किस देश में उपलब्ध है, यह जानने के लिए Google Maps Platform की कवरेज की जानकारी देखें. यह जानकारी, Maps JavaScript 3D कॉलम में दी गई है.

अगले चरण

• "नमस्ते, दुनिया के लोगों!" बनाने के लिए, शुरू करें गाइड देखें 3D मैप.
• मैप में सुविधाएं जोड़ने का तरीका जानने के लिए, शुरुआती कोडलैब आज़माएं.
• अगले कोडलैब में, मार्कर और ऐनिमेशन के बारे में ज़्यादा जानें.
• Google के सैंपल का कलेक्शन ब्राउज़ करें और अपने इस्तेमाल के उदाहरण के लिए सही सैंपल ढूंढें.