इस पेज का अनुवाद 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 के वर्शन 3.62 में, ज़्यादा ज़ूम लेवल पर सैटेलाइट और हाइब्रिड मैप टाइप अपने-आप 45° इमेज पर स्विच नहीं होंगे. यह वर्शन अगस्त 2025 में रिलीज़ किया जाएगा. जहां 45° इमेज उपलब्ध हैं वहां उपयोगकर्ता के ज़ूम इन करने पर भी, मैप में ऊपर से ली गई सैटलाइट इमेज दिखेगी. map.setTilt(45) को कॉल करने से भी कोई फ़र्क़ नहीं पड़ेगा. जिन ग्राहकों और ऐप्लिकेशन को अपने इस्तेमाल के मामलों के लिए 45° वाली इमेज की ज़रूरत होती है उन पर इसका असर पड़ेगा. उन्हें 3D मैप जैसे विकल्पों का इस्तेमाल करना होगा.

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

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

satellite और hybrid मैप टाइप, ज़्यादा ज़ूम लेवल (12 और उससे ज़्यादा) पर 45° वाली इमेज दिखाते हैं. हालांकि, यह सुविधा सिर्फ़ उन जगहों के लिए उपलब्ध है जहां 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 सेट किया है और बाद में उसे हटा दिया है (जैसे, मैप को ज़ूम आउट करके), तो मैप का getTilt() तरीका 0 दिखाएगा.tilt

अहम जानकारी: 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 एक स्ट्रिंग आइडेंटिफ़ायर होता है. इसका इस्तेमाल, 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 से, सिर्फ़ डिफ़ॉल्ट roadmap मैप टाइप पर असर पड़ता है.

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

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

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 (ज़रूरी नहीं) इस मैप टाइप का नाम तय करता है. इस प्रॉपर्टी की ज़रूरत सिर्फ़ तब होती है, जब आपको इस मैप टाइप को MapType कंट्रोल में चुनने का विकल्प देना हो. ( कंट्रोल के विकल्प देखें.)
alt (ज़रूरी नहीं) इस मैप टाइप के लिए वैकल्पिक टेक्स्ट तय करता है. यह टेक्स्ट, कर्सर घुमाने पर दिखता है. इस प्रॉपर्टी की ज़रूरत सिर्फ़ तब होती है, जब आपको इस मैप टाइप को MapType कंट्रोल में चुनने का विकल्प देना हो. (कंट्रोल के विकल्प देखें.)

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

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

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

एपीआई यह तय करता है कि getTile() को कॉल करना है या नहीं. यह फ़ैसला, MapType की tileSize, minZoom, और maxZoom प्रॉपर्टी के साथ-साथ मैप के मौजूदा व्यूपोर्ट और ज़ूम लेवल के आधार पर लिया जाता है. इस तरीके के लिए हैंडलर को, पास किए गए कोऑर्डिनेट, ज़ूम लेवल, और उस 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 Google Cloud Shell

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

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

ऐसे मामलों में, आपको मैप टाइप को अलग इकाई के तौर पर नहीं, बल्कि ओवरले के तौर पर इस्तेमाल करना होता है. इसके लिए, मौजूदा MapType में मैप टाइप जोड़ा जा सकता है. इसके लिए, Map की overlayMapTypes प्रॉपर्टी का इस्तेमाल करें. इस प्रॉपर्टी में, 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` इंटरफ़ेस