शुरू करना

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

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

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

कोड लिखना शुरू करने से पहले, आपको 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=GOOGLE_MAPS_API_KEY&libraries=maps3d"></script>
    </head>
    <body>
        <gmp-map-3d center="37.7704,-122.3985,500" tilt="67.5" mode="hybrid">
        </gmp-map-3d>
    </body>
</html>
index.html

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

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

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

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

अगले चरण

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