प्रारंभ करना

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Hello Photorealistic 3D Maps in Maps JavaScript</title>
</head>
<body>
    <!-- Your JavaScript code will go here -->
</body>
</html>

JavaScript जोड़ें

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

  • gmp-map-3d में ऐसे पैरामीटर शामिल होते हैं जिनका इस्तेमाल, कैमरे की शुरुआती पोज़िशन और व्यू को शुरू करने के लिए किया जाता है.
  • script में Maps JavaScript API को लोड करने के लिए कॉल शामिल है. YOUR_KEY को अपनी एपीआई कुंजी से बदलना न भूलें.
<!DOCTYPE html>
<html>
  <head>
    <title>Hello Photorealistic 3D Maps in Maps JavaScript</title>

    <style>
      html,
      body {
        height:100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <gmp-map-3d center="37.841157, -122.551679" tilt="67.5"></gmp-map-3d>
    <script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_KEY>&v=alpha&libraries=maps3d"></script>
  </body>
</html>

प्रोग्राम चलाएं

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

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

बधाई हो! आपने अभी-अभी Google के Maps JavaScript API फ़ोटोरियलिस्टिक 3D मैप का इस्तेमाल करके एक प्रोग्राम लिखा है.

अगले चरण

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