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

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

इस दस्तावेज़ में उन नक्शे के बारे में चर्चा की गई है जिन्हें आप Maps JavaScript एपीआई. यह एपीआई, 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');

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

45° तस्वीरें

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

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

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

  • सैटलाइट या हाइब्रिड तस्वीरों को 45° दिखाने वाली इमेज से बदल दिया जाता है अपने सामने लाएं. डिफ़ॉल्ट रूप से, ऐसे व्यू उत्तर दिशा की ओर है. अगर उपयोगकर्ता ज़ूम आउट करता है, तो डिफ़ॉल्ट सैटलाइट या हाइब्रिड इमेजरी फिर से दिखाई देने लगती है. ज़ूम लेवल के आधार पर, व्यवहार अलग-अलग होता है और tilt की वैल्यू:
    • ज़ूम लेवल 12 और 18 के बीच, टॉप-डाउन बेसमैप (0°), इसके हिसाब से दिखेगा अगर tilt को 45 पर सेट नहीं किया जाता, तो डिफ़ॉल्ट तौर पर ऐसा होता है.
    • 18 या उससे ज़्यादा ज़ूम लेवल पर, 45° बुनियादी मैप तब तक दिखता है, जब तक tilt को 0 पर सेट किया गया है.
  • घुमाने वाला कंट्रोल दिखने लगता है. घुमाने के कंट्रोल से आपको कई विकल्प मिलते हैं इसकी मदद से उपयोगकर्ता, झुका हुआ टॉगल कर सकता है और व्यू को 90° में घुमा सकता है बढ़ोतरी देखी जा सकती है. घुमाने के कंट्रोल को छिपाने के लिए, false के लिए rotateControl.

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

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

आप इस पर setTilt(0) को कॉल करके 45° इमेजरी को अक्षम कर सकते हैं: Map ऑब्जेक्ट. काम करने वाले मैप टाइप के लिए 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
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
उदाहरण देखें

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

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

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

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

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

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
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
उदाहरण देखें

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

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

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

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

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

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

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

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

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

    releaseTile(tile:Node)

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

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

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

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

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

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

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

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

नीचे दिया गया उदाहरण पिछले उदाहरण के जैसा है इसे छोड़कर, हमने एक टाइल ओवरले MapType बनाया है ROADMAP मैप टाइप में सबसे ऊपर:

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
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
उदाहरण देखें

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

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

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

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

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

यह कोड एक बेसिक ImageMapType को लागू करता है चांद लगाने वाली, Google की मून टाइलों से. उदाहरण में, नॉर्मलाइज़ेशन का इस्तेमाल किया गया है फ़ंक्शन का इस्तेमाल करके यह पक्का किया जा सकता है कि टाइल 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
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
उदाहरण देखें

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

अनुमान

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

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

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

कस्टम प्रोजेक्शन लागू करते समय, आपको ये कुछ चीज़ें हैं:

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

इसमें कोऑर्डिनेट ट्रांसफ़ॉर्मेशन अनुमान

प्रत्येक प्रोजेक्शन दो विधियां प्रदान करता है जो इन दोनों के बीच अनुवाद करती हैं निर्देशांक प्रणाली, जिसकी सहायता से आप भौगोलिक और दुनिया के निर्देशांक:

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

Google Maps मानता है कि प्रोजेक्शन सीधी दिशा में होते हैं.

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

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

अनुमान लगाने की सुविधा का इस्तेमाल, सिर्फ़ प्लेसमेंट या ओवरले के लिए इस्तेमाल किया जा सकता है. Maps JavaScript API, MapType का इस्तेमाल करके बुनियादी मैप रेंडर करता है जिसे Chromebook में, 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
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
उदाहरण देखें

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