Google Maps Dasar

Buat Peta Dasar Google

Contoh ini menciptakan Peta Google berpusat di London, Inggris:

Contoh

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapProp = {
    center:new google.maps.LatLng(51.508742,-0.120850),
    zoom:5,
    mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>

</html>

Cobalah sendiri "

Sisa halaman ini menggambarkan contoh di atas, langkah demi langkah.

1. Muat API Google

Google Maps API adalah library JavaScript. Hal ini dapat ditambahkan ke halaman web dengan <script> tag:

2. Set Peta Properti

Buat fungsi untuk menginisialisasi peta:

function initialize() {
}

Dalam fungsi initialize, membuat objek (mapProp) untuk menentukan properti untuk peta:

var mapProp = {
center:new google.maps.LatLng(51.508742, -0.120850),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

Pusat properti menentukan di mana untuk memusatkan peta. Membuat objek LatLng ke pusat peta pada titik tertentu. Lulus koordinat dalam urutan: lintang, bujur.

Properti zoom menentukan tingkat zoom untuk peta. zoom: 0 menunjukkan peta bumi diperkecil sepenuhnya. tingkat zoom yang lebih tinggi memperbesar pada resolusi yang lebih tinggi.

Properti mapTypeId menentukan jenis peta untuk menampilkan. Jenis peta berikut ini didukung:

ROADMAP (normal, default 2D map)
SATELIT (photographic map)
HYBRID (photographic map + roads and city names)
TERRAIN (map with mountains, rivers, etc.)

3. Buat Peta Kontainer

Buat <div> elemen untuk menahan peta. Gunakan CSS untuk ukuran elemen:

Peta selalu akan "inherit" ukurannya dari unsur wadah.

4. Buat objek Peta

var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);

Kode di atas menciptakan peta baru dalam <div> elemen dengan id = "GoogleMap", menggunakan parameter yang dilewatkan (mapProp) .

5. Tambahkan Pemroses Peristiwa untuk Load Peta yang

Menambahkan pendengar DOM yang akan mengeksekusi initialize() fungsi pada beban window (when the page is loaded) :

google.maps.event.addDomListener(window, 'load', initialize);

asynchronous Memuat

Hal ini juga memungkinkan untuk memuat API Google Maps pada permintaan.

Contoh di bawah ini menggunakan window.onload untuk memuat Google Maps API setelah halaman telah terisi penuh.

The loadScript() fungsi menciptakan API Google Maps <script> tag. Selain itu, callback = menginisialisasi parameter ditambahkan ke akhir URL untuk menjalankan initialize() fungsi setelah API tersebut terisi penuh:

Contoh

function loadScript() {
var script = document.createElement("script");
script.src = "http://maps.googleapis.com/maps/api/js?callback=initialize";
document.body.appendChild(script);
}

window.onload = loadScript;

Cobalah sendiri "

beberapa Maps

Contoh di bawah mendefinisikan empat peta pada satu halaman web (empat peta dengan jenis peta yang berbeda):

Contoh

var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapProp1);
var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapProp2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"), mapProp3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"), mapProp4);

Cobalah sendiri "

Google API Key

Google memungkinkan situs web Anda untuk memanggil API Google, banyak ribu kali per hari.

Jika Anda berencana untuk lalu lintas berat, Anda harus mendapatkan kunci API gratis dari Google.

Pergi ke https://console.developers.google.com untuk mendapatkan kunci gratis.

Google Maps mengharapkan untuk menemukan kunci API dalam parameter kunci ketika loading API:

❮ Sebelumnya Berikutnya Bab ❯