सुरक्षा नोटिस: हमें सुरक्षा से जुड़ी एक समस्या का पता चला है. यह समस्या तीसरे पक्ष की कुछ लाइब्रेरी (इसमें polyfill.io शामिल है) का इस्तेमाल करने वाली वेबसाइटों पर असर डाल सकती है. इस समस्या की वजह से, वेबसाइट पर आने वाले लोगों को कभी-कभी अपनी वेबसाइट के मालिक की जानकारी या अनुमति के बिना ही, दूसरी वेबसाइट पर रीडायरेक्ट कर दिया जाता है. हमारे कई JavaScript सैंपल में, पहले से polyfill.io स्क्रिप्ट का एलान शामिल था. हमने इसे अपने सैंपल से हटा दिया है. अगर आपने हमारे JavaScript सैंपल का इस्तेमाल किया है और इनमें यह एलान शामिल है, तो हमारा सुझाव है कि आप इस एलान को हटा दें.

इस पेज का अनुवाद 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 तरह के मैप में, 45° की इमेज को हाई ज़ूम लेवल (12 या उससे ज़्यादा) पर दिखाया जा सकता है. ऐसा उन जगहों के लिए किया जाता है जहां उपलब्ध हो. अगर उपयोगकर्ता किसी ऐसी जगह पर ज़ूम करता है जहां ऐसी तस्वीरें मौजूद हैं, तो ये मैप अपने-आप व्यू में इस तरह से बदलाव करते हैं:

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

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

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

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

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

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

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

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

TypeScript

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

  map.setTilt(45);
}

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

JavaScript

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

  map.setTilt(45);
}

window.initMap = initMap;index.js

उदाहरण देखें

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

JSFiddle.net 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. आपके पास मैप के 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

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

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

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

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

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

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

मूल मैप प्रकार

45° तस्वीरें

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

TypeScript

JavaScript

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

45° तक घुमाई जा रही तस्वीरें

TypeScript

JavaScript

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

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

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

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

MapType इंटरफ़ेस

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

TypeScript

JavaScript

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

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

TypeScript

JavaScript

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

चित्र मैप प्रकार

TypeScript

JavaScript

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

अनुमान

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

प्रोजेक्शन में कोऑर्डिनेट ट्रांसफ़ॉर्मेशन

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

TypeScript

JavaScript

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

`MapType` इंटरफ़ेस