शुरू करना

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

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

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

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

कोड लिखना शुरू करने से पहले, आपको ऐसा एनवायरमेंट सेट अप करना होगा जिसमें 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 जोड़ना

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

  • 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 mode="hybrid" 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=beta&libraries=maps3d"></script>
  </body>
</html>

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

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

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

बधाई हो! आपने Maps JavaScript API में Google के फ़ोटोरियलिस्टिक 3D मैप का इस्तेमाल करके, एक ऐप्लिकेशन बनाया है.

अगले चरण

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