सूचना: Google Maps Platform में, बेसमैप की नई स्टाइल जल्द ही उपलब्ध होगी. मैप की स्टाइल में किए गए इस अपडेट में, नया डिफ़ॉल्ट कलर पैलेट, आधुनिक पिन, और मैप के अनुभव और इस्तेमाल में सुधार शामिल हैं. मार्च 2025 में, सभी मैप स्टाइल अपने-आप अपडेट हो जाएंगे. उपलब्धता और पहले से ऑप्ट-इन करने के तरीके के बारे में ज़्यादा जानने के लिए, Google Maps Platform के लिए नया मैप स्टाइल लेख पढ़ें.

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

मैप के टाइप

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

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

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

मैप के बुनियादी टाइप

Maps JavaScript API में चार तरह के मैप उपलब्ध हैं. Maps JavaScript API, आम तौर पर इस्तेमाल होने वाले "पेंट किए गए" सड़क के मैप टाइल के साथ-साथ, मैप के अन्य टाइप के साथ भी काम करता है.

Maps 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');

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

45° वाली इमेज

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

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

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

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

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

आपको घुमाने का कंट्रोल दिखेगा. घुमाने की सुविधा से, उपयोगकर्ता को कई विकल्प मिलते हैं. इनकी मदद से, वह झुकाव को टॉगल कर सकता है और व्यू को किसी भी दिशा में 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 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 Google Cloud Shell

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

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

मैप का mapTypeId एक स्ट्रिंग आइडेंटिफ़ायर होता है, जिसका इस्तेमाल MapType को किसी यूनीक वैल्यू से जोड़ने के लिए किया जाता है. हर Map ऑब्जेक्ट में एक MapTypeRegistry होता है, जिसमें उस मैप के लिए उपलब्ध MapType का कलेक्शन होता है. इस रजिस्ट्री का इस्तेमाल, मैप के 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 के बारे में ज़्यादा जानकारी के लिए, एम्बेड किए गए JSON स्टाइल के एलान का इस्तेमाल करना देखें.

अगर आपको एक ही स्टाइल को कई ऐप्लिकेशन में अपडेट करना है, तो क्लाउड कस्टमाइज़ेशन की सुविधा देखें. यह सुविधा Google Cloud Console में उपलब्ध है. इसके लिए, आपके पास मैप आईडी होना चाहिए. संभावित समस्याओं से बचने के लिए, एक ही ऐप्लिकेशन में क्लाउड की मदद से पसंद के मुताबिक बनाने की सुविधा और हार्डकोड की गई स्टाइल को एक साथ इस्तेमाल न करें.

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

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

Maps JavaScript API में, मैप टाइप को लागू करने के कई तरीके मौजूद हैं:

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

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

`MapType` इंटरफ़ेस

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

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

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

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

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

इसके अलावा, 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 वगैरह) के साथ करता है. ऐसा करने के लिए, Map की mapTypes प्रॉपर्टी में अपना कस्टम MapType जोड़ें. यह प्रॉपर्टी 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 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 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 Google Cloud Shell

अनुमान

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

Maps JavaScript API में प्रोजेक्शन के लिए, Projection इंटरफ़ेस का इस्तेमाल करना ज़रूरी है. Projection को लागू करने के लिए, एक निर्देशांक सिस्टम से दूसरे निर्देशांक सिस्टम में मैपिंग के साथ-साथ, दोनों दिशाओं में मैपिंग की सुविधा भी होनी चाहिए. इसका मतलब है कि आपको यह तय करना होगा कि Earth के निर्देशांक (LatLng ऑब्जेक्ट) से, Projection क्लास के विश्व निर्देशांक सिस्टम में कैसे बदलाव किया जाए. साथ ही, विश्व निर्देशांक सिस्टम से वापस Earth के निर्देशांक में कैसे बदलाव किया जाए. Google Maps, भौगोलिक डेटा से मैप बनाने के लिए, मेर्काटोर प्रोजेक्शन का इस्तेमाल करता है. साथ ही, मैप पर मौजूद इवेंट को भौगोलिक निर्देशांक में बदलता है. यह अनुमान पाने के लिए, 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.

नीचे दिए गए उदाहरण में, Gall-Peters प्रोजेक्शन का इस्तेमाल करके 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") as string,
      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 Google Cloud Shell

मैप के टाइप

मैप के बुनियादी टाइप

45° वाली इमेज

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

TypeScript

JavaScript

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

इमेज को 45° घुमाना

TypeScript

JavaScript

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

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

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

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

MapType इंटरफ़ेस

बुनियादी मैप के टाइप

TypeScript

JavaScript

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

ओवरले मैप टाइप

TypeScript

JavaScript

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

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

TypeScript

JavaScript

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

अनुमान

अनुमान लागू करना

प्रोजेक्शन में बदलावों को कोऑर्डिनेट करना

प्रोजेक्शन में मैप टाइल चुनना

TypeScript

JavaScript

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

`MapType` इंटरफ़ेस