Anda sudah siap!

Untuk mulai mengembangkan, masuklah ke dokumentasi developer kami.

Aktifkan Google Maps JavaScript API

Untuk membantu Anda memulai, kami akan memandu Anda melalui Google Developers Console untuk melakukan beberapa hal terlebih dahulu:

  1. Buat atau pilih sebuah proyek
  2. Aktifkan Google Maps JavaScript API dan layanan terkait
  3. Buat kunci yang sesuai
Lanjutkan

Tipe Peta

Tipe Peta

Dokumen ini membahas tipe peta yang bisa Anda tampilkan menggunakan Google Maps JavaScript API. API menggunakan objek MapType untuk menyimpan informasi tentang peta ini. MapType adalah antarmuka yang mendefinisikan tampilan dan penggunaan petak peta dan terjemahan sistem koordinat dari koordinat layar ke koordinat dunia (pada peta). Setiap MapType harus berisi beberapa metode untuk menangani pengambilan dan pelepasan petak, serta properti yang mendefinisikan perilaku visualnya.

Cara kerja internal tipe peta di Maps JavaScript API merupakan topik lanjutan. Kebanyakan developer hanya bisa menggunakan tipe peta dasar yang disebutkan di bawah ini. Akan tetapi, Anda juga bisa mendefinisikan petak peta sendiri menggunakan tipe peta khusus atau memodifikasi penyajian tipe peta yang ada menggunakan Styled Maps. Saat memberikan tipe peta khusus, Anda perlu memahami cara memodifikasi Registri Tipe Peta.

Tipe Peta Dasar

Ada empat tipe peta yang tersedia dalam Google Maps JavaScript API. Selain petak peta jalan "bercat" yang biasa dilihat, Maps JavaScript API juga mendukung tipe peta lainnya.

Tipe peta berikut ini tersedia di Maps JavaScript API:

  • roadmap memperlihatkan tampilan peta jalan default. Ini adalah tipe peta default.
  • satellite menampilkan gambar satelit Google Earth
  • hybrid menampilkan kombinasi tampilan normal dan satelit
  • terrain menampilkan peta fisik berdasarkan informasi medan.

Anda memodifikasi tipe peta yang digunakan oleh Map dengan menyetel properti mapTypeId, baik melalui konstruktor dengan menyetel objek Map options, atau dengan memanggil metode setMapTypeId() peta. Properti mapTypeID default adalah roadmap.

Menyetel mapTypeId saat pembuatan:

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

Memodifikasi mapTypeId secara dinamis:

map.setMapTypeId('terrain');

Perhatikan, Anda sebenarnya tidak menyetel tipe peta ini secara langsung, melainkan menyetel mapTypeId untuk mereferensikan MapType menggunakan identifier. Maps JavaScript API menggunakan registri tipe peta, yang dijelaskan di bawah ini, untuk mengelola semua referensi ini.

Gambar 45°

Google Maps JavaScript API mendukung gambar 45° spesial untuk lokasi tertentu. Gambar resolusi tinggi ini memberikan tampilan perspektif terhadap setiap arah mata angin (Utara, Selatan, Timur, Barat). Gambar-gambar ini tersedia pada tingkat zoom yang lebih tinggi untuk tipe peta didukung.

Gambar berikut menampilkan tampilan perspektif 45° sebuah titian di Santa Cruz, CA:

Tipe peta satellite dan hybrid mendukung gambar 45° pada tingkat zoom tinggi bila tersedia. Jika pengguna memperbesar tampilan lokasi yang terdapat gambar tersebut, tipe peta ini secara otomatis mengubah tampilannya dengan cara berikut:

  • Gambar hibrid atau citra satelit diganti dengan gambar yang memberikan perspektif 45°, yang berpusat pada lokasi saat ini. Secara default, tampilan tersebut mengarah ke utara. Jika pengguna memperkecil tampilan, gambar hibrid atau citra satelit default akan muncul lagi.
  • Kontrol rotasi menyediakan kombinasi opsi kemiringan dan rotasi. Jika rotateControl bernilai true, kontrol kemiringan akan muncul bila tersedia gambar 45°. Kontrol kemiringan memungkinkan pengguna memiringkan gambar hingga sudut 45°.
  • Bila gambar dimiringkan, sebuah kait akan muncul, yang memungkinkan pengguna memutar tampilan 90° searah jarum jam.

Memperkecil tampilan dari tipe peta yang menampilkan gambar 45° akan membalik setiap perubahan ini, sehingga membentuk kembali tipe peta asal.

Mengaktifkan dan Menonaktifkan Gambar 45°

Anda bisa menonaktifkan gambar 45° dengan memanggil setTilt(0) pada objek Map. Untuk mengaktifkan gambar 45° bagi tipe peta yang didukung, panggil setTilt(45).

Metode Map getTilt() akan selalu mencerminkan kemiringan saat ini yang ditampilkan pada peta; jika Anda menyetel kemiringan pada peta kemudian membuang kemiringan tersebut (dengan memperkecil tampilan peta , misalnya), metode peta getTilt() akan mengembalikan 0.

Contoh berikut memperlihatkan tampilan 45° di pusat kota Portland, OR:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 36.964, lng: -122.015},
    zoom: 18,
    mapTypeId: 'satellite'
  });
  map.setTilt(45);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 36.964, lng: -122.015},
    zoom: 18,
    mapTypeId: 'satellite'
  });
  map.setTilt(45);
}

Tampilkan contoh (aerial-simple.html)

Memutar Gambar 45°

Gambar 45° sebenarnya terdiri dari sekumpulan gambar untuk setiap arah mata angin (Utara, Selatan, Timur, Barat). Setelah peta menampilkan gambar 45°, Anda bisa mengarahkan gambar ke salah satu arah mata angin dengan memanggil setHeading() pada objek Map, dengan meneruskan nilai angka yang dinyatakan berupa derajat dari Utara.

Contoh berikut menampilkan peta udara dan memutar peta secara otomatis setiap 3 detik bila tombol diklik:

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 45.518, lng: -122.672},
    zoom: 18,
    mapTypeId: 'satellite',
    heading: 90,
    tilt: 45
  });
}

function rotate90() {
  var 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);
  }
}
<div id="floating-panel"><input type="button" value="Auto Rotate" onclick="autoRotate();"></div>
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 45.518, lng: -122.672},
    zoom: 18,
    mapTypeId: 'satellite',
    heading: 90,
    tilt: 45
  });
}

function rotate90() {
  var 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);
  }
}

Tampilkan contoh (aerial-rotation.html)

Memodifikasi Registri Tipe Peta

Sebuah mapTypeId peta adalah identifier string yang digunakan untuk mengaitkan MapType dengan nilai unik. Setiap objek Map menyimpan MapTypeRegistry yang berisi sekumpulan MapType yang tersedia untuk peta itu. Misalnya, registri ini digunakan untuk memilih tipe peta yang tersedia dalam kontrol MapType dari Map tersebut.

Anda tidak membaca langsung dari registri tipe peta. Melainkan, Anda memodifikasi registri dengan menambahkan tipe peta khusus dan mengaitkannya dengan string identifier yang Anda pilih. Anda tidak bisa memodifikasi atau mengubah tipe peta dasar (meskipun Anda bisa membuangnya dari peta dengan mengubah penampilan mapTypeControlOptions yang telah dikaitkan dengan peta.

Kode berikut menyetel peta agar hanya menampilkan dua tipe peta di mapTypeControlOptions peta dan memodifikasi registri untuk menambahkan pengaitan dengan identifier ini untuk implementasi sesungguhnya bagi antarmuka MapType. Catatan: kami sengaja tidak mendokumentasikan pembuatan tipe peta khusus dalam kode sebelumnya. Lihat Peta Bergaya atau Tipe Peta Khusus di bawah ini untuk informasi tentang membuat tipe peta.

// Modify the control to only display two maptypes, the
// default ROADMAP and the custom 'mymap'.
// Note that because this is simply 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);

Peta Bergaya

StyledMapType memungkinkan Anda menyesuaikan penyajian peta dasar Google standar, dengan mengubah tampilan visual elemen seperti jalan, taman, dan area padat bangunan untuk mencerminkan gaya dengan yang digunakan dalam tipe peta default.

Untuk informasi selengkapnya tentang StyledMapType, lihat panduan untuk peta bergaya.

Tipe Peta Khusus

Google Maps JavaScript API sekarang mendukung tampilan dan pengelolaan tipe peta khusus, yang memungkinkan Anda mengimplementasikan gambar peta atau overlay petak.

Beberapa kemungkinan implementasi tipe peta tersedia dalam Maps JavaScript API:

  • set petak standar yang terdiri dari gambar yang secara kolektif membentuk peta kartografi lengkap. Set petak ini juga dikenal sebagai tipe peta dasar. Tipe peta ini berfungsi dan berperilaku seperti tipe peta default yang ada: roadmap, satellite, hybrid, dan terrain. Anda bisa menambahkan tipe peta khusus ke larik mapTypes Map untuk memungkinkan UI di dalam Maps JavaScript API memperlakukan tipe peta khusus Anda sebagai tipe peta standar (dengan menyertakannya dalam kontrol MapType, misalnya).
  • Overlay petak gambar yang ditampilkan di atas tipe peta dasar yang ada. Biasanya, tipe peta ini digunakan untuk meningkatkan tipe peta yang ada guna menampilkan informasi tambahan dan sering kali dibatasi pada lokasi dan/atau tingkat zoom tertentu. Perhatikan, petak ini mungkin transparan, yang memungkinkan Anda menambahkan fitur ke peta yang ada.
  • Tipe peta bukan-gambar, yang memungkinkan Anda memanipulasi tampilan informasi peta pada tingkat yang paling mendasar.

Setiap opsi ini bergantung pada pembuatan kelas yang mengimplementasikan antarmuka MapType. Selain itu, kelas ImageMapType menyediakan beberapa perilaku bawaan untuk menyederhanakan pembuatan MapType gambar.

Sebelum kita menjelaskan kelas-kelas yang mengimplementasikan MapType, kita perlu memahami cara Google Maps menentukan koordinat dan memutuskan bagian peta yang akan ditampilkan. Anda perlu mengimplementasikan logika serupa untuk setiap MapType dasar atau overlay.

Koordinat Peta

Ada beberapa sistem koordinat yang digunakan oleh Google Maps JavaScript API:

  • Nilai garis lintang dan garis bujur yang mereferensikan titik pada bola dunia secara unik. (Google menggunakan standar World Geodetic System WGS84.)
  • Koordinat dunia yang mereferensikan titik pada peta secara unik
  • Koordinat petak yang mereferensikan petak tertentu pada peta di tingkat zoom tertentu

Koordinat Dunia

Setiap kali Google Maps JavaScript API perlu menerjemahkan lokasi di dunia ke lokasi di peta (layar), pertama-tama Maps perlu menerjemahkan nilai-nilai garis lintang dan garis bujur tersebut ke dalam koordinat "dunia". Penerjemahan ini dilakukan dengan menggunakan proyeksi peta. Google Maps menggunakan proyeksi Mercator untuk keperluan ini. Anda juga bisa mendefinisikan proyeksi sendiri dengan mengimplementasikan antarmuka google.maps.Projection. (Perhatikan, antarmuka di Maps JavaScript API bukanlah kelas yang Anda "subkelas"-kan, melainkan hanya spesifikasi untuk kelas yang Anda definisikan sendiri.)

Untuk kemudahan perhitungan koordinat piksel (lihat di bawah) kami beranggapan peta yang berada pada tingkat zoom 0 adalah petak tunggal dari ukuran petak dasar. Kita kemudian mendefinisikan koordinat dunia sesuai dengan koordinat piksel pada tingkat zoom 0, dengan menggunakan proyeksi untuk mengonversi garis lintang & garis bujur ke posisi piksel pada petak dasar ini. Koordinat dunia adalah nilai titik-mengambang yang diukur dari asal proyeksi peta ke lokasi tertentu. Perhatikan, karena nilainya berupa titik-mengambang, mungkin jauh lebih tepat daripada resolusi gambar peta yang sedang ditampilkan. Dengan kata lain, koordinat dunia tidak bergantung pada tingkat zoom saat ini.

Koordinat dunia di Google Maps diukur dari asal proyeksi Mercator (sudut barat laut peta pada 180 derajat garis bujur dan sekitar 85 derajat garis lintang) dan meningkat ke arah x menuju timur (kanan) dan meningkat ke arah y menuju selatan (bawah). Karena petak Google Maps Mercator dasar adalah 256 x 256 piksel, ruang koordinat dunia yang bisa digunakan adalah {0-256}, {0-256} (Lihat di bawah ini.)

Perhatikan, proyeksi Mercator memiliki lebar membujur yang terbatas, sedangkan ketinggian melintang tidak terbatas. Kita "memotong" gambar peta dasar menggunakan proyeksi Mercator sekitar +/- 85 derajat untuk membentuk peta kotak untuk memudahkan logika pemilihan petak. Perhatikan, proyeksi mungkin menghasilkan koordinat dunia di luar ruang koordinat peta dasar yang bisa digunakan jika Anda merencanakan di tempat yang sangat dekat dengan kutub, misalnya.

Koordinat Piksel

Koordinat dunia mencerminkan lokasi absolut pada proyeksi yang diberikan, namun kita perlu menerjemahkannya ke dalam koordinat piksel untuk menentukan offset "piksel" pada tingkat zoom yang diberikan. Koordinat piksel ini dihitung dengan rumus berikut:

pixelCoordinate = worldCoordinate * 2zoomLevel

Dari persamaan di atas, diketahui bahwa setiap peningkatan tingkat zoom akan menyebabkan kenaikan dua kali lebih besar pada arah x dan y. Karena itu, setiap tingkat zoom yang lebih tinggi berisi resolusi empat kali lipat dibandingkan tingkat sebelumnya. Misalnya, pada tingkat zoom 1, peta terdiri dari 4 buah petak 256x256 piksel, sehingga menghasilkan ruang piksel dari 512x512. Pada tingkat zoom 19, masing-masing piksel x dan y pada peta bisa direferensikan menggunakan nilai antara 0 dan 256 * 219

Karena kita mendasarkan koordinat dunia pada ukuran petak peta, bagian integer pada koordinat piksel akan memiliki efek mengidentifikasi piksel yang tepat di lokasi itu pada tingkat zoom saat ini. Perhatikan, untuk tingkat zoom 0, koordinat piksel sama dengan koordinat dunia.

Kita sekarang memiliki cara yang akurat untuk menunjukkan setiap lokasi di peta, pada setiap tingkat zoom. Google Maps JavaScript API membuat sebuah tampilan yang terlihat pada pusat tingkat zoom peta yang diberikan (sebagai LatLng), dan ukuran elemen berisi DOM serta menerjemahkan kotak pembatas ini menjadi koordinat piksel. API kemudian menentukan secara logis semua petak peta yang terletak dalam batas-batas piksel yang diberikan. Setiap petak peta ini direferensikan menggunakan Koordinat Petak yang sangat menyederhanakan tampilan gambar peta.

Koordinat Petak

Google Maps JavaScript API mungkin tidak bisa memuat semua gambar peta di tingkat zoom lebih tinggi yang paling berguna; sebagai gantinya, Maps JavaScript API memecah gambar pada setiap tingkat zoom menjadi serangkaian petak peta, yang secara logis disusun berurutan agar bisa dipahami oleh aplikasi. Saat peta bergeser ke lokasi baru, atau ke tingkat zoom baru, Maps JavaScript API akan menentukan petak yang diperlukan dengan menggunakan koordinat piksel, dan menerjemahkan informasi tersebut menjadi serangkaian petak yang akan diambil. Koordinat petak ini diberikan menggunakan skema yang memudahkannya secara logis untuk menentukan petak berisi gambar untuk titik yang diberikan.

Petak di Google Maps diberi nomor dari asal yang sama dengan piksel. Untuk implementasi Google dari proyeksi Mercator, petak asal selalu berada di sudut barat laut peta, dengan nilaix meningkat dari barat ke timur dan nilaiy meningkat dari utara ke selatan. Petak diindeks menggunakan koordinat x,y dari asal itu. Misalnya, pada tingkat zoom 2, bila bumi dibagi menjadi 16 petak, setiap petak bisa direferensikan oleh sepasang x,y yang unik:

Perhatikan, dengan membagi koordinat piksel dengan ukuran petak dan mengambil bagian integer dari hasilnya, Anda akan memperoleh hasil sampingan koordinat petak pada tingkat zoom saat ini.

Contoh berikut menampilkan koordinat — nilai LatLng, koordinat dunia, koordinat piksel, dan koordinat petak — untuk Chicago, IL pada tingkat zoom yang berbeda:

Tampilkan contoh (map-coordinates.html)

Antarmuka MapType

Tipe peta khusus harus mengimplementasikan antarmuka MapType. Antarmuka ini menetapkan beberapa properti dan metode yang memungkinkan API membuat permintaan ke tipe peta Anda bila API perlu menampilkan petak peta dalam viewport dan tingkat zoom saat ini. Anda menangani permintaan ini untuk memutuskan petak mana yang dimuat.

Catatan: Anda bisa membuat kelas sendiri untuk mengimplementasikan antarmuka ini, atau —jika Anda memiliki gambar yang kompatibel — menggunakan kelas ImageMapType yang sudah mengimplementasikan antarmuka ini).

Kelas-kelas yang mengimplementasikan antarmuka MapType mengharuskan Anda mendefinisikan dan mengisi properti berikut:

  • tileSize (diperlukan) menetapkan ukuran petak (tipe google.maps.Size). Ukuran harus persegi panjang meskipun tidak perlu segi empat sama sisi.
  • maxZoom (diperlukan) menetapkan tingkat zoom maksimum untuk menampilkan petak dengan tipe peta ini.
  • minZoom (opsional) menetapkan tingkat zoom minimum untuk menampilkan petak dengan tipe peta ini. Secara default, nilainya adalah 0 yang menunjukkan tidak ada tingkat zoom minimum.
  • name (opsional) menetapkan nama untuk tipe peta ini. Properti ini hanya diperlukan jika Anda ingin tipe peta ini bisa dipilih dalam kontrol MapType. (Lihat Menambahkan Kontrol MapType di bawah ini.)
  • alt (opsional) menetapkan teks alternatif untuk tipe peta ini, yang ditunjukkan berupa teks mengambang. Properti ini hanya diperlukan jika Anda ingin tipe peta ini bisa dipilih dalam kontrol MapType. (Lihat Menambahkan Kontrol MapType di bawah ini.)

Sebagai tambahan, kelas yang mengimplementasikan antarmuka MapType perlu mengimplementasikan metode berikut ini:

  • getTile() (diperlukan) akan dipanggil setiap kali API menentukan bahwa peta perlu menampilkan petak baru untuk viewport yang diberikan. Metode getTile() harus memiliki tanda tangan berikut:

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

    API menentukan apakah perlu memanggil getTile() berdasarkan properti tileSize, minZoom, dan maxZoom dari MapType dan viewport serta tingkat zoom peta saat ini. Handler untuk metode ini harus mengembalikan elemen HTML dengan memberikan koordinat yang diteruskan, tingkat zoom, dan elemen DOM yang akan ditambahkan gambar petak.

  • releaseTile() (opsional) dipanggil setiap kali API menganggap peta perlu membuang petak karena tidak masuk area tampilan. Metode ini harus memiliki tanda tangan berikut:

    releaseTile(tile:Node)

    Anda biasanya harus menangani penghapusan elemen yang melekat pada petak peta saat penambahan ke peta. Misalnya, jika Anda melekatkan event listener untuk memetakan overlay petak peta, Anda harus membuangnya di sini.

Metode getTile() berfungsi sebagai pengontrol utama untuk menentukan petak yang akan dimuat dalam viewport yang diberikan.

Tipe Peta Dasar

Tipe peta yang Anda buat dengan cara ini bisa berdiri sendiri atau dikombinasikan dengan tipe peta lain sebagai overlay. Tipe peta yang berdiri sendiri dikenal sebagai tipe peta dasar. Anda mungkin ingin agar API memperlakukan MapType khusus tersebut seperti halnya tipe peta dasar lainnya yang ada (ROADMAP, TERRAIN, dll). Caranya, tambahkan MapType khusus Anda ke properti mapTypes dari Map. Properti ini bertipe MapTypeRegistry.

Kode berikut membuat MapType dasar untuk menampilkan koordinat petak peta dan menggambar garis luar petak:

/*
 * 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.
 */

/**
 * @constructor
 * @implements {google.maps.MapType}
 */
function CoordMapType(tileSize) {
  this.tileSize = tileSize;
}

CoordMapType.prototype.maxZoom = 19;
CoordMapType.prototype.name = 'Tile #s';
CoordMapType.prototype.alt = 'Tile Coordinate Map Type';

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  var div = ownerDocument.createElement('div');
  div.innerHTML = 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;
};

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: {lat: 41.850, lng: -87.650},
    streetViewControl: false,
    mapTypeId: 'coordinate',
    mapTypeControlOptions: {
      mapTypeIds: ['coordinate', 'roadmap'],
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    }
  });

  map.addListener('maptypeid_changed', function() {
    var 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)));
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
/*
 * 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.
 */

/**
 * @constructor
 * @implements {google.maps.MapType}
 */
function CoordMapType(tileSize) {
  this.tileSize = tileSize;
}

CoordMapType.prototype.maxZoom = 19;
CoordMapType.prototype.name = 'Tile #s';
CoordMapType.prototype.alt = 'Tile Coordinate Map Type';

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  var div = ownerDocument.createElement('div');
  div.innerHTML = 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;
};

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: {lat: 41.850, lng: -87.650},
    streetViewControl: false,
    mapTypeId: 'coordinate',
    mapTypeControlOptions: {
      mapTypeIds: ['coordinate', 'roadmap'],
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    }
  });

  map.addListener('maptypeid_changed', function() {
    var 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)));
}

Tampilkan contoh (maptype-base.html).

Tipe Peta Overlay

Beberapa tipe peta didesain untuk berfungsi sebagai tambahan atas tipe peta yang ada. Tipe peta tersebut mungkin memiliki layer transparan yang menunjukkan tempat menarik, atau menampilkan data tambahan kepada pengguna.

Dalam hal ini, Anda tidak perlu mengatur agar tipe peta diperlakukan sebagai entitas terpisah. Melainkan, Anda bisa menambahkan tipe peta secara langsung ke MapType yang ada menggunakan properti overlayMapTypes dari Map. Properti ini berisi sebuah MVCArray dari MapType. Semua tipe peta (dasar dan overlay) dirender dalam layer mapPane. Tipe peta overlay akan ditampilkan sebagai tambahan atas peta dasar tempat melekatkannya, sesuai dengan urutan munculnya dalam larik Map.overlayMapTypes.

Contoh berikut identik dengan contoh sebelumnya dengan pengecualian kami telah membuat overlay petak MapType sebagai tambahan atas tipe peta ROADMAP:

/*
 * 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.
 */

/** @constructor */
function CoordMapType(tileSize) {
  this.tileSize = tileSize;
}

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  var div = ownerDocument.createElement('div');
  div.innerHTML = 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;
};

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: {lat: 41.850, lng: -87.650}
  });

  // 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.
  map.overlayMapTypes.insertAt(
      0, new CoordMapType(new google.maps.Size(256, 256)));
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
/*
 * 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.
 */

/** @constructor */
function CoordMapType(tileSize) {
  this.tileSize = tileSize;
}

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  var div = ownerDocument.createElement('div');
  div.innerHTML = 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;
};

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: {lat: 41.850, lng: -87.650}
  });

  // 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.
  map.overlayMapTypes.insertAt(
      0, new CoordMapType(new google.maps.Size(256, 256)));
}

Tampilkan contoh (maptype-overlay.html)

Tipe Peta Gambar

Mengimplementasikan sebuah MapType untuk berfungsi sebagai tipe peta dasar bisa menjadi tugas yang menghabiskan waktu dan melelahkan. API menyediakan sebuah kelas khusus yang mengimplementasikan antarmuka MapType untuk tipe peta paling umum: tipe peta yang terdiri dari petak yang terbuat dari file gambar tunggal.

Kelas ini, kelas ImageMapType, dibangun menggunakan spesifikasi objek ImageMapTypeOptions yang mendefinisikan properti yang diperlukan berikut ini:

  • tileSize (diperlukan) menetapkan ukuran petak (tipe google.maps.Size). Ukuran harus persegi panjang meskipun tidak perlu segi empat sama sisi.
  • getTileUrl (diperlukan) menetapkan fungsi, biasanya disediakan sebagai literal fungsi segaris, untuk menangani pemilihan petak gambar yang tepat berdasarkan koordinat dunia dan tingkat zoom yang diberikan.

Kode berikut mengimplementasikan ImageMapType dasar dengan menggunakan petak bulan Google. Contoh ini menggunakan fungsi normalisasi untuk memastikan petak diulang sepanjang sumbu x, namun tidak sepanjang sumbu y pada peta Anda.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 0, lng: 0},
    zoom: 1,
    streetViewControl: false,
    mapTypeControlOptions: {
      mapTypeIds: ['moon']
    }
  });

  var moonMapType = new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) {
        var normalizedCoord = getNormalizedCoord(coord, zoom);
        if (!normalizedCoord) {
          return null;
        }
        var bound = Math.pow(2, zoom);
        return '//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,
    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) {
  var y = coord.y;
  var 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
  var 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};
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 0, lng: 0},
    zoom: 1,
    streetViewControl: false,
    mapTypeControlOptions: {
      mapTypeIds: ['moon']
    }
  });

  var moonMapType = new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) {
        var normalizedCoord = getNormalizedCoord(coord, zoom);
        if (!normalizedCoord) {
          return null;
        }
        var bound = Math.pow(2, zoom);
        return '//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,
    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) {
  var y = coord.y;
  var 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
  var 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};
}

Tampilkan contoh (maptype-image.html).

Proyeksi

Bumi adalah sebuah bola tiga dimensi (kurang-lebih), sedangkan sebuah peta adalah permukaan datar dua dimensi. Peta yang Anda lihat dalam Google Maps JavaScript API, seperti peta datar Bumi pada umumnya, adalah sebuah proyeksi bola bumi pada permukaan datar. Dalam istilah paling sederhana, proyeksi bisa didefinisikan sebagai pemetaan dari nilai garis lintang/garis bujur ke dalam koordinat pada peta proyeksi.

Proyeksi di Maps JavaScript API harus mengimplementasikan antarmuka Projection. Implementasi Projection tidak hanya harus memberikan pemetaan dari satu sistem koordinat ke sistem koordinat lainnya, melainkan juga pemetaan dua-arah. Artinya, Anda harus mendefinisikan cara menerjemahkan dari koordinat Bumi (LatLng) ke sistem koordinat dunia dari Projection, dan sebaliknya. Google Maps menggunakan proyeksi Mercator untuk membuat peta dari data geografis dan mengonversi kejadian di peta ke dalam koordinat geografis. Anda bisa memperoleh proyeksi ini dengan memanggil getProjection() pada Map (atau salah satu MapType dasar standar.) Untuk penggunaan pada umumnya, Projection standar sudah cukup, namun Anda juga bisa mendefinisikan dan menggunakan proyeksi khusus sendiri.

Mengimplementasikan Proyeksi

Saat mengimplementasikan proyeksi khusus, Anda perlu mendefinisikan beberapa hal:

  • Rumus untuk memetakan koordinat garis lintang dan garis bujur menjadi bidang Kartesius dan sebaliknya. (Antarmuka Projection hanya mendukung transformasi menjadi koordinat garis lurus.)
  • Ukuran petak dasar. Semua petak harus persegi panjang.
  • "Ukuran dunia" pada peta menggunakan petak dasar yang disetel pada tingkat zoom 0. Perhatikan bahwa untuk peta yang terdiri dari satu petak di tingkat zoom 0, ukuran bumi dan ukuran petak dasar menjadi identik

Transformasi Koordinat dalam Proyeksi

Setiap proyeksi menyediakan dua metode yang menerjemahkan dua sistem koordinat ini, yang memungkinkan Anda mengonversi koordinat geografis dan koordinat dunia:

  • Metode Projection.fromLatLngToPoint() mengonversi nilai LatLng ke dalam koordinat dunia. Metode ini digunakan untuk memosisikan overlay pada peta (dan memposisikan peta itu sendiri).
  • Metode Projection.fromPointToLatLng() mengonversi koordinat dunia menjadi nilai LatLng. Metode ini digunakan untuk mengonversi kejadian seperti klik yang terjadi di peta menjadi koordinat geografis.

Google Maps beranggapan proyeksi berupa garis lurus.

Biasanya, Anda bisa menggunakan proyeksi untuk dua kasus: untuk membuat peta dunia, atau untuk membuat peta daerah lokal. Dalam kasus pertama, Anda harus memastikan proyeksi tersebut berupa garis lurus dan normal pada semua garis bujur. Beberapa proyeksi (terutama proyeksi kerucut) mungkin "secara lokal normal" (yaitu titik utara) namun menyimpang dari utara sebenarnya, misalnya, semakin jauh peta diposisikan sesuai dengan beberapa garis bujur referensi. Anda bisa menggunakan proyeksi tersebut secara lokal, namun ketahuilah bahwa proyeksi tersebut tentunya tidak akurat dan kesalahan transformasi akan menjadi jelas bila Anda semakin jauh menyimpang dari garis bujur referensi.

Pilihan Petak Peta dalam Proyeksi

Proyeksi tidak hanya berguna untuk menentukan posisi lokasi atau overlay, juga untuk memosisikan petak peta itu sendiri. Google Maps JavaScript API merender peta dasar menggunakan antarmuka MapType, yang harus mendeklarasikan properti projection untuk mengidentifikasi proyeksi peta dan metode getTile() untuk mengambil petak peta berdasarkan nilai Koordinat Petak. Koordinat petak berdasarkan pada ukuran petak dasar Anda (yang harus persegi panjang) dan "ukuran dunia" peta Anda, yang merupakan ukuran piksel dari peta dunia Anda pada tingkat zoom 0. (Untuk peta yang terdiri dari satu petak pada tingkat zoom 0, ukuran petak dan ukuran dunia adalah identik.)

Anda mendefinisikan ukuran petak dasar dalam properti tileSize dari MapType. Anda mendefinisikan ukuran dunia secara implisit dalam metode fromLatLngToPoint() dan fromPointToLatLng() proyeksi.

Karena pemilihan gambar bergantung pada nilai-nilai yang diteruskan, maka ada gunanya menamai gambar-gambar yang bisa dipilih lewat program dengan nilai-nilai yang diteruskan tersebut, seperti map_zoom_tileX_tileY.png.

Contoh berikut mendefinisikan sebuah ImageMapType menggunakan proyeksi Gall-Peters:

// 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.
  var 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.
  var coordsDiv = document.getElementById('coords');
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(coordsDiv);
  map.addListener('mousemove', function(event) {
    coordsDiv.textContent =
        'lat: ' + Math.round(event.latLng.lat()) + ', ' +
        'lng: ' + Math.round(event.latLng.lng());
  });

  // Add some markers to the map.
  map.data.setStyle(function(feature) {
    return {
      title: feature.getProperty('name'),
      optimized: false
    };
  });
  map.data.addGeoJson(cities);
}

var gallPetersMapType;
function initGallPeters() {
  var GALL_PETERS_RANGE_X = 800;
  var GALL_PETERS_RANGE_Y = 512;

  // Fetch Gall-Peters tiles stored locally on our server.
  gallPetersMapType = new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) {
      var scale = 1 << zoom;

      // Wrap tiles horizontally.
      var x = ((coord.x % scale) + scale) % scale;

      // Don't wrap tiles vertically.
      var y = coord.y;
      if (y < 0 || y >= scale) return null;

      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),
    isPng: true,
    minZoom: 0,
    maxZoom: 1,
    name: 'Gall-Peters'
  });

  // Describe the Gall-Peters projection used by these tiles.
  gallPetersMapType.projection = {
    fromLatLngToPoint: function(latLng) {
      var 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) {
      var x = point.x / GALL_PETERS_RANGE_X;
      var 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.
var cities = {
  type: 'FeatureCollection',
  features: [{
    type: 'Feature',
    geometry: {type: 'Point', coordinates: [-87.650, 41.850]},
    properties: {name: 'Chicago'}
  }, {
    type: 'Feature',
    geometry: {type: 'Point', coordinates: [-149.900, 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.500]},
    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'}
  }]
};
<div id="map"></div>
<div id="coords"></div>
#coords {
  background-color: black;
  color: white;
  padding: 5px;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>
// 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.
  var 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.
  var coordsDiv = document.getElementById('coords');
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(coordsDiv);
  map.addListener('mousemove', function(event) {
    coordsDiv.textContent =
        'lat: ' + Math.round(event.latLng.lat()) + ', ' +
        'lng: ' + Math.round(event.latLng.lng());
  });

  // Add some markers to the map.
  map.data.setStyle(function(feature) {
    return {
      title: feature.getProperty('name'),
      optimized: false
    };
  });
  map.data.addGeoJson(cities);
}

var gallPetersMapType;
function initGallPeters() {
  var GALL_PETERS_RANGE_X = 800;
  var GALL_PETERS_RANGE_Y = 512;

  // Fetch Gall-Peters tiles stored locally on our server.
  gallPetersMapType = new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) {
      var scale = 1 << zoom;

      // Wrap tiles horizontally.
      var x = ((coord.x % scale) + scale) % scale;

      // Don't wrap tiles vertically.
      var y = coord.y;
      if (y < 0 || y >= scale) return null;

      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),
    isPng: true,
    minZoom: 0,
    maxZoom: 1,
    name: 'Gall-Peters'
  });

  // Describe the Gall-Peters projection used by these tiles.
  gallPetersMapType.projection = {
    fromLatLngToPoint: function(latLng) {
      var 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) {
      var x = point.x / GALL_PETERS_RANGE_X;
      var 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.
var cities = {
  type: 'FeatureCollection',
  features: [{
    type: 'Feature',
    geometry: {type: 'Point', coordinates: [-87.650, 41.850]},
    properties: {name: 'Chicago'}
  }, {
    type: 'Feature',
    geometry: {type: 'Point', coordinates: [-149.900, 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.500]},
    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'}
  }]
};

Tampilkan contoh (map-projection-simple.html).

Kirim masukan tentang...

Google Maps JavaScript API
Google Maps JavaScript API
Butuh bantuan? Kunjungi halaman dukungan kami.