Duyuru: Yeni ana harita stili yakında Google Haritalar Platformu'nda kullanıma sunulacak. Harita stilinde yapılan bu güncelleme, yeni bir varsayılan renk paleti, modernleştirilmiş raptiyeler ve harita deneyimleri ile kullanılabilirlik açısından iyileştirmeler içeriyor. Tüm harita stilleri Mart 2025'te otomatik olarak güncellenecektir. Kullanılabilirlik ve özelliği daha erken etkinleştirme hakkında daha fazla bilgi için Google Haritalar Platformu için yeni harita stili başlıklı makaleyi inceleyin.

Bu sayfa, Cloud Translation API ile çevrilmiştir.

Harita Türleri

Platform seçin: Android iOS JavaScript

Bu belgede, Maps JavaScript API'yi kullanarak görüntüleyebileceğiniz harita türleri ele alınmaktadır. API, bu haritalar hakkındaki bilgileri saklamak için bir MapType nesnesi kullanır. MapType harita karolarının görüntülenmesini ve kullanımını ve koordinat sistemlerinin ekran koordinatlarından dünya koordinatlarına (harita üzerinde) çevrilmesini tanımlayan bir arayüzdür. Her MapType, karoların alınması ve bırakılmasıyla ilgili birkaç yöntem ve görsel davranışını tanımlayan özellikler içermelidir.

Maps JavaScript API'deki harita türlerinin işleyiş mekanizması ileri düzey bir konudur. Çoğu geliştirici, aşağıda belirtilen temel harita türlerini kullanabilir. Bununla birlikte, stilize haritalar'ı kullanarak mevcut harita türlerinin sunumunu değiştirebilir veya özel harita türlerini kullanarak kendi harita karolarınızı tanımlayabilirsiniz. Özel harita türleri sağlarken haritanın Harita Türü Kayıt Defteri'ni nasıl değiştireceğinizi bilmeniz gerekir.

Temel Harita Türleri

Maps JavaScript API'de dört tür harita mevcuttur. Maps JavaScript API, bilinen "boyalı" yol haritası karolarına ek olarak diğer harita türlerini de destekler.

Maps JavaScript API'de aşağıdaki harita türleri kullanılabilir:

roadmap, varsayılan yol haritası görünümünü gösterir. Bu, varsayılan harita türüdür.
satellite, Google Earth uydu görüntülerini gösterir.
hybrid, normal ve uydu görünümlerinin bir karışımını gösterir.
terrain, arazi bilgilerine dayalı fiziksel bir harita gösterir.

Map tarafından kullanılan harita türünü, mapTypeId özelliğini ayarlayarak (oluşturucuda Map options nesnesini ayarlayarak veya haritanın setMapTypeId() yöntemini çağırarak) değiştirebilirsiniz. mapTypeID özelliği varsayılan olarak roadmap değerine ayarlanır.

İnşaat sırasında mapTypeId ayarlama:

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 öğesini dinamik olarak değiştirme:

map.setMapTypeId('terrain');

Haritanın harita türünü doğrudan ayarlamadığınızı, bunun yerine mapTypeId değerini bir tanımlayıcının kullanıldığı MapType değerine referans verecek şekilde ayarladığınızı unutmayın. Maps JavaScript API, bu referansları yönetmek için aşağıda açıklanan bir harita türü sicil dairesi kullanır.

45° Görüntüler

Maps JavaScript API, belirli konumlar için özel 45° görüntüler destekler. Bu yüksek çözünürlüklü görüntüler, temel yönlerin her birine (Kuzey, Güney, Doğu, Batı) yönelik perspektif görünümler sunar. Bu resimler, desteklenen harita türlerinde daha yüksek yakınlaştırma düzeylerinde kullanılabilir.

Aşağıdaki resimde New York'un 45° perspektif görünümü gösterilmektedir:

satellite ve hybrid harita türleri, mevcut olduğunda yüksek yakınlaştırma düzeylerinde (12 ve üzeri) 45° görüntüyü destekler. Kullanıcı, bu tür görüntülerin bulunduğu bir konumu yakınlaştırırsa bu harita türleri görünümlerini otomatik olarak aşağıdaki şekilde değiştirir:

Uydu veya karma görüntüler, mevcut konumu merkeze alan 45° perspektif veren görüntülerle değiştirilir. Bu tür görünümler varsayılan olarak kuzeye dönüktür. Kullanıcı yakınlaştırmayı azaltırsa varsayılan uydu veya karma görüntüler tekrar görünür. Davranış, yakınlaştırma düzeyine ve tilt değerine bağlı olarak değişir:

12 ile 18 arasındaki yakınlaştırma düzeylerinde, tilt 45 olarak ayarlanmadığı sürece varsayılan olarak yukarıdan aşağıya temel harita (0°) gösterilir.
tilt 0 olarak ayarlanmazsa 18 veya daha yüksek yakınlaştırma düzeylerinde 45° ana harita görüntülenir.

Döndürme kontrolü görünür hale gelir. Döndürme denetimi, kullanıcının eğmeyi etkinleştirmesini ve görünümü her iki yönde de 90°'lık artışlarla döndürmesini sağlayan seçenekler sunar. Döndürme kontrolünü gizlemek için rotateControl'ü false olarak ayarlayın.

45° görüntüler gösteren bir harita türünde uzaklaştırdığınızda bu değişikliklerin her biri geri alınır ve orijinal harita türleri yeniden oluşturulur.

45° görüntüyü etkinleştirme ve devre dışı bırakma

Map nesnesinde setTilt(0) çağrısı yaparak 45° görüntüyü devre dışı bırakabilirsiniz. Desteklenen harita türleri için 45° görüntüyü etkinleştirmek isterseniz setTilt(45) numaralı telefonu arayın. Map nesnesinin getTilt() yöntemi, haritada gösterilen mevcut tilt değerini her zaman yansıtır. Bir haritada tilt ayarlayıp daha sonra bu tilt değerini kaldırırsanız (ör. haritayı uzaklaştırarak) haritanın getTilt() yöntemi 0 değerini döndürür.

Önemli: 45° görüntüler yalnızca raster haritalarda desteklenir. Bu görüntüler vektör haritalarla kullanılamaz.

Aşağıdaki örnekte New York'un 45° görünümü gösterilmektedir:

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

Örneği görüntüleyin

Örneği Deneyin

JSFiddle.net Google Cloud Shell

Örneği görüntüleyin.

Görüntüleri 45° döndürme

45° görüntüler aslında her ana yöne (Kuzey, Güney, Doğu, Batı) ait bir resim koleksiyonundan oluşur. Haritanızda 45° görüntüler gösterilmeye başladığında, Map nesnesinde setHeading() işlevini çağırarak görüntüyü ana yönlerden birine yönlendirebilirsiniz. Bu işlev çağrısında, kuzeyden derece cinsinden ifade edilen bir sayı değeri göndermeniz gerekir.

Aşağıdaki örnekte, bir havadan görünüm haritası gösterilmektedir. Düğme tıklandığında harita 3 saniyede bir otomatik olarak döndürülür:

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

Örneği görüntüleyin

Örneği Deneyin

JSFiddle.net Google Cloud Shell

Örneği görüntüleyin.

Harita Türü Kayıt Defteri'ni değiştirme

Bir haritanın mapTypeId, MapType değerini benzersiz bir değerle ilişkilendirmek için kullanılan bir dize tanımlayıcısıdır. Her Map nesnesi, söz konusu harita için kullanılabilen MapType koleksiyonunu içeren bir MapTypeRegistry tutar. Bu kayıt defteri, örneğin Harita'nın HaritaTürü kontrolünde kullanılabilen harita türlerini seçmek için kullanılır.

Doğrudan harita türü kayıt defterinden okumazsınız. Bunun yerine, özel harita türleri ekleyerek ve bunları seçtiğiniz bir dize tanımlayıcısı ile ilişkilendirerek kayıt defterini değiştirirsiniz. Temel harita türlerini değiştiremez veya değiştiremezsiniz (ancak haritanın ilişkili mapTypeControlOptions öğesinin görünümünü değiştirerek bunları haritadan kaldırabilirsiniz).

Aşağıdaki kod, haritayı mapTypeControlOptions bölümünde yalnızca iki harita türü gösterecek şekilde ayarlar ve bu tanımlayıcıyla ilişkilendirmeyi MapType arayüzünün gerçek uygulamasına eklemek için kayıt defterini değiştirir.

// 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);

Stilli Haritalar

StyledMapType, standart Google ana haritalarının sunumunu özelleştirmenize olanak tanır. Bu sayede yollar, parklar ve yerleşim alanları gibi öğelerin görsel görüntüsünü varsayılan harita türünde kullanılandan farklı bir stil yansıtacak şekilde değiştirebilirsiniz.

StyledMapType hakkında daha fazla bilgi için Yerleşik JSON stil beyanları kullanma başlıklı makaleyi inceleyin.

Özel Harita Türleri

Maps JavaScript API, özel harita türlerinin görüntülenmesini ve yönetimini destekler. Böylece kendi harita görüntülerinizi veya karo yer paylaşımlarınızı uygulayabilirsiniz.

Maps JavaScript API'de birkaç olası harita türü uygulaması vardır:

Birlikte tam kartografik haritalar oluşturan resimlerden oluşan standart karo setleri. Bu karo setleri temel harita türleri olarak da bilinir. Bu harita türleri, mevcut varsayılan harita türleri gibi çalışır: roadmap, satellite, hybrid ve terrain. Maps JavaScript API'deki kullanıcı arayüzünün özel harita türünüzü standart bir harita türü olarak işlemesine izin vermek için özel harita türünüzü bir haritanın mapTypes dizisine ekleyebilirsiniz (örneğin, MapType denetimine ekleyerek).
Mevcut temel harita türlerinin üzerinde görüntü karosu yer paylaşımları Genellikle bu harita türleri, ek bilgi görüntülemek için mevcut bir harita türünü geliştirmek amacıyla kullanılır ve genellikle belirli konumlar ve/veya yakınlaştırma düzeyleriyle sınırlıdır. Bu karoların şeffaf olabileceğini ve mevcut haritalara özellik eklemenize olanak tanıdığını unutmayın.
Harita bilgilerinin görüntülenmesini en temel düzeyde değiştirmenize olanak tanıyan resim dışı harita türleri.

Bu seçeneklerin her biri, MapType arayüzünü uygulayan bir sınıf oluşturmaya dayanır. Ayrıca ImageMapType sınıfı, görüntü haritası türlerinin oluşturulmasını basitleştirmek için bazı yerleşik davranışlar sağlar.

`MapType` Arayüzü

MapType sınıfını uygulayan sınıflar oluşturmadan önce, Google Haritalar'ın koordinatları nasıl belirlediğini ve haritanın hangi bölümlerinin gösterileceğine nasıl karar verdiğini anlamanız önemlidir. Tüm temel veya yer paylaşımlı harita türleri için benzer mantığı uygulamanız gerekir. Harita ve karo koordinatları kılavuzunu okuyun.

Özel harita türleri MapType arayüzünü uygulamalıdır. Bu arayüz, API'nin mevcut görüntü alanı ve yakınlaştırma düzeyinde harita karoları göstermesi gerektiğini belirlediğinde API'nin harita türlerinize istek başlatmasına olanak tanıyan belirli özellikleri ve yöntemleri belirtir. Hangi karonun yükleneceğine karar vermek için bu istekleri siz yönetirsiniz.

Not: Bu arayüzü uygulamak için kendi sınıfınızı oluşturabilirsiniz. Alternatif olarak, uyumlu görüntüleriniz varsa bu arayüzü zaten uygulayan ImageMapType sınıfını kullanabilirsiniz.

MapType arayüzünü uygulayan sınıflar için aşağıdaki özellikleri tanımlamanız ve doldurmanız gerekir:

tileSize (zorunlu), karonun boyutunu (google.maps.Size türü) belirtir. Boyutlar kare olmasa da dikdörtgen olmalıdır.
maxZoom (zorunlu), bu harita türünün karolarının gösterileceği maksimum yakınlaştırma düzeyini belirtir.
minZoom (isteğe bağlı) bu harita türünün karosunun gösterileceği minimum yakınlaştırma düzeyini belirtir. Varsayılan olarak bu değer 0'tür ve minimum yakınlaştırma düzeyi olmadığını gösterir.
name (isteğe bağlı) bu harita türünün adını belirtir. Bu özellik yalnızca bu harita türünün bir MapType kontrolünde seçilebilir olmasını istiyorsanız gereklidir. ( Kontrol Seçenekleri'ne bakın.)
alt (isteğe bağlı) bu harita türü için fareyle üzerine gelme metni olarak gösterilen alternatif metni belirtir. Bu özellik yalnızca bu harita türünün bir MapType kontrolünde seçilebilir olmasını istiyorsanız gereklidir. (Denetleme Seçenekleri bölümüne bakın.)

Ayrıca, MapType arayüzünü uygulayan sınıfların aşağıdaki yöntemleri uygulaması gerekir:

getTile() (zorunlu), API haritanın belirli bir görüntü alanı için yeni karolar göstermesi gerektiğini belirlediğinde çağrılır. getTile() yönteminin aşağıdaki imzaya sahip olması gerekir:

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

API, MapType'un tileSize, minZoom ve maxZoom özelliklerine ve haritanın mevcut görüntü alanı ile yakınlaştırma düzeyine göre getTile()'ü çağırması gerekip gerekmediğini belirler. Bu yöntemin işleyicisi, iletilen koordinat, yakınlaştırma düzeyi ve karo resminin ekleneceği DOM öğesi verildiğinde bir HTML öğesi döndürmelidir.
releaseTile() (isteğe bağlı), API haritanın görünümden çıktığı için bir karoyu kaldırması gerektiğini belirlediğinde çağrılır. Bu yöntemin aşağıdaki imzası olmalıdır:

releaseTile(tile:Node)

Genellikle haritaya eklendikten sonra harita karolarına eklenmiş tüm öğelerin kaldırılmasını sağlamanız gerekir. Örneğin, harita karo yer paylaşımlarına etkinlik işleyicileri eklediyseniz bunları buradan kaldırmanız gerekir.

getTile() yöntemi, belirli bir görüntü alanında hangi karoların yükleneceğini belirlemek için ana kontrolör görevi görür.

Temel Harita Türleri

Bu şekilde oluşturduğunuz harita türleri tek başına kullanılabilir veya diğer harita türleriyle birlikte yer paylaşımı olarak birleştirilebilir. Bağımsız harita türleri temel harita türleri olarak bilinir. API'nin bu tür özel MapType'leri diğer tüm mevcut temel harita türleriyle (ROADMAP, TERRAIN vb.) aynı şekilde işlemesini isteyebilirsiniz. Bunu yapmak için özel MapType öğenizi Map'ın mapTypes mülküne ekleyin. Bu mülk MapTypeRegistry türündedir.

Aşağıdaki kod, bir haritanın karo koordinatlarını görüntülemek için bir temel MapType oluşturur ve karoların ana hatlarını çizer:

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

Örneği görüntüleyin

Örneği Deneyin

JSFiddle.net Google Cloud Shell

Yer paylaşımlı harita türleri

Bazı harita türleri, mevcut harita türlerinin üzerinde çalışacak şekilde tasarlanmıştır. Bu tür harita türlerinde, ilgi çekici noktaları gösteren veya kullanıcıya ek veriler gösteren şeffaf katmanlar bulunabilir.

Bu durumlarda, harita türünün ayrı bir varlık olarak değil, yer paylaşımı olarak ele alınmasını istersiniz. Bunu, harita türünü doğrudan Map'un overlayMapTypes mülkünü kullanarak mevcut bir MapType'e ekleyerek yapabilirsiniz. Bu mülk, MapType öğelerinden oluşan bir MVCArray içeriyor. Tüm harita türleri (temel ve yer paylaşımı) mapPane katmanında oluşturulur. Yer paylaşımı harita türleri, eklendikleri temel haritanın üzerinde, Map.overlayMapTypes dizisinde göründükleri sırayla görüntülenir (daha yüksek dizin değerlerine sahip yer paylaşımları, daha düşük dizin değerlerine sahip yer paylaşımlarının önünde görüntülenir).

Aşağıdaki örnek, ROADMAP harita türünün üzerine bir karo yer paylaşımı MapType oluşturduğumuz dışında öncekiyle aynıdır:

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

Örneği görüntüleyin

Örneği Deneyin

JSFiddle.net Google Cloud Shell

Resim Haritası Türleri

Temel harita türü olarak kullanılacak bir MapType uygulamak zaman alıcı ve zahmetli bir iş olabilir. API, en yaygın harita türleri için MapType arayüzünü uygulayan özel bir sınıf sağlar: Tek resim dosyalarından oluşan karolardan oluşan harita türleri.

Bu sınıf (ImageMapType sınıfı), aşağıdaki zorunlu özellikleri tanımlayan bir ImageMapTypeOptions nesne spesifikasyonu kullanılarak oluşturulur:

tileSize (zorunlu), karonun boyutunu (google.maps.Size türü) belirtir. Boyutlar kare olmasa da dikdörtgen olmalıdır.
getTileUrl (zorunlu), sağlanan dünya koordinatlarına ve yakınlaştırma düzeyine göre uygun resim karosunun seçimini yönetmek için genellikle satır içi işlev değişmezi olarak sağlanan işlevi belirtir.

Aşağıdaki kod, Google'ın ay karolarını kullanarak temel bir ImageMapType uygular. Örnekte, karoların haritanızın y ekseni boyunca değil, x ekseni boyunca tekrarlanmasını sağlamak için normalleştirme işlevi kullanılır.

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

Örneği görüntüleyin

Örneği Deneyin

JSFiddle.net Google Cloud Shell

Tahminler

Dünya üç boyutlu bir küredir (yaklaşık olarak), harita ise düz iki boyutlu bir yüzeydir. Dünya'nın düz haritaları gibi, Maps JavaScript API'de gördüğünüz harita da bu kürenin düz bir yüzeye projeksiyonudur. En basit haliyle, projeksiyon, enlem/boylam değerlerinin projeksiyonun haritasındaki koordinatlarla eşlenmesi olarak tanımlanabilir.

Maps JavaScript API'deki projeksiyonlar Projection arayüzünü uygulamalıdır. Projection uygulama, yalnızca bir koordinat sisteminden diğerine değil, iki yönlü bir eşleme sağlamalıdır. Yani, Dünya koordinatlarından (LatLng nesneleri) Projection sınıfının dünya koordinatı sistemine ve dünya koordinatı sisteminden tekrar Dünya koordinatlarına nasıl dönüştürüleceğini tanımlamanız gerekir. Google Haritalar, haritalarını coğrafi verilerden oluşturmak ve haritadaki etkinlikleri coğrafi koordinatlara dönüştürmek için Mercator projeksiyonunu kullanır. Bu projeksiyonu, Map üzerinde getProjection() (veya standart temel MapType türlerinden herhangi birini) arayarak elde edebilirsiniz. Çoğu kullanım için bu standart Projection yeterli olacaktır ancak kendi özel projeksiyonlarınızı da tanımlayıp kullanabilirsiniz.

Tahmin uygulama

Özel projeksiyon uygularken birkaç şeyi tanımlamanız gerekir:

Enlem ve boylam koordinatlarını Kartezyen düzlemde eşleme formülleri ile Kartezyen düzlemden enlem ve boylam koordinatlarına eşlemeyle ilgili karşılık gelen formüller. (Projection arayüzü yalnızca doğrusal koordinatlara dönüşümleri destekler.)
Temel karo boyutu. Tüm karolar dikdörtgen olmalıdır.
0 yakınlaştırma düzeyinde ayarlanan taban karosunu kullanan bir haritanın "dünya boyutu". 0 yakınlaştırmada tek bir karodan oluşan haritalarda dünya boyutunun ve temel karo boyutunun aynı olduğunu unutmayın.

Projeksiyonlarda Dönüşümleri Koordine Etme

Her projeksiyon, bu iki koordinat sistemi arasında çeviri yapan iki yöntem sunar. Bu yöntemler, coğrafi ve dünya koordinatları arasında dönüşüm yapmanıza olanak tanır:

Projection.fromLatLngToPoint() yöntemi, LatLng değerini dünya koordinatına dönüştürür. Bu yöntem, yer paylaşımlarını haritada konumlandırmak (ve haritanın kendisini konumlandırmak) için kullanılır.
Projection.fromPointToLatLng() yöntemi, dünya koordinatını LatLng değerine dönüştürür. Bu yöntem, haritada gerçekleşen tıklamalar gibi etkinlikleri coğrafi koordinatlara dönüştürmek için kullanılır.

Google Haritalar, projeksiyonların doğrusal olduğunu varsayar.

Genellikle projeksiyonları iki durumda kullanabilirsiniz: Dünyanın haritasını oluşturmak veya yerel bir bölgenin haritasını oluşturmak için. İlk durumda, projeksiyonunuzun tüm boylamlarda da doğrusal ve normal olduğundan emin olmalısınız. Bazı projeksiyonlar (özellikle konik projeksiyonlar) "yerel olarak normal" (ör.kuzeye işaret eder) olabilir ancak gerçek kuzeyden sapabilir. Örneğin, harita bir referans boylamına göre ne kadar uzakta konumlandırılırsa o kadar sapma olur. Bu tür bir projeksiyonu yerel olarak kullanabilirsiniz ancak projeksiyonun mutlaka hatalı olduğunu ve referans boylamından ne kadar uzaklaşırsanız dönüşüm hatalarının o kadar belirgin hale geleceğini unutmayın.

Projeksiyonlarda Harita Kartı Seçimi

Projeksiyonlar yalnızca konumların veya yer paylaşımlarının konumlarını belirlemek için değil, harita karolarının kendilerini konumlandırmak için de kullanışlıdır. Maps JavaScript API, taban haritaları bir MapType arayüzü kullanarak oluşturur. Bu arayüzde, haritanın projeksiyonunu tanımlamak için bir projection özelliği ve kartonkoordinat değerlerine göre harita karolarını almak için bir getTile() yöntemi belirtilmelidir. Karo koordinatları hem temel karo boyutunuzu (dikdörtgen olmalıdır) hem de haritanızın "dünya boyutunu" (0 yakınlaştırma düzeyinde harita dünyanızın piksel boyutu) temel alır. (0 yakınlaştırmada tek bir karodan oluşan haritalar için karo boyutu ve dünya boyutu aynıdır.)

Temel karo boyutunu MapType'ün tileSize mülkünde tanımlarsınız. Dünya boyutunu, projeksiyonunuzun fromLatLngToPoint() ve fromPointToLatLng() yöntemlerinde dolaylı olarak tanımlarsınız.

Resim seçimi bu iletilen değerlere bağlı olduğundan, iletilen değerlere göre programatik olarak seçilebilecek resimleri adlandırmak faydalıdır (ör. map_zoom_tileX_tileY.png).

Aşağıdaki örnekte, Gall-Peters projeksiyonu kullanılarak bir ImageMapType tanımlanmaktadır:

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

Örneği görüntüleyin

Örneği Deneyin

JSFiddle.net Google Cloud Shell

Harita Türleri

Temel Harita Türleri

45° Görüntüler

45° görüntüyü etkinleştirme ve devre dışı bırakma

TypeScript

JavaScript

Örneği Deneyin

Görüntüleri 45° döndürme

TypeScript

JavaScript

Örneği Deneyin

Harita Türü Kayıt Defteri'ni değiştirme

Stilli Haritalar

Özel Harita Türleri

MapType Arayüzü

Temel Harita Türleri

TypeScript

JavaScript

Örneği Deneyin

Yer paylaşımlı harita türleri

TypeScript

JavaScript

Örneği Deneyin

Resim Haritası Türleri

TypeScript

JavaScript

Örneği Deneyin

Tahminler

Tahmin uygulama

Projeksiyonlarda Dönüşümleri Koordine Etme

Projeksiyonlarda Harita Kartı Seçimi

TypeScript

JavaScript

Örneği Deneyin

`MapType` Arayüzü