मैप की नई स्टाइल, जल्द ही 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 पर सेट नहीं किया जाता.
जब तक tilt को 0 पर सेट नहीं किया जाता, तब तक 45° बेसमैप का ज़ूम लेवल 18 या उससे ज़्यादा होने पर दिखता है.

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

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

45° वाली तस्वीरों के संग्रह की सुविधा को चालू और बंद करना

45° वाली तस्वीरों के संग्रह को बंद करने के लिए, Map ऑब्जेक्ट पर setTilt(0) को कॉल करें. साथ काम करने वाले मैप टाइप के लिए 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 क्लाउड शेल

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

रोटेटिंग 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 क्लाउड शेल

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

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

मैप का 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 API, पसंद के मुताबिक बनाए गए मैप को दिखाने और मैनेज करने की सुविधा देता है. इसकी मदद से, अपने मैप के तस्वीरों के संग्रह या टाइल ओवरले को लागू किया जा सकता है.

Maps JavaScript API में कई तरह के मैप को लागू किया जा सकता है:

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

इनमें से हर विकल्प, एक ऐसी क्लास बनाने पर निर्भर करता है जो 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() को कॉल करना होगा या नहीं. इस तरीके के हैंडलर को एक ऐसा एचटीएमएल एलिमेंट दिखाना चाहिए जिस पर पास किए गए कोऑर्डिनेट, ज़ूम लेवल, और डीओएम एलिमेंट को टाइल इमेज जोड़नी है.
जब भी एपीआई यह तय करता है कि मैप से कोई टाइल हटानी है, तब 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 क्लाउड शेल

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

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

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

इमेज मैप टाइप

बुनियादी मैप के टाइप के तौर पर काम करने के लिए, 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 क्लाउड शेल

अनुमान

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

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

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

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

45° वाली तस्वीरें

45° वाली तस्वीरों के संग्रह की सुविधा को चालू और बंद करना

TypeScript

JavaScript

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

रोटेटिंग 45° वाली तस्वीरों का संग्रह

TypeScript

JavaScript

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

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

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

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

MapType इंटरफ़ेस

आधार मैप के प्रकार

TypeScript

JavaScript

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

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

TypeScript

JavaScript

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

इमेज मैप टाइप

TypeScript

JavaScript

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

अनुमान

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

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

प्रोजेक्शन में मैप टाइल चुनने की सुविधा

TypeScript

JavaScript

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

`MapType` इंटरफ़ेस