Maps Embed API क्विकस्टार्ट

एचटीटीपी अनुरोध का आसानी से इस्तेमाल करके, अपने वेब पेज पर इंटरैक्टिव मैप या Street View पैनोरामा जोड़ें. इसके लिए, कस्टम JavaScript की ज़रूरत नहीं है.

लागत

Maps Embed API के सभी अनुरोधों के लिए कोई शुल्क नहीं लिया जाता. साथ ही, इसका इस्तेमाल बिना किसी सीमा के किया जा सकता है. हालांकि, सभी अनुरोधों के लिए अब भी मान्य Google Cloud API पासकोड की ज़रूरत होती है. ज़्यादा जानकारी के लिए, इस्तेमाल और बिलिंग लेख पढ़ें.

शुरू करने से पहले

अपने वेब पेज पर एम्बेड किया गया मैप बनाने के लिए, सेटअप से जुड़े ज़रूरी चरण पूरे करें. इसके लिए, इन टैब पर क्लिक करें:

चरण 1

कंसोल

1. Google Cloud Console में, प्रोजेक्ट चुनने वाले पेज पर, नया Cloud प्रोजेक्ट बनाने के लिए, प्रोजेक्ट बनाएं पर क्लिक करें.

   प्रोजेक्ट चुनने वाले पेज पर जाएं

2. पक्का करें कि आपके क्लाउड प्रोजेक्ट के लिए बिलिंग की सुविधा चालू हो. पुष्टि करें कि आपके प्रोजेक्ट के लिए बिलिंग चालू है.

   ध्यान दें: Cloud प्रोजेक्ट सेट अप करने के लिए, आपको बिलिंग खाता सेट अप करना होगा. हालांकि, Embed API का इस्तेमाल बिना किसी शुल्क के किया जा सकता है.

   Google Cloud को बिना किसी शुल्क के आज़माया जा सकता है. बिना शुल्क आज़माने की अवधि 90 दिनों के बाद खत्म हो जाती है. इसके अलावा, अगर खाते में 300 डॉलर का शुल्क लग जाता है, तो भी यह अवधि खत्म हो जाती है. इन दोनों में से जो भी स्थिति पहले आती है उसके हिसाब से अवधि खत्म हो जाती है. कभी भी रद्द करें. ज़्यादा जानकारी के लिए, बिलिंग खाते के क्रेडिट और बिलिंग लेख पढ़ें.

Cloud SDK

gcloud projects create "PROJECT"

Google Cloud SDK , Cloud SDK इंस्टॉल करना , और इन कमांड के बारे में ज़्यादा जानें:

• gcloud projects create

ध्यान दें: अगर आपको लर्निंग एक्सरसाइज़ में बनाए गए संसाधनों को सेव नहीं करना है, तो मौजूदा प्रोजेक्ट चुनने के बजाय एक नया प्रोजेक्ट बनाएं. एक्सरसाइज़ पूरी होने के बाद, प्रोजेक्ट को मिटाया जा सकता है. इससे प्रोजेक्ट से जुड़े सभी संसाधन हट जाएंगे.

चरण 2

Google Maps Platform का इस्तेमाल करने के लिए, आपको उन एपीआई या एसडीके को चालू करना होगा जिनका इस्तेमाल आपको अपने प्रोजेक्ट के साथ करना है.

कंसोल

Maps Embed API को चालू करना

Cloud SDK

gcloud services enable \
    --project "PROJECT" \
    "maps-embed-backend.googleapis.com"

Google Cloud SDK , Cloud SDK इंस्टॉल करना , और इन कमांड के बारे में ज़्यादा जानें:

• gcloud services enable
• gcloud services disable

तीसरा चरण

इस चरण में, सिर्फ़ एपीआई पासकोड बनाने की प्रोसेस के बारे में बताया गया है. अगर प्रोडक्शन में एपीआई पासकोड का इस्तेमाल किया जाता है, तो हमारा सुझाव है कि आप एपीआई पासकोड को सीमित करें. प्रॉडक्ट के हिसाब से, एपीआई पासकोड का इस्तेमाल करना पेज पर जाकर ज़्यादा जानकारी पाई जा सकती है.

एपीआई पासकोड एक यूनीक आइडेंटिफ़ायर होता है. यह आपके प्रोजेक्ट से जुड़े अनुरोधों की पुष्टि करता है, ताकि इस्तेमाल और बिलिंग के मकसद से ऐसा किया जा सके. आपके प्रोजेक्ट से कम से कम एक एपीआई कुंजी जुड़ी होनी चाहिए.

एपीआई पासकोड बनाने के लिए:

कंसोल

1. Google Maps Platform > क्रेडेंशियल पेज पर जाएं.

   क्रेडेंशियल पेज पर जाएं

2. क्रेडेंशियल पेज पर, क्रेडेंशियल बनाएं > एपीआई पासकोड पर क्लिक करें.
   एपीआई पासकोड बनाया गया डायलॉग में, नया एपीआई पासकोड दिखता है.
3. बंद करें पर क्लिक करें.
   नया एपीआई पासकोड, क्रेडेंशियल पेज पर एपीआई पासकोड में दिखता है.
   (प्रोडक्शन में इसका इस्तेमाल करने से पहले, एपीआई पासकोड को सीमित करना न भूलें.)

Cloud SDK

gcloud services api-keys create \
    --project "PROJECT" \
    --display-name "DISPLAY_NAME"

Google Cloud SDK , Cloud SDK इंस्टॉल करना , और इन कमांड के बारे में ज़्यादा जानें:

• gcloud services api-keys create

आईफ़्रेम जनरेट किया जा रहा है

नीचे दिए गए विकल्पों पर क्लिक करें. इसके बाद, अपने वेबपेज के लिए iframe जनरेट करने के लिए, जगह और एपीआई कुंजी जोड़ें. ज़्यादा पैरामीटर और विकल्पों के लिए, मैप को एम्बेड करना लेख पढ़ें.

अपने iframe की जांच करना

एचटीएमएल ब्राउज़र विंडो में अपना iframe देखने के लिए:

1. डिफ़ॉल्ट टेक्स्ट एडिटर खोलें. आपके डिवाइस पर, TextEdit या Microsoft Windows Notepad जैसे टेक्स्ट एडिटर डिफ़ॉल्ट रूप से इंस्टॉल होने चाहिए.
2. एक एचटीएमएल फ़ाइल बनाएं और उसका नाम index.html रखें.

3. ऊपर जनरेट किए गए iframe के साथ यह कोड जोड़ें:

   <html>
     <!-- Replace this code comment with your iframe. -->
   </html>
   

4. अपनी index.html एचटीएमएल फ़ाइल सेव करें.

5. एचटीएमएल फ़ाइल को वेब ब्राउज़र में लोड करें. इसके लिए, फ़ाइल को अपने डेस्कटॉप से ब्राउज़र पर खींचें. इसके अलावा, ज़्यादातर ऑपरेटिंग सिस्टम पर फ़ाइल पर दो बार क्लिक करने से भी फ़ाइल लोड हो जाती है.

बधाई हो! आपने Maps Embed API का इस्तेमाल करके, मैप सेट अप और बनाया हो.

स्टोरेज में जगह बनाना

Google Cloud प्रोजेक्ट को मिटाकर, उस प्रोजेक्ट में इस्तेमाल किए गए सभी संसाधनों के लिए बिलिंग बंद की जा सकती है.

चेतावनी: किसी प्रोजेक्ट को मिटाने पर, यह असर होता है:

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

1. Google Cloud Console में, संसाधन मैनेज करें पेज पर जाएं:

   संसाधन मैनेज करें पेज पर जाएं

2. अगर आपको जिस प्रोजेक्ट को मिटाना है वह किसी संगठन से जुड़ा है, तो पेज के सबसे ऊपर मौजूद संगठन की सूची को चुनें और बड़ा करें.
3. प्रोजेक्ट की सूची में, वह प्रोजेक्ट चुनें जिसे आपको मिटाना है. इसके बाद, मिटाएं पर क्लिक करें.
4. डायलॉग बॉक्स में, प्रोजेक्ट आईडी डालें और प्रोजेक्ट मिटाने के लिए, शट डाउन करें पर क्लिक करें.

अगले चरण

• Maps Embed API का इस्तेमाल करके डेवलपमेंट शुरू करने के लिए, अपना Google Cloud प्रोजेक्ट सेट अप करें:

  Cloud Console में सेट अप करना

• अपने iframe में जोड़े जा सकने वाले अन्य पैरामीटर और विकल्पों की सूची के लिए:

  मैप एम्बेड करना

• JavaScript API की मदद से, अपने Maps प्रोजेक्ट को बेहतर बनाएं:

  Maps JavaScript API