शुरू करना

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

इस ट्यूटोरियल में, Maps JavaScript में 3D मैप का इस्तेमाल करके, अपना पहला JavaScript ऐप्लिकेशन बनाने के बारे में बताया गया है. यह एक बुनियादी विंडो है, जिसमें गोल्डन गेट ब्रिज का ऊपर से दिखने वाला व्यू दिखाया गया है. साथ ही, बैकग्राउंड में Marin Headlands दिख रहा है.

ट्यूटोरियल पूरा करने के बाद, आपको अपने डेवलपमेंट एनवायरमेंट में यह मैप दिखेगा:

अपना एनवायरमेंट सेट अप करने का तरीका

कोड लिखना शुरू करने से पहले, आपको एक ऐसा एनवायरमेंट सेट अप करना होगा जिसमें JavaScript काम करती हो. इस ट्यूटोरियल के लिए, आपको वेब ब्राउज़र का इस्तेमाल करना होगा. सभी मॉडर्न वेब ब्राउज़र में JavaScript के लिए पहले से ही सपोर्ट मौजूद होता है. इसलिए, आपको कोई अतिरिक्त सॉफ़्टवेयर इंस्टॉल करने की ज़रूरत नहीं है.

  1. अपनी पसंद का कोई टेक्स्ट एडिटर खोलें.
  2. एक नई फ़ाइल बनाएं और उसे .html एक्सटेंशन (जैसे, hello-p3djs.html) के साथ सेव करें.

एचटीएमएल पेज लिखना

शुरू करने के लिए, आपको बुनियादी एचटीएमएल स्ट्रक्चर वाला एक वेब पेज बनाना होगा:

<html>
  <head>
      <title>Map</title>
  </head>
  <body>
      <!-- Your JavaScript code will go here -->
  </body>
</html>

JavaScript जोड़ना

इसके बाद, मैप लोड करने के लिए कस्टम एचटीएमएल एलिमेंट जोड़ा जाएगा. कोड में दो एलिमेंट शामिल हैं:

  • gmp-map-3d में, कैमरे की शुरुआती पोज़िशन और व्यू को सेट करने के लिए इस्तेमाल किए गए पैरामीटर शामिल होते हैं.
  • script में, Maps JavaScript API को लोड करने का कॉल होता है. YOUR_KEY को अपने एपीआई पासकोड से बदलना न भूलें.

<html>
    <head>
        <title>Map</title>
        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script
            async
            src="https://maps.googleapis.com/maps/api/js?loading=async&key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps3d"></script>
    </head>
    <body>
        <gmp-map-3d center="37.7704,-122.3985,500" tilt="67.5" mode="hybrid">
        </gmp-map-3d>
    </body>
</html>

ऐप्लिकेशन चलाना

ऐप्लिकेशन चलाने और आउटपुट देखने के लिए, यह तरीका अपनाएं:

  1. बनाई गई एचटीएमएल फ़ाइल सेव करें.
  2. फ़ाइल को वेब ब्राउज़र में खोलें. इसके लिए, फ़ाइल पर दो बार क्लिक करें, उसे ब्राउज़र विंडो में खींचें और छोड़ें या उस पर राइट क्लिक करके "इससे खोलें" विकल्प का इस्तेमाल करें.
  3. आपको अपने ब्राउज़र विंडो में मैप दिखेगा.

बधाई हो! आपने Maps JavaScript API में Google के 3D मैप का इस्तेमाल करके, अभी-अभी एक ऐप्लिकेशन लिखा है.

अगले चरण

  • Google के मौजूदा सैंपल का इस्तेमाल करके, ज़्यादा जटिल 3D मैप बनाएं.
  • Maps JavaScript API में 3D Maps की पूरी क्षमता के बारे में जानने के लिए, रेफ़रंस दस्तावेज़ पढ़ें.