प्रारंभ करना

इस ट्यूटोरियल में, आपको 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 मैप का इस्तेमाल करके एक प्रोग्राम लिखा है.

अगले चरण