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

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

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" प्रॉपर्टी मैप के चारों ओर मौजूद iframe बॉर्डर.
• 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 पैरामीटर का इस्तेमाल किया गया है. हालांकि, 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 का इस्तेमाल नहीं किया जा सकता, क्योंकि इसकी जानकारी नहीं है चाहे वे घर के अंदर हों या बाहर.