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

इस गाइड में आपको अपने वेब पेज पर इंटरैक्टिव मैप जोड़ने का तरीका बताया गया है.

Maps Embed API का यूआरएल बनाना

नीचे उदाहरण के तौर पर एक यूआरएल दिया गया है, जो Maps Embed API को लोड करता है:

https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&PARAMETERS

बदलें:

• MAP_MODE को आपके मैप मोड में इस्तेमाल किया जा सकता है.
• YOUR_API_KEY को अपने एपीआई पासकोड से ऐक्सेस करें. ज़्यादा जानकारी के लिए, एपीआई पासकोड पाना देखें.
• PARAMETERS को मैप मोड के लिए ज़रूरी और वैकल्पिक पैरामीटर के साथ सेट करें.

यूआरएल को iframe में जोड़ना

अपने वेब पेज पर Maps Embed API का इस्तेमाल करने के लिए, अपने बनाए गए यूआरएल को iframe के src एट्रिब्यूट की वैल्यू के तौर पर सेट करें. iframe के height और width एट्रिब्यूट की मदद से, मैप के साइज़ को कंट्रोल करें, उदाहरण के लिए:

<iframe
  width="450"
  height="250"
  frameborder="0" style="border:0"
  referrerpolicy="no-referrer-when-downgrade"
  src="https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&PARAMETERS"
  allowfullscreen>
</iframe>

ऊपर दिया गया iframe नमूना अतिरिक्त प्रॉपर्टी का उपयोग करता है:

• मैप के कुछ हिस्सों को फ़ुल स्क्रीन मोड में दिखाने के लिए, allowfullscreen प्रॉपर्टी.
• मैप के चारों ओर से स्टैंडर्ड iframe बॉर्डर हटाने के लिए, frameborder="0" और style="border:0" प्रॉपर्टी.
• referrerpolicy="no-referrer-when-downgrade" प्रॉपर्टी, ताकि ब्राउज़र, अनुरोध के साथ Referer हेडर के तौर पर पूरा यूआरएल भेज सके, ताकि एपीआई कुंजी से जुड़ी पाबंदियां ठीक से काम कर सकें.

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

एपीआई पासकोड से जुड़ी पाबंदियां

अगर होस्ट करने वाली वेबसाइट के referrer मेटा टैग को no-referrer या same-origin पर सेट किया जा रहा है, तो ब्राउज़र, Google को Referer हेडर नहीं भेजेगा. इस वजह से, आपकी एपीआई पासकोड पर लगी पाबंदी, अनुरोधों को अस्वीकार कर सकती है. यह पाबंदी ठीक से काम करे, इसके लिए ऊपर दिए गए उदाहरण की तरह, iframe में referrerpolicy प्रॉपर्टी जोड़ें. इससे, Google को Referer हेडर भेजने की अनुमति साफ़ तौर पर दी जा सकेगी.

मैप पर विज्ञापन

Maps Embed API में मैप पर विज्ञापन शामिल हो सकते हैं. किसी भी मैप में दिखाए जाने वाले विज्ञापन फ़ॉर्मैट और विज्ञापनों का सेट, बिना किसी सूचना के बदल सकता है.

मैप के मोड चुने जा रहे हैं

अपने अनुरोध यूआरएल में इस्तेमाल करने के लिए, मैप के इन मोड में से किसी एक को चुना जा सकता है:

• place: इससे किसी खास जगह या पते पर मैप का पिन दिखता है. जैसे, लैंडमार्क, कारोबार, भौगोलिक जगह या कस्बा.
• view: बिना मार्कर या निर्देश वाले मैप दिखाता है.
• directions: मैप पर दो या उससे ज़्यादा पॉइंट के बीच का पाथ दिखाता है. साथ ही, दूरी और यात्रा में लगने वाला समय भी दिखाता है.
• streetview: इसमें कुछ जगहों से इंटरैक्टिव पैनोरामिक व्यू दिखाए जाते हैं.
• search: मैप वाले इलाके में की गई खोज के नतीजे दिखाता है.

place मोड

यह यूआरएल, ऐफ़िल टावर पर मैप मार्कर दिखाने के लिए, place के मैप मोड का इस्तेमाल करता है:

https://www.google.com/maps/embed/v1/place
  ?key=YOUR_API_KEY
  &q=Eiffel+Tower,Paris+France

इन पैरामीटर का इस्तेमाल किया जा सकता है:

view मोड

इस उदाहरण में, मैप का सैटलाइट व्यू दिखाने के लिए, view मोड और वैकल्पिक maptype पैरामीटर का इस्तेमाल किया गया है:

https://www.google.com/maps/embed/v1/view
  ?key=YOUR_API_KEY
  &center=-33.8569,151.2152
  &zoom=18
  &maptype=satellite

इन पैरामीटर का इस्तेमाल किया जा सकता है:

directions मोड

इस उदाहरण में, टोल और हाइवे को शामिल करते हुए ओस्लो और टेलीमार्क, नॉर्वे के बीच की दूरी, दूरी, और यात्रा में लगने वाला समय दिखाने के लिए, directions मोड का इस्तेमाल किया गया है.

https://www.google.com/maps/embed/v1/directions
  ?key=YOUR_API_KEY
  &origin=Oslo+Norway
  &destination=Telemark+Norway
  &avoid=tolls|highways

इन पैरामीटर का इस्तेमाल किया जा सकता है:

streetview मोड

Maps Embed API की मदद से, Street View की तस्वीरों को इसके कवरेज एरिया में तय की गई जगहों से इंटरैक्टिव पैनोरामा के तौर पर दिखाया जा सकता है. उपयोगकर्ता के योगदान से मिले फ़ोटोस्फ़ीयर और स्ट्रीट व्यू के खास कलेक्शन भी उपलब्ध हैं.

हर Street View पैनोरामा, एक जगह से पूरा 360 डिग्री व्यू देता है. इमेज में 360 डिग्री हॉरिज़ॉन्टल व्यू (पूरा रैप-अराउंड) और 180 डिग्री वर्टिकल व्यू (सीधे ऊपर से सीधे नीचे) होता है. streetview मोड ऐसा व्यूअर उपलब्ध कराता है जो पाए जाने वाले पैनोरामा को एक स्फ़ीयर के रूप में रेंडर करता है. इस व्यू के बीच में कैमरा होता है. कैमरे में बदलाव करके, ज़ूम और ओरिएंटेशन कंट्रोल किया जा सकता है.

इस streetview मोड का पैनोरामा देखें:

https://www.google.com/maps/embed/v1/streetview
  ?key=YOUR_API_KEY
  &location=46.414382,10.013988
  &heading=210
  &pitch=10
  &fov=35

इनमें से कोई एक यूआरएल पैरामीटर ज़रूरी है:

• location अक्षांश और देशांतर को कॉमा लगाकर अलग किए गए मानों (46.414382,10.013988) के रूप में स्वीकार करता है. एपीआई इस जगह के सबसे नज़दीकी पैनोरामा की फ़ोटो दिखाएगा. Street View की तस्वीरें समय-समय पर रीफ़्रेश होती रहती हैं. साथ ही, हर बार फ़ोटो की अलग-अलग पोज़िशन से फ़ोटो ली जा सकती हैं. इसलिए, हो सकता है कि अपडेट होने पर आपकी जगह की जानकारी किसी दूसरे पैनोरामा में बदल जाए.

• pano एक खास पैनोरामा आईडी है. अगर आपने pano तय किया है, तो location भी तय किया जा सकता है. location का इस्तेमाल सिर्फ़ तब किया जाएगा, जब एपीआई को पैनोरामा आईडी नहीं मिल पाएगा.

ये यूआरएल पैरामीटर ज़रूरी नहीं हैं:

search मोड

Search मोड, मैप वाले किसी इलाके में की गई खोज के नतीजे दिखाता है. हमारा सुझाव है कि आप खोज के लिए एक जगह तय करें. इसके लिए, खोज के लिए इस्तेमाल हुए शब्द (record+stores+in+Seattle) में जगह की जानकारी शामिल करें या खोज को सीमित करने के लिए, center और zoom पैरामीटर शामिल करें.

https://www.google.com/maps/embed/v1/search
  ?key=YOUR_API_KEY
  &q=record+stores+in+Seattle

इन पैरामीटर का इस्तेमाल किया जा सकता है:

जगह के आईडी पैरामीटर

Maps Embed API किसी जगह का नाम या पता देने के बजाय, प्लेस आईडी इस्तेमाल करने की सुविधा देता है. जगह के आईडी किसी जगह की खास पहचान करने का स्थायी तरीका है. ज़्यादा जानकारी के लिए, Google Places API दस्तावेज़ देखें.

Maps Embed API, इन यूआरएल पैरामीटर के लिए जगह के आईडी स्वीकार करता है:

• q
• origin
• destination
• waypoints

जगह के आईडी का इस्तेमाल करने के लिए, आपको पहले प्रीफ़िक्स place_id: जोड़ना होगा. यहां दिए गए कोड में, निर्देश के लिए अनुरोध करने का ऑरिजिन के तौर पर न्यूयॉर्क सिटी हॉल बताया गया है: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8.

• radius मीटर में बताई गई एक दायरा सेट करता है, जिसमें दिए गए अक्षांश और देशांतर के हिसाब से पैनोरामा खोजना होता है. मान्य वैल्यू, गैर-ऋणात्मक पूर्णांक होते हैं. डिफ़ॉल्ट वैल्यू 50 है.

• source, Street View में की गई खोजों को चुनिंदा सोर्स तक सीमित करता है. मान्य मान हैं:

  • default, Street View के लिए डिफ़ॉल्ट सोर्स का इस्तेमाल करता है. ये खोज सिर्फ़ चुनिंदा सोर्स तक ही सीमित नहीं हैं.
  • outdoor, खोजों को आउटडोर कलेक्शन तक सीमित करता है. इनडोर कलेक्शन को खोज के नतीजों में शामिल नहीं किया जाता. ध्यान दें कि हो सकता है कि बताई गई जगह के लिए आउटडोर पैनोरामा मौजूद न हों. यह भी ध्यान रखें कि खोज के नतीजों में सिर्फ़ पैनोरामा दिखते हैं, ताकि यह पता लगाया जा सके कि वे अंदर हैं या बाहर. उदाहरण के लिए, PhotoSpheres वाले नतीजे नहीं लौटाए जाते हैं, क्योंकि उनके बारे में पता नहीं होता कि वे घर के अंदर हैं या बाहर.