इस पेज का अनुवाद Cloud Translation API से किया गया है.

मैप किस तरह के हैं

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

इस दस्तावेज़ में उन मैप के बारे में बताया गया है जिन्हें Maps JavaScript एपीआई का इस्तेमाल करके दिखाया जा सकता है. एपीआई, इन मैप से जुड़ी जानकारी को होल्ड करने के लिए, MapType ऑब्जेक्ट का इस्तेमाल करता है. MapType एक ऐसा इंटरफ़ेस है जो मैप टाइलों को दिखाने और उनके इस्तेमाल के बारे में बताता है. साथ ही, यह स्क्रीन के कोऑर्डिनेट से दुनिया के निर्देशांकों (मैप पर) में निर्देशांक सिस्टम के अनुवाद को दिखाता है. हर एक MapType में कुछ ऐसे तरीके होने चाहिए जिनकी मदद से, टाइलों को वापस पाया जा सके और उन्हें वापस लाया जा सके. साथ ही, हर प्रॉपर्टी में अपना व्यवहार दिखाने के लिए अलग-अलग प्रॉपर्टी होनी चाहिए.

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

बुनियादी मैप किस तरह का है

Maps JavaScript API में, चार तरह के मैप उपलब्ध होते हैं. Maps पर JavaScript JavaScript एपीआई की अन्य सुविधाओं के साथ-साथ, "पेंट की गई" मशहूर "मैप" टाइलों के अलावा, इस तरह के मैप मौजूद हैं.

मैप JavaScript API में, नीचे दिए गए मैप टाइप उपलब्ध हैं:

roadmap में डिफ़ॉल्ट रोड मैप व्यू दिखता है. यह डिफ़ॉल्ट मैप टाइप है.
satellite में, Google Earth की सैटलाइट इमेज दिखती हैं.
hybrid सामान्य और सैटलाइट व्यू का मिला-जुला व्यू दिखाता है.
terrain, इलाके की जानकारी के आधार पर मैप दिखाता है.

Map में mapTypeId प्रॉपर्टी सेट करके, मैप ऑब्जेक्ट में बदलाव किया जा सकता है. इसके लिए, कंस्ट्रक्टर में Map options ऑब्जेक्ट को सेट किया जा सकता है या मैप के setMapTypeId() तरीके को कॉल किया जा सकता है. mapTypeID प्रॉपर्टी डिफ़ॉल्ट रूप से roadmap पर सेट होती है.

निर्माण के समय mapTypeId सेट करना:

var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
  zoom: 8,
  center: myLatlng,
  mapTypeId: 'satellite'
};
var map = new google.maps.Map(document.getElementById('map'),
    mapOptions);

डाइनैमिक तौर पर mapTypeId में बदलाव करना:

map.setMapTypeId('terrain');

ध्यान दें कि आप सीधे मैप का मैप टाइप सेट नहीं करते हैं, लेकिन इसके बजाय mapTypeId को किसी आइडेंटिफ़ायर का इस्तेमाल करके MapType का रेफ़रंस देने के लिए सेट करें. Maps JavaScript एपीआई, इन पहचान फ़ाइलों को मैनेज करने के लिए, मैप टाइप रजिस्ट्री का इस्तेमाल करता है. इसके बारे में नीचे बताया गया है.

45° की तस्वीरें

Maps JavaScript एपीआई, चुनिंदा जगहों के लिए खास 45° वाली तस्वीरें दिखाता है. हाई-रिज़ॉल्यूशन वाली तस्वीरों की मदद से, हर कार्डिनल दिशा के लिए व्यू मिलता है. (उत्तरी, दक्षिण, पूर्व, पश्चिम). ये इमेज, मैप के उन लेवल के लिए ज़्यादा ज़ूम लेवल पर उपलब्ध होती हैं जिन पर यह सुविधा काम करती है.

नीचे दी गई इमेज में न्यूयॉर्क शहर का 45° व्यू दिखाया गया है:

satellite और hybrid मैप टाइप 15 और उससे ज़्यादा ज़ूम लेवल पर उपलब्ध होने पर, 45° वाली तस्वीरों का इस्तेमाल कर सकते हैं. अगर उपयोगकर्ता ऐसी जगह पर ज़ूम इन करता है जहां ऐसी तस्वीरें मौजूद हैं, तो इस तरह के मैप अपने-आप उनके व्यू को इस तरह बदल देते हैं:

सैटलाइट या हाइब्रिड तस्वीरों को 45° व्यू में बदल दिया जाता है. यह सुविधा, मौजूदा जगह पर आधारित होती है. डिफ़ॉल्ट रूप से, इस तरह के व्यू उत्तर की ओर होते हैं. अगर उपयोगकर्ता ज़ूम आउट करता है, तो डिफ़ॉल्ट सैटलाइट या हाइब्रिड इमेज फिर से दिखने लगती है. यह व्यवहार ज़ूम के लेवल और tilt के मान के हिसाब से अलग-अलग होता है:

ज़ूम लेवल 12 और 18 के बीच टॉप-डाउन बेसमैप (0°) डिफ़ॉल्ट रूप से तब तक दिखता है, जब तक tilt को 45 पर सेट नहीं किया जाता.
जब तक tilt को 0 पर सेट नहीं किया जाता, तब तक 18 या उससे ज़्यादा के ज़ूम लेवल पर 45° बेसमैप डिसप्ले दिखता है.

घुमाने का कंट्रोल दिखने लगता है. घुमाने के कंट्रोल से ऐसे विकल्प मिलते हैं जिनसे उपयोगकर्ता, स्क्रीन को तिरछा कर सकते हैं. साथ ही, व्यू को किसी भी दिशा में 90° तक घुमा सकते हैं. घुमाने के कंट्रोल को छिपाने के लिए, rotateControl को false पर सेट करें.

किसी मैप के प्रकार को 45° दिखाने पर ज़ूम आउट करने से ये मूल बदलाव फिर से दिखने लगते हैं.

45° वाली इमेज को चालू और बंद करना

Map ऑब्जेक्ट को setTilt(0) पर कॉल करके, 45° वाली तस्वीरों के संग्रह को बंद किया जा सकता है. इस तरह के मैप पर 45° वाली तस्वीरें चालू करने के लिए, setTilt(45) को कॉल करें. Map का getTilt() तरीका हमेशा मैप पर दिखाए गए मौजूदा tilt को दिखाएगा. अगर आपने मैप पर tilt सेट किया है और बाद में उस tilt को हटाया है, तो मैप का getTilt() तरीका 0 दिखाएगा.

अहम जानकारी: 45° वाली इमेज सिर्फ़ रास्टर मैप पर काम करती है. इस इमेज को वेक्टर मैप के साथ इस्तेमाल नहीं किया जा सकता.

नीचे दिए गए उदाहरण में न्यूयॉर्क शहर का 45° व्यू दिखाया गया है:

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: { lat: 40.76, lng: -73.983 },
      zoom: 15,
      mapTypeId: "satellite",
    }
  );

  map.setTilt(45);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40.76, lng: -73.983 },
    zoom: 15,
    mapTypeId: "satellite",
  });

  map.setTilt(45);
}

window.initMap = initMap;index.js

उदाहरण देखें

सैंपल आज़माएं

JSFiddle.net CodeSandbox.io Google Cloud Shell

उदाहरण देखें.

45° इमेज घुमाएं

45° वाली तस्वीरों में असल में हर कार्डिनल दिशा के लिए इमेज शामिल होती हैं (उत्तर, दक्षिण, पूर्व, पश्चिम). जब आपका मैप, 45° वाली इमेज दिखा रहा हो, तो आप Map ऑब्जेक्ट पर setHeading() को कॉल करके, नॉर्थ से डिग्री के तौर पर दिखाई गई वैल्यू को पास करके, उसके मुख्य निर्देशों में से किसी एक के लिए इमेज दिखा सकते हैं.

नीचे दिए गए उदाहरण में, एरियल मैप दिखाया गया है. बटन पर क्लिक करने पर, यह हर तीन सेकंड में मैप के अपने-आप घूमने लगता है:

TypeScript

let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    center: { lat: 40.76, lng: -73.983 },
    zoom: 15,
    mapTypeId: "satellite",
    heading: 90,
    tilt: 45,
  });

  // add listener to button
  document.getElementById("rotate")!.addEventListener("click", autoRotate);
}

function rotate90(): void {
  const heading = map.getHeading() || 0;

  map.setHeading(heading + 90);
}

function autoRotate(): void {
  // Determine if we're showing aerial imagery.
  if (map.getTilt() !== 0) {
    window.setInterval(rotate90, 3000);
  }
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40.76, lng: -73.983 },
    zoom: 15,
    mapTypeId: "satellite",
    heading: 90,
    tilt: 45,
  });
  // add listener to button
  document.getElementById("rotate").addEventListener("click", autoRotate);
}

function rotate90() {
  const heading = map.getHeading() || 0;

  map.setHeading(heading + 90);
}

function autoRotate() {
  // Determine if we're showing aerial imagery.
  if (map.getTilt() !== 0) {
    window.setInterval(rotate90, 3000);
  }
}

window.initMap = initMap;index.js

उदाहरण देखें

सैंपल आज़माएं

JSFiddle.net CodeSandbox.io Google Cloud Shell

उदाहरण देखें.

मैप टाइप रजिस्ट्री में बदलाव करना

मैप का mapTypeId एक स्ट्रिंग आइडेंटिफ़ायर है. इसका इस्तेमाल MapType को यूनीक वैल्यू के साथ जोड़ने के लिए किया जाता है. हर Map ऑब्जेक्ट एक MapTypeRegistry रखता है, जिसमें उस मैप के लिए उपलब्ध MapType का संग्रह होता है. इस रजिस्ट्री का इस्तेमाल उन मैप को चुनने के लिए किया जाता है जो Maps के MapType कंट्रोल में मौजूद हैं, उदाहरण के लिए.

आप सीधे मैप प्रकार रजिस्ट्री से नहीं पढ़ते. इसके बजाय, कस्टम मैप टाइप जोड़कर रजिस्ट्री में बदलाव करें और उन्हें अपनी पसंद के स्ट्रिंग आइडेंटिफ़ायर से जोड़ें. बुनियादी मैप में बदलाव नहीं किया जा सकता या उसे बदला नहीं जा सकता. हालांकि, मैप के mapTypeControlOptions से जुड़े होने का तरीका बदलकर, उन्हें मैप से हटाया जा सकता है.

यह कोड, मैप के mapTypeControlOptions में सिर्फ़ दो मैप टाइप दिखाने के लिए, मैप सेट करता है. साथ ही, रजिस्ट्री में बदलाव करता है, ताकि इस आइडेंटिफ़ायर के साथ असोसिएशन को MapType इंटरफ़ेस लागू किया जा सके.

// Modify the control to only display two maptypes, the
// default ROADMAP and the custom 'mymap'.
// Note that because this is an association, we
// don't need to modify the MapTypeRegistry beforehand.

var MY_MAPTYPE_ID = 'mymaps';

var mapOptions = {
  zoom: 12,
  center: brooklyn,
  mapTypeControlOptions: {
     mapTypeIds: ['roadmap', MY_MAPTYPE_ID]
  },
  mapTypeId: MY_MAPTYPE_ID
};

// Create our map. This creation will implicitly create a
// map type registry.
map = new google.maps.Map(document.getElementById('map'),
    mapOptions);

// Create your custom map type using your own code.
// (See below.)
var myMapType = new MyMapType();

// Set the registry to associate 'mymap' with the
// custom map type we created, and set the map to
// show that map type.
map.mapTypes.set(MY_MAPTYPE_ID, myMapType);

स्टाइल किए गए मैप

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

StyledMapType के बारे में ज़्यादा जानकारी के लिए, स्टाइल वाले मैप की गाइड देखें.

कस्टम मैप टाइप

Maps JavaScript एपीआई, अपनी पसंद के हिसाब से बनाए गए मैप को दिखाने और उन्हें मैनेज करने की सुविधा देता है. इससे, आप खुद ही अपनी मैप तस्वीरों या टाइल ओवरले को लागू कर सकते हैं.

मैप JavaScript एपीआई में, मैप पर कई तरह के विकल्प लागू किए जा सकते हैं:

स्टैंडर्ड टाइल सेट में ऐसी इमेज होती हैं जिन्हें मिलाकर पूरा मैप बनाया जाता है. इन टाइल सेट को बेस मैप टाइप के तौर पर भी जाना जाता है. ये मैप टाइप, मौजूदा डिफ़ॉल्ट मैप टाइप की तरह काम करते हैं: roadmap, satellite, hybrid, और terrain. अपने पसंद के मुताबिक बनाए गए मैप के टाइप को मैप के mapTypes कलेक्शन में जोड़ा जा सकता है. ऐसा करने से, Maps JavaScript एपीआई के यूज़र इंटरफ़ेस (यूआई) को आपके पसंद के मुताबिक बनाए गए मैप के टाइप को स्टैंडर्ड मैप टाइप समझने की अनुमति मिलेगी. उदाहरण के लिए, इसे मैप टाइप कंट्रोल में शामिल करके.
इमेज टाइल ओवरले, जो मौजूदा आधार मैप टाइप के ऊपर दिखते हैं. आम तौर पर, इस तरह के मैप का इस्तेमाल मौजूदा मैप को बेहतर बनाने के लिए किया जाता है. इससे दूसरी जानकारी भी दिखाई जा सकती है और अक्सर कुछ खास जगहों और/या ज़ूम लेवल तक ही सीमित रहता है. ध्यान रखें कि ये टाइल पारदर्शी हो सकती हैं. इससे मौजूदा मैप में सुविधाएं जोड़ी जा सकती हैं.
बिना इमेज वाले मैप टाइप. इनकी मदद से, मैप की जानकारी को उसके सबसे बुनियादी लेवल पर दिखाया जा सकता है.

इनमें से हर विकल्प ऐसी क्लास बनाने पर निर्भर करता है जो MapType इंटरफ़ेस को लागू करती हो. इसके अलावा, ImageMapType क्लास में कुछ बिल्ट-इन बिहेवियर होते हैं, ताकि तस्वीरों के मैप टाइप आसानी से बनाए जा सकें.

`MapType` इंटरफ़ेस

MapType को लागू करने वाली क्लास बनाने से पहले, यह समझना ज़रूरी है कि Google Maps, निर्देशांक कैसे तय करता है और यह तय करता है कि मैप के कौनसे हिस्से दिखाने हैं. आपको किसी भी बेस या ओवरले मैप टाइप के लिए, एक जैसा लॉजिक लागू करना होगा. मैप और टाइल को मैप करने की गाइड पढ़ें.

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

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

MapType इंटरफ़ेस को लागू करने वाली क्लास के लिए ज़रूरी है कि आप इन प्रॉपर्टी के बारे में बताएं और इन्हें भरें:

tileSize (ज़रूरी है) टाइल के साइज़ का टाइप बताता है (google.maps.Size का टाइप). साइज़ आयताकार होने चाहिए. हालांकि, उनका स्क्वेयर नहीं होना चाहिए.
maxZoom (ज़रूरी है) इस मैप टाइप की टाइल दिखाने के लिए, ज़्यादा से ज़्यादा ज़ूम लेवल की जानकारी देता है.
minZoom (ज़रूरी नहीं) इस मैप टाइप की टाइल दिखाने के लिए, कम से कम ज़ूम लेवल की जानकारी देता है. डिफ़ॉल्ट रूप से, यह वैल्यू 0 को दिखाती है कि ज़ूम का कम से कम लेवल मौजूद नहीं है.
name (ज़रूरी नहीं) इस मैप टाइप का नाम बताता है. यह प्रॉपर्टी सिर्फ़ तब ज़रूरी होती है, जब आप इस तरह के मैप को MapType कंट्रोल में चुनने की अनुमति देना चाहें. (नीचे, MapType कंट्रोल जोड़ना देखें.)
alt (ज़रूरी नहीं है) इस मैप टाइप के लिए वैकल्पिक टेक्स्ट दिखाता है, जिसे होवर टेक्स्ट में दिखाया जाता है. यह प्रॉपर्टी सिर्फ़ तब ज़रूरी होती है, जब आप इस मैप टाइप को MapType कंट्रोल में चुनने लायक बनाना चाहते हों. (नीचे, MapType कंट्रोल जोड़ना देखें.)

इसके अलावा, MapType इंटरफ़ेस को लागू करने वाली क्लास को ये तरीके लागू करने होंगे:

जब भी एपीआई यह तय करता है कि दिए गए व्यूपोर्ट के लिए, मैप को नई टाइल दिखाने की ज़रूरत है, तब getTile() को कॉल किया जाता है. getTile() तरीके में यहां दिए गए हस्ताक्षर होने चाहिए:

getTile(tileCoord:Point,zoom:number,ownerDocument:Document):Node

एपीआई तय करता है कि उसे MapType के tileSize, minZoom, और maxZoom प्रॉपर्टी के साथ-साथ मैप के मौजूदा व्यूपोर्ट और ज़ूम लेवल के हिसाब से getTile() को कॉल करना है या नहीं. पास किए गए कोऑर्डिनेट, ज़ूम लेवल, और DOM एलिमेंट के हिसाब से, इस तरीके के लिए हैंडलर को कोई एचटीएमएल एलिमेंट दिखाना चाहिए, जिस पर टाइल इमेज को जोड़ा जाए.
(ज़रूरी नहीं) जब भी एपीआई यह तय करता है कि व्यू से बाहर निकलने पर टाइल को हटा देना चाहिए, तब releaseTile() को कॉल किया जाता है. इस तरीके में नीचे दिया गया हस्ताक्षर होना चाहिए:

releaseTile(tile:Node)

आम तौर पर, आपको ऐसे मैप से हटा दिए गए एलिमेंट को हटा देना चाहिए जो मैप टाइल से जुड़े थे. उदाहरण के लिए, अगर आपने टाइल सुनने वाले मैप को मैप करने के लिए इवेंट सुनने वालों को अटैच किया है, तो उन्हें यहां हटाएं.

getTile() तरीके से यह तय होता है कि किसी दिए गए व्यूपोर्ट में कौनसी टाइल लोड करनी है.

बुनियादी मैप किस तरह का है

इस तरह से बनाए गए मैप टाइप अलग से हो सकते हैं या उन्हें दूसरे तरह के मैप के साथ मिलाया जा सकता है. अलग-अलग तरह के मैप को बेस मैप टाइप कहा जाता है. हो सकता है कि आप एपीआई को इस तरह के कस्टम MapType को इस्तेमाल करना चाहें, जैसा कि किसी अन्य मौजूदा बेस मैप टाइप (ROADMAP, TERRAIN वगैरह) के साथ किया जाता है. ऐसा करने के लिए, अपनी कस्टम MapType को Map की mapTypes प्रॉपर्टी में जोड़ें. यह प्रॉपर्टी MapTypeRegistry टाइप की है.

नीचे दिया गया कोड, MapType को टाइल के निर्देशांक दिखाने में मदद करता है. साथ ही, टाइल की आउटलाइन बनाता है:

TypeScript

/*
 * This demo demonstrates how to replace default map tiles with custom imagery.
 * In this case, the CoordMapType displays gray tiles annotated with the tile
 * coordinates.
 *
 * Try panning and zooming the map to see how the coordinates change.
 */

class CoordMapType {
  tileSize: google.maps.Size;
  maxZoom = 19;
  name = "Tile #s";
  alt = "Tile Coordinate Map Type";

  constructor(tileSize: google.maps.Size) {
    this.tileSize = tileSize;
  }

  getTile(
    coord: google.maps.Point,
    zoom: number,
    ownerDocument: Document
  ): HTMLElement {
    const div = ownerDocument.createElement("div");

    div.innerHTML = String(coord);
    div.style.width = this.tileSize.width + "px";
    div.style.height = this.tileSize.height + "px";
    div.style.fontSize = "10";
    div.style.borderStyle = "solid";
    div.style.borderWidth = "1px";
    div.style.borderColor = "#AAAAAA";
    div.style.backgroundColor = "#E5E3DF";
    return div;
  }

  releaseTile(tile: HTMLElement): void {}
}

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 10,
      center: { lat: 41.85, lng: -87.65 },
      streetViewControl: false,
      mapTypeId: "coordinate",
      mapTypeControlOptions: {
        mapTypeIds: ["coordinate", "roadmap"],
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      },
    }
  );

  map.addListener("maptypeid_changed", () => {
    const showStreetViewControl =
      (map.getMapTypeId() as string) !== "coordinate";

    map.setOptions({
      streetViewControl: showStreetViewControl,
    });
  });

  // Now attach the coordinate map type to the map's registry.
  map.mapTypes.set(
    "coordinate",
    new CoordMapType(new google.maps.Size(256, 256))
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

/*
 * This demo demonstrates how to replace default map tiles with custom imagery.
 * In this case, the CoordMapType displays gray tiles annotated with the tile
 * coordinates.
 *
 * Try panning and zooming the map to see how the coordinates change.
 */
class CoordMapType {
  tileSize;
  maxZoom = 19;
  name = "Tile #s";
  alt = "Tile Coordinate Map Type";
  constructor(tileSize) {
    this.tileSize = tileSize;
  }
  getTile(coord, zoom, ownerDocument) {
    const div = ownerDocument.createElement("div");

    div.innerHTML = String(coord);
    div.style.width = this.tileSize.width + "px";
    div.style.height = this.tileSize.height + "px";
    div.style.fontSize = "10";
    div.style.borderStyle = "solid";
    div.style.borderWidth = "1px";
    div.style.borderColor = "#AAAAAA";
    div.style.backgroundColor = "#E5E3DF";
    return div;
  }
  releaseTile(tile) {}
}

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: { lat: 41.85, lng: -87.65 },
    streetViewControl: false,
    mapTypeId: "coordinate",
    mapTypeControlOptions: {
      mapTypeIds: ["coordinate", "roadmap"],
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
    },
  });

  map.addListener("maptypeid_changed", () => {
    const showStreetViewControl = map.getMapTypeId() !== "coordinate";

    map.setOptions({
      streetViewControl: showStreetViewControl,
    });
  });
  // Now attach the coordinate map type to the map's registry.
  map.mapTypes.set(
    "coordinate",
    new CoordMapType(new google.maps.Size(256, 256))
  );
}

window.initMap = initMap;index.js

उदाहरण देखें

सैंपल आज़माएं

JSFiddle.net CodeSandbox.io Google Cloud Shell

ओवरले मैप प्रकार

कुछ तरह के मैप, मौजूदा मैप टाइप पर काम करने के लिए डिज़ाइन किए गए हैं. इस तरह के मैप में, पारदर्शी लेयर मौजूद हो सकती हैं, जो उपयोगकर्ता की पसंदीदा जगहों के बारे में बताती हों या उपयोगकर्ताओं को अतिरिक्त डेटा दिखाती हैं.

इन मामलों में, आप इस तरह का मैप नहीं चाहते कि मैप एक अलग इकाई हो और ओवरले हो. ऐसा करने के लिए, Map की overlayMapTypes प्रॉपर्टी का इस्तेमाल करके, किसी मौजूदा MapType में मैप टाइप जोड़ा जा सकता है. इस प्रॉपर्टी में, MapType में से MVCArray मौजूद है. सभी तरह के मैप (बेस और ओवरले) को mapPane लेयर में रेंडर किया जाता है. ये ओवरले मैप, बेस मैप में सबसे ऊपर दिखेंगे, जिसके क्रम में वे Map.overlayMapTypes ऐरे में दिखते हैं. यह इंडेक्स के ज़्यादा वैल्यू वाले ओवरले पर कम इंडेक्स वैल्यू वाले ओवरले के सामने दिखता है.

यह उदाहरण पिछले वाले से मिलता-जुलता है, सिवाय इसके कि हमने ROADMAP मैप टाइप के ऊपर एक टाइल ओवरले MapType बनाया है:

TypeScript

/*
 * This demo illustrates the coordinate system used to display map tiles in the
 * API.
 *
 * Tiles in Google Maps are numbered from the same origin as that for
 * pixels. For Google's implementation of the Mercator projection, the origin
 * tile is always at the northwest corner of the map, with x values increasing
 * from west to east and y values increasing from north to south.
 *
 * Try panning and zooming the map to see how the coordinates change.
 */

class CoordMapType implements google.maps.MapType {
  tileSize: google.maps.Size;
  alt: string|null = null;
  maxZoom: number = 17;
  minZoom: number = 0;
  name: string|null = null;
  projection: google.maps.Projection|null = null;
  radius: number = 6378137;

  constructor(tileSize: google.maps.Size) {
    this.tileSize = tileSize;
  }
  getTile(
    coord: google.maps.Point,
    zoom: number,
    ownerDocument: Document
  ): HTMLElement {
    const div = ownerDocument.createElement("div");

    div.innerHTML = String(coord);
    div.style.width = this.tileSize.width + "px";
    div.style.height = this.tileSize.height + "px";
    div.style.fontSize = "10";
    div.style.borderStyle = "solid";
    div.style.borderWidth = "1px";
    div.style.borderColor = "#AAAAAA";
    return div;
  }
  releaseTile(tile: Element): void {}
}

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 10,
      center: { lat: 41.85, lng: -87.65 },
    }
  );

  // Insert this overlay map type as the first overlay map type at
  // position 0. Note that all overlay map types appear on top of
  // their parent base map.
  const coordMapType = new CoordMapType(new google.maps.Size(256, 256))
  map.overlayMapTypes.insertAt(
    0,
    coordMapType
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

/*
 * This demo illustrates the coordinate system used to display map tiles in the
 * API.
 *
 * Tiles in Google Maps are numbered from the same origin as that for
 * pixels. For Google's implementation of the Mercator projection, the origin
 * tile is always at the northwest corner of the map, with x values increasing
 * from west to east and y values increasing from north to south.
 *
 * Try panning and zooming the map to see how the coordinates change.
 */
class CoordMapType {
  tileSize;
  alt = null;
  maxZoom = 17;
  minZoom = 0;
  name = null;
  projection = null;
  radius = 6378137;
  constructor(tileSize) {
    this.tileSize = tileSize;
  }
  getTile(coord, zoom, ownerDocument) {
    const div = ownerDocument.createElement("div");

    div.innerHTML = String(coord);
    div.style.width = this.tileSize.width + "px";
    div.style.height = this.tileSize.height + "px";
    div.style.fontSize = "10";
    div.style.borderStyle = "solid";
    div.style.borderWidth = "1px";
    div.style.borderColor = "#AAAAAA";
    return div;
  }
  releaseTile(tile) {}
}

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: { lat: 41.85, lng: -87.65 },
  });
  // Insert this overlay map type as the first overlay map type at
  // position 0. Note that all overlay map types appear on top of
  // their parent base map.
  const coordMapType = new CoordMapType(new google.maps.Size(256, 256));

  map.overlayMapTypes.insertAt(0, coordMapType);
}

window.initMap = initMap;index.js

उदाहरण देखें

सैंपल आज़माएं

JSFiddle.net CodeSandbox.io Google Cloud Shell

इमेज मैप के टाइप

बुनियादी मैप के तौर पर MapType को लागू करने में समय लग सकता है और इसमें ज़्यादा समय लग सकता है. एपीआई एक खास क्लास उपलब्ध कराता है, जो सबसे सामान्य मैप टाइप के लिए MapType इंटरफ़ेस को लागू करती है: ऐसे मैप टाइप जिनमें एक इमेज वाली फ़ाइलें होती हैं.

इस क्लास को ImageMapType ऑब्जेक्ट को बनाने के लिए, ImageMapTypeOptions ऑब्जेक्ट की खास बातों का इस्तेमाल करके बनाया गया है. इन ऑब्जेक्ट में ये ज़रूरी प्रॉपर्टी शामिल हैं:

tileSize (ज़रूरी है) टाइल के साइज़ का टाइप बताता है (google.maps.Size का टाइप). साइज़ आयताकार होने चाहिए. हालांकि, उनका स्क्वेयर नहीं होना चाहिए.
getTileUrl (ज़रूरी है) फ़ंक्शन के बारे में बताता है, जो आम तौर पर इनलाइन फ़ंक्शन लिटरल के तौर पर दिया जाता है. इसके लिए, दिए गए वर्ल्ड कोऑर्डिनेट और ज़ूम लेवल के आधार पर, सही इमेज टाइल को चुना जाता है.

यह कोड Google की मून टाइल का इस्तेमाल करके, बेसिक ImageMapType को लागू करता है. उदाहरण के लिए, नॉर्मलाइज़ेशन फ़ंक्शन का इस्तेमाल करके, यह पक्का किया जाता है कि टाइल्स x-ऐक्सिस पर दिखें, लेकिन मैप के y-ऐक्सिस पर नहीं.

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: { lat: 0, lng: 0 },
      zoom: 1,
      streetViewControl: false,
      mapTypeControlOptions: {
        mapTypeIds: ["moon"],
      },
    }
  );

  const moonMapType = new google.maps.ImageMapType({
    getTileUrl: function (coord, zoom): string {
      const normalizedCoord = getNormalizedCoord(coord, zoom);

      if (!normalizedCoord) {
        return "";
      }

      const bound = Math.pow(2, zoom);
      return (
        "https://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw" +
        "/" +
        zoom +
        "/" +
        normalizedCoord.x +
        "/" +
        (bound - normalizedCoord.y - 1) +
        ".jpg"
      );
    },
    tileSize: new google.maps.Size(256, 256),
    maxZoom: 9,
    minZoom: 0,
    // @ts-ignore TODO 'radius' does not exist in type 'ImageMapTypeOptions'
    radius: 1738000,
    name: "Moon",
  });

  map.mapTypes.set("moon", moonMapType);
  map.setMapTypeId("moon");
}

// Normalizes the coords that tiles repeat across the x axis (horizontally)
// like the standard Google map tiles.
function getNormalizedCoord(coord, zoom) {
  const y = coord.y;
  let x = coord.x;

  // tile range in one direction range is dependent on zoom level
  // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
  const tileRange = 1 << zoom;

  // don't repeat across y-axis (vertically)
  if (y < 0 || y >= tileRange) {
    return null;
  }

  // repeat across x-axis
  if (x < 0 || x >= tileRange) {
    x = ((x % tileRange) + tileRange) % tileRange;
  }

  return { x: x, y: y };
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 0, lng: 0 },
    zoom: 1,
    streetViewControl: false,
    mapTypeControlOptions: {
      mapTypeIds: ["moon"],
    },
  });
  const moonMapType = new google.maps.ImageMapType({
    getTileUrl: function (coord, zoom) {
      const normalizedCoord = getNormalizedCoord(coord, zoom);

      if (!normalizedCoord) {
        return "";
      }

      const bound = Math.pow(2, zoom);
      return (
        "https://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw" +
        "/" +
        zoom +
        "/" +
        normalizedCoord.x +
        "/" +
        (bound - normalizedCoord.y - 1) +
        ".jpg"
      );
    },
    tileSize: new google.maps.Size(256, 256),
    maxZoom: 9,
    minZoom: 0,
    // @ts-ignore TODO 'radius' does not exist in type 'ImageMapTypeOptions'
    radius: 1738000,
    name: "Moon",
  });

  map.mapTypes.set("moon", moonMapType);
  map.setMapTypeId("moon");
}

// Normalizes the coords that tiles repeat across the x axis (horizontally)
// like the standard Google map tiles.
function getNormalizedCoord(coord, zoom) {
  const y = coord.y;
  let x = coord.x;
  // tile range in one direction range is dependent on zoom level
  // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
  const tileRange = 1 << zoom;

  // don't repeat across y-axis (vertically)
  if (y < 0 || y >= tileRange) {
    return null;
  }

  // repeat across x-axis
  if (x < 0 || x >= tileRange) {
    x = ((x % tileRange) + tileRange) % tileRange;
  }
  return { x: x, y: y };
}

window.initMap = initMap;index.js

उदाहरण देखें

सैंपल आज़माएं

JSFiddle.net CodeSandbox.io Google Cloud Shell

अनुमान

पृथ्वी, तीन आयामों वाला गोला है, जबकि मैप एक समतल दो आयामी सतह है. Maps JavaScript एपीआई में आपको जो मैप दिखता है वह पृथ्वी के किसी भी फ़्लैट मैप में होता है. इस मैप का एक अनुमान होता है जो समतल जगह पर होता है. इसका मतलब है कि प्रोजेक्ट के अक्षांश और देशांतर वैल्यू को मैप पर, निर्देशांकों के तौर पर मैप किया जा सकता है.

Maps JavaScript API के प्रोजेक्शन को Projection इंटरफ़ेस को लागू करना होगा. Projection लागू करने के लिए, न सिर्फ़ एक कोऑर्डिनेट सिस्टम से दूसरे तक की मैपिंग देना ज़रूरी है, बल्कि दो-दिशाओं वाली मैपिंग भी होनी चाहिए. इसका मतलब है कि आपको यह तय करना होगा कि Earth के निर्देशांकों (LatLng ऑब्जेक्ट) से Projection क्लास के वर्ल्ड कोऑर्डिनेट सिस्टम और Google Maps, Mercator प्रोजेक्शन का इस्तेमाल करके भौगोलिक डेटा से मैप बनाता है और मैप पर मौजूद इवेंट को भौगोलिक निर्देशांक के रूप में बदलता है. इस अनुमान को पाने के लिए, आप Map पर getProjection() को या किसी भी स्टैंडर्ड बेस MapType टाइप पर कॉल कर सकते हैं. ज़्यादातर इस्तेमाल के लिए, यह स्टैंडर्ड Projection काफ़ी होता है, लेकिन आप अपने हिसाब से अनुमान तय और इस्तेमाल भी कर सकते हैं.

प्रोजेक्शन लागू करना

पसंद के मुताबिक प्रोजेक्ट लागू करते समय, आपको कुछ बातें तय करनी होंगी:

अक्षांश और देशांतर निर्देशांकों को कार्टेशियन विमान में मैप करने और इसके उलट दिखाने के लिए फ़ॉर्मूला. (Projection इंटरफ़ेस सिर्फ़ रेक्टैंगल के कोऑर्डिनेट में बदलता है.)
बेस टाइल का साइज़. सभी टाइल आयताकार होने चाहिए.
ज़ूम लेवल 0 पर सेट की गई बेस टाइल का इस्तेमाल करके, मैप का "वर्ल्ड साइज़". ध्यान दें कि ज़ूम 0 वाले एक टाइल वाले मैप के लिए, दुनिया का साइज़ और बेस टाइल का साइज़ एक जैसा है.

अनुमानों में, निर्देशांकों में बदलाव

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

Projection.fromLatLngToPoint() तरीका, LatLng वैल्यू को वर्ल्ड कोऑर्डिनेट में बदलता है. इस तरीके का इस्तेमाल मैप पर ओवरले को सही जगह लगाने के लिए किया जाता है.
Projection.fromPointToLatLng() तरीका, विश्व के शब्द को LatLng मान में बदलता है. इस तरीके का इस्तेमाल मैप पर होने वाले क्लिक जैसे इवेंट को भौगोलिक निर्देशांक में बदलने के लिए किया जाता है.

Google Maps यह मानता है कि अनुमान सही तरह से काम कर रहे हैं.

आम तौर पर, दो मामलों में प्रोजेक्शन का इस्तेमाल किया जा सकता है: दुनिया का मैप बनाने या किसी स्थानीय इलाके का मैप बनाने के लिए. पिछले मामले में, आपको यह पक्का करना होगा कि आपका प्रोजेक्शन सभी देशांतरों के पास सीधा और सामान्य भी हो. कुछ अनुमान (खास तौर पर शंकु के आकार के अनुमान) "स्थानीय तौर पर सामान्य" हो सकते हैं (यानी उत्तर की ओर पॉइंट हो सकते हैं) और हो सकता है कि सही उत्तर से डेटा को हटा दिया जाए. उदाहरण के लिए, मैप को किसी खास देशांतर के हिसाब से रखा गया हो. इस तरह के प्रोजेक्ट का इस्तेमाल स्थानीय तौर पर किया जा सकता है. हालांकि, ध्यान रखें कि प्रोजेक्ट के लिए अनुमान सटीक न हों या उनमें बदलाव हो सकता हो. इसलिए, आपके तय किए गए देशांतर से दूर रहकर और भी साफ़ होता जाएगा.

अनुमान में मैप टाइल चुनने की सुविधा

अनुमानों का इस्तेमाल, सिर्फ़ जगहों या ओवरले की पोज़िशन ढूंढने में नहीं, बल्कि मैप टाइल को सही जगह लगाने के लिए भी किया जाता है. Maps JavaScript API, MapType इंटरफ़ेस का इस्तेमाल करके बुनियादी मैप रेंडर करता है. इसमें मैप के प्रोजेक्शन की पहचान करने के लिए, projection प्रॉपर्टी और मैप के लिए टाइलों को वापस लाने के लिए, टाइल कोऑर्डिनेट वैल्यू के आधार पर दोनों तरीकों का एलान करना चाहिए.getTile() टाइल के निर्देशांक, आपके बेसिक टाइल के साइज़ (आयताकार) और आपके मैप के "दुनिया का साइज़", दोनों पर आधारित होते हैं. यह आपके मैप की दुनिया का पिक्सल लेवल है, जो ज़ूम लेवल पर 0 पर सेट है. (मैप 0 में एक टाइल वाले मैप के लिए, टाइल का साइज़ और दुनिया का साइज़ एक जैसे होते हैं.)

आपके पास MapType की tileSize प्रॉपर्टी में बेस टाइल का साइज़ तय करने का विकल्प होता है. अनुमान के आधार पर, दुनिया भर में इस्तेमाल होने वाली अपनी तस्वीरों को fromLatLngToPoint() और fromPointToLatLng() तरीकों से तय किया जाता है.

इमेज चुनना इन पास की गई वैल्यू पर निर्भर करता है. इसलिए, जिन इमेज को पास किया जाता है उन्हें प्रोग्राम के हिसाब से चुना जा सकता है, क्योंकि उन वैल्यू को पास किया जाता है, जैसे कि map_zoom_tileX_tileY.png.

नीचे दिए गए उदाहरण में, गॉल-पीटर प्रोजेक्शन का इस्तेमाल करके ImageMapType के बारे में बताया गया है:

TypeScript

// This example defines an image map type using the Gall-Peters
// projection.
// https://en.wikipedia.org/wiki/Gall%E2%80%93Peters_projection

function initMap(): void {
  // Create a map. Use the Gall-Peters map type.
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 0,
      center: { lat: 0, lng: 0 },
      mapTypeControl: false,
    }
  );

  initGallPeters();
  map.mapTypes.set("gallPeters", gallPetersMapType);
  map.setMapTypeId("gallPeters");

  // Show the lat and lng under the mouse cursor.
  const coordsDiv = document.getElementById("coords") as HTMLElement;

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(coordsDiv);
  map.addListener("mousemove", (event: google.maps.MapMouseEvent) => {
    coordsDiv.textContent =
      "lat: " +
      Math.round(event.latLng!.lat()) +
      ", " +
      "lng: " +
      Math.round(event.latLng!.lng());
  });

  // Add some markers to the map.
  map.data.setStyle((feature) => {
    return {
      title: feature.getProperty("name"),
      optimized: false,
    };
  });
  map.data.addGeoJson(cities);
}

let gallPetersMapType;

function initGallPeters() {
  const GALL_PETERS_RANGE_X = 800;
  const GALL_PETERS_RANGE_Y = 512;

  // Fetch Gall-Peters tiles stored locally on our server.
  gallPetersMapType = new google.maps.ImageMapType({
    getTileUrl: function (coord, zoom) {
      const scale = 1 << zoom;

      // Wrap tiles horizontally.
      const x = ((coord.x % scale) + scale) % scale;

      // Don't wrap tiles vertically.
      const y = coord.y;

      if (y < 0 || y >= scale) return "";

      return (
        "https://developers.google.com/maps/documentation/" +
        "javascript/examples/full/images/gall-peters_" +
        zoom +
        "_" +
        x +
        "_" +
        y +
        ".png"
      );
    },
    tileSize: new google.maps.Size(GALL_PETERS_RANGE_X, GALL_PETERS_RANGE_Y),
    minZoom: 0,
    maxZoom: 1,
    name: "Gall-Peters",
  });

  // Describe the Gall-Peters projection used by these tiles.
  gallPetersMapType.projection = {
    fromLatLngToPoint: function (latLng) {
      const latRadians = (latLng.lat() * Math.PI) / 180;
      return new google.maps.Point(
        GALL_PETERS_RANGE_X * (0.5 + latLng.lng() / 360),
        GALL_PETERS_RANGE_Y * (0.5 - 0.5 * Math.sin(latRadians))
      );
    },
    fromPointToLatLng: function (point, noWrap) {
      const x = point.x / GALL_PETERS_RANGE_X;
      const y = Math.max(0, Math.min(1, point.y / GALL_PETERS_RANGE_Y));

      return new google.maps.LatLng(
        (Math.asin(1 - 2 * y) * 180) / Math.PI,
        -180 + 360 * x,
        noWrap
      );
    },
  };
}

// GeoJSON, describing the locations and names of some cities.
const cities = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-87.65, 41.85] },
      properties: { name: "Chicago" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-149.9, 61.218] },
      properties: { name: "Anchorage" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-99.127, 19.427] },
      properties: { name: "Mexico City" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-0.126, 51.5] },
      properties: { name: "London" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [28.045, -26.201] },
      properties: { name: "Johannesburg" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [15.322, -4.325] },
      properties: { name: "Kinshasa" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [151.207, -33.867] },
      properties: { name: "Sydney" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [0, 0] },
      properties: { name: "0°N 0°E" },
    },
  ],
};

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// This example defines an image map type using the Gall-Peters
// projection.
// https://en.wikipedia.org/wiki/Gall%E2%80%93Peters_projection
function initMap() {
  // Create a map. Use the Gall-Peters map type.
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 0,
    center: { lat: 0, lng: 0 },
    mapTypeControl: false,
  });

  initGallPeters();
  map.mapTypes.set("gallPeters", gallPetersMapType);
  map.setMapTypeId("gallPeters");

  // Show the lat and lng under the mouse cursor.
  const coordsDiv = document.getElementById("coords");

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(coordsDiv);
  map.addListener("mousemove", (event) => {
    coordsDiv.textContent =
      "lat: " +
      Math.round(event.latLng.lat()) +
      ", " +
      "lng: " +
      Math.round(event.latLng.lng());
  });
  // Add some markers to the map.
  map.data.setStyle((feature) => {
    return {
      title: feature.getProperty("name"),
      optimized: false,
    };
  });
  map.data.addGeoJson(cities);
}

let gallPetersMapType;

function initGallPeters() {
  const GALL_PETERS_RANGE_X = 800;
  const GALL_PETERS_RANGE_Y = 512;

  // Fetch Gall-Peters tiles stored locally on our server.
  gallPetersMapType = new google.maps.ImageMapType({
    getTileUrl: function (coord, zoom) {
      const scale = 1 << zoom;
      // Wrap tiles horizontally.
      const x = ((coord.x % scale) + scale) % scale;
      // Don't wrap tiles vertically.
      const y = coord.y;

      if (y < 0 || y >= scale) return "";
      return (
        "https://developers.google.com/maps/documentation/" +
        "javascript/examples/full/images/gall-peters_" +
        zoom +
        "_" +
        x +
        "_" +
        y +
        ".png"
      );
    },
    tileSize: new google.maps.Size(GALL_PETERS_RANGE_X, GALL_PETERS_RANGE_Y),
    minZoom: 0,
    maxZoom: 1,
    name: "Gall-Peters",
  });
  // Describe the Gall-Peters projection used by these tiles.
  gallPetersMapType.projection = {
    fromLatLngToPoint: function (latLng) {
      const latRadians = (latLng.lat() * Math.PI) / 180;
      return new google.maps.Point(
        GALL_PETERS_RANGE_X * (0.5 + latLng.lng() / 360),
        GALL_PETERS_RANGE_Y * (0.5 - 0.5 * Math.sin(latRadians))
      );
    },
    fromPointToLatLng: function (point, noWrap) {
      const x = point.x / GALL_PETERS_RANGE_X;
      const y = Math.max(0, Math.min(1, point.y / GALL_PETERS_RANGE_Y));
      return new google.maps.LatLng(
        (Math.asin(1 - 2 * y) * 180) / Math.PI,
        -180 + 360 * x,
        noWrap
      );
    },
  };
}

// GeoJSON, describing the locations and names of some cities.
const cities = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-87.65, 41.85] },
      properties: { name: "Chicago" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-149.9, 61.218] },
      properties: { name: "Anchorage" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-99.127, 19.427] },
      properties: { name: "Mexico City" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-0.126, 51.5] },
      properties: { name: "London" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [28.045, -26.201] },
      properties: { name: "Johannesburg" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [15.322, -4.325] },
      properties: { name: "Kinshasa" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [151.207, -33.867] },
      properties: { name: "Sydney" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [0, 0] },
      properties: { name: "0°N 0°E" },
    },
  ],
};

window.initMap = initMap;index.js

उदाहरण देखें

सैंपल आज़माएं

JSFiddle.net CodeSandbox.io Google Cloud Shell

मैप किस तरह के हैं

बुनियादी मैप किस तरह का है

45° की तस्वीरें

45° वाली इमेज को चालू और बंद करना

TypeScript

JavaScript

सैंपल आज़माएं

45° इमेज घुमाएं

TypeScript

JavaScript

सैंपल आज़माएं

मैप टाइप रजिस्ट्री में बदलाव करना

स्टाइल किए गए मैप

कस्टम मैप टाइप

MapType इंटरफ़ेस

बुनियादी मैप किस तरह का है

TypeScript

JavaScript

सैंपल आज़माएं

ओवरले मैप प्रकार

TypeScript

JavaScript

सैंपल आज़माएं

इमेज मैप के टाइप

TypeScript

JavaScript

सैंपल आज़माएं

अनुमान

प्रोजेक्शन लागू करना

अनुमानों में, निर्देशांकों में बदलाव

अनुमान में मैप टाइल चुनने की सुविधा

TypeScript

JavaScript

सैंपल आज़माएं

`MapType` इंटरफ़ेस