आरंभ करें

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

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

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

कोड लिखने से पहले, आपको ऐसा इनवायरनमेंट सेट अप करना होगा जिसमें 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" range="2000" tilt="75" heading="330"></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 की पूरी क्षमता के बारे में जानें.