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

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

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 प्रॉपर्टी, जिसकी मदद से मैप के कुछ हिस्सों को फ़ुल स्क्रीन में देखा जा सकता है.
• 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, खोज को सिर्फ़ आउटडोर कलेक्शन तक सीमित करता है. इनडोर इकट्ठा किए गए आइटम, खोज के नतीजों में शामिल नहीं किए जाते. ध्यान दें कि बताई गई जगह के लिए, आउटडोर पैनोरमा मौजूद न हों. यह भी ध्यान दें कि खोज के नतीजों में सिर्फ़ ऐसे पैनोरमा दिखते हैं जिनसे यह पता लगाया जा सकता है कि वे इनडोर हैं या आउटडोर. उदाहरण के लिए, फ़ोटोस्फ़ीर की जानकारी नहीं मिलती, क्योंकि यह पता नहीं चलता कि वे इनडोर हैं या आउटडोर.