शुरू करना

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

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

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

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

कोड लिखना शुरू करने से पहले, आपको ऐसा एनवायरमेंट सेट अप करना होगा जिसमें 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=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps3d"></script>
    </head>
    <body>
        <gmp-map-3d center="37.7704,-122.3985,500" tilt="67.5" mode="hybrid">
        </gmp-map-3d>
    </body>
</html>

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

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

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

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

अगले चरण