एक मैप जोड़ें

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

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 एट्रिब्यूट की वैल्यू के तौर पर सेट करें. आईफ़्रेम के height और width एट्रिब्यूट का इस्तेमाल करके, मैप के साइज़ को कंट्रोल करें. उदाहरण के लिए:

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

ऊपर दिए गए iframe के सैंपल में, इन अतिरिक्त प्रॉपर्टी का इस्तेमाल किया गया है:

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

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

रेफ़रर यूआरएल की जानकारी और एपीआई पासकोड से जुड़ी पाबंदियां

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

• strict-origin-when-cross-origin (सुझाया गया): यह विकल्प चुनने पर, Google को सिर्फ़ आपका बेस डोमेन (जैसे, https://example.com/) भेजा जाता है. इससे आपके पेज के पाथ की जानकारी निजी रहती है. साथ ही, एपीआई पासकोड पर लगाई गई पाबंदियां भी काम करती हैं.
• no-referrer-when-downgrade (लेगसी): यह पूरे यूआरएल को भेजता है.इसमें पेज के पाथ और क्वेरी पैरामीटर भी शामिल होते हैं. उदाहरण के लिए, https://example.com/contact?user=123.

Referrer-Policy हेडर के बारे में ज़्यादा जानें.

मैप मोड चुनना

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

• 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 के खास कलेक्शन भी उपलब्ध हैं.

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