Dasar -dasar Google Maps
Buat peta google sederhana
Sekarang mari kita buat peta google sederhana.
Berikut adalah peta google yang menunjukkan London, Inggris:
Contoh
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydydydyy0kkjitpvd2u7oatoawhc9ysh6ohxoiym&sensor=false"> </function script> {varcript> </script> {varcript> </script> function () {varcript> </script> function () <) google.maps.latlng (51.508742, -0.120850), zoom: 5, maptypeId: google.maps.maptypeid.roadmap}; var peta = Google.maps.map (document.getelementById ("googlistene" baru, mapprop);} google.evaps. inisialisasi); </script> </head> <body> <div id = "googlemap"> </div> </body> </html>Contoh rendering (dapat disalin dan dijalankan secara langsung, tentu saja Anda harus dapat mengakses Google)
Analisis contoh
Kami menggunakan contoh di atas untuk menganalisis proses pembuatan peta Google.
Mengapa aplikasi mendeklarasikan html5?
<! Doctype html>
Sebagian besar browser menggunakan halaman rendering dokumen HTML5 "Standard Mode", yang berarti aplikasi Anda kompatibel dengan browser utama.
Selain itu, jika tidak ada tag Doctype, browser menggunakan mode Quirks untuk membuat konten halaman.
Kiat: Perlu dicatat bahwa beberapa "mode promiscuous" CSS tidak dapat digunakan dengan mode standar. Dalam aplikasi tertentu, semua ukuran berbasis persentase harus diwarisi dari elemen blok induk. Jika tidak ada ukuran yang ditentukan dalam modul induk, nilai default adalah 0 x 0 piksel. Jika Anda ingin menggunakan persentase, Anda dapat mendeklarasikannya di tag <tyle> sebagai berikut:
<type style = "text/css"> html {height: 100%} body {height: 100%; margin: 0; padding: 0} #gooGlemap {tinggi: 100%} </style>Pernyataan gaya ini menunjukkan bahwa modul peta (googlemap) harus memiliki tinggi HTML 100%.
Tambahkan Kunci API Google Maps
API Google Maps harus dimasukkan dalam tag <script> pertama dalam contoh berikut:
<skrip src = "http://maps.googleapis.com/maps/api/js?key=your_api_key&sensor=true_or_false"> </script>
Tempatkan kunci API yang dihasilkan oleh Google di parameter kunci (key = your_api_key).
Parameter sensor diperlukan, yang menunjukkan apakah aplikasi menggunakan sensor (mirip dengan navigasi GPS) untuk menemukan lokasi pengguna. Nilai parameter dapat diatur ke benar atau salah.
Https
Jika aplikasi Anda adalah aplikasi http (https: http aman) yang aman, Anda dapat menggunakan https untuk memuat API Google Maps:
<skrip src = "https://maps.googleapis.com/maps/api/js?key=your_api_key&sensor=true_or_false"> </script>
Pemuatan asinkron
Demikian pula, kami dapat memuat API Google Maps setelah halaman sepenuhnya dimuat.
Contoh berikut menggunakan Window.onload untuk mencapai pemuatan penuh Google Maps. Fungsi LoadScript () membuat tag Google Maps API yang memuat. Selain itu, parameter callback = inisialisasi ditambahkan di akhir tag. Inisialisasi () karena fungsi panggilan balik akan dieksekusi setelah API sepenuhnya dimuat:
Contoh
<! Doctype html> <html> <head> <script> function initialize () {var mapprop = {center: new google.maps.latlng (51.508742, -0.120850), zoom: 7, maptypeid: google.maps.maptypeid}; var peta = baru google.maps.map (document.geteLementById ("googlemap"), mapprop);} function loadScript () {var skrip = document.createElement ("script"); script.type = "Teks/JavaScript"; script.src = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false&callback=initialize"; document.body.appendChild (skrip);} window.onload = loadscript; </script> </head> <body> <v id = "googlemap"> </div> </body> </html>Tentukan properti peta
Sebelum menginisialisasi peta, kita perlu membuat objek properti peta untuk menentukan beberapa properti peta:
var mapprop = {center: google.maps.latlng baru (51.508742, -0.120850), zoom: 7, maptypeId: google.maps.maptypeid.roadmap};Tengah (titik tengah)
Properti tengah menentukan pusat peta, yang menciptakan titik tengah pada peta melalui koordinat (lintang, bujur).
Zoom (Seri Zoom)
Properti Zoom menentukan rentang zoom peta. Zoom: 0 menunjukkan zoom penuh dari seluruh peta bumi.
Maptypeid (jenis awal peta)
Properti Maptypeid menentukan jenis awal peta.
MaptypeId mencakup empat jenis berikut:
google.maps.maptypeid.hybrid: lapisan transparan jalan utama yang menampilkan gambar satelit
google.maps.maptypeid.roadmap: Tampilkan peta jalan normal
google.maps.maptypeid.satellite: tampilan gambar satelit
google.maps.maptypeid.terrain: tampilkan peta dengan fitur alami seperti medan dan vegetasi
Tempat menampilkan peta google
Biasanya Google Maps digunakan dalam elemen <div>:
<Div id = "googlemap"> </div>
CATATAN: Peta akan menampilkan ukuran peta dengan ukuran yang disetel di div, sehingga kami dapat mengatur ukuran peta di elemen <div>.
Buat Objek Peta
var map = google.maps.map baru (document.geteLementById ("googlemap"), mapprop);
Kode di atas menggunakan parameter (mapprop) untuk membuat peta baru di elemen <div> (ID adalah googlemap).
Kiat: Jika Anda ingin membuat beberapa peta di halaman, Anda hanya perlu menambahkan objek peta baru.
Contoh berikut mendefinisikan empat instance peta (empat peta menggunakan jenis peta yang berbeda):
Contoh
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydydydyy0kkjitpvd2u7oatoawhc9ysh6ohxoiym&sensor=false"> </function script> {varcript> </script> {varcript> </script> function () {varcript> </script> function () <) google.maps.latlng (51.508742, -0.120850), zoom: 9, maptypeid: google.maps.maptypeid.roadmap}; var mapprop2 = {center: google.maps.latlng baru (51.508742, -0.120850), zoom: 9, maptypeId: google.maps.maptypeid.satellite}; var mapprop3 = {center: google.maps.latlng baru (51.508742, -0.120850), zoom: 9, maptypeId: google.maps.maptypeid.hybrid}; var mapprop4 = {center: google.maps.latlng baru (51.508742, -0.120850), zoom: 9, maptypeId: google.maps.maptypyid.terrain}; var map = google.maps.map baru (document.geteLementById ("googlemap"), mapprop); var MAP2 = google.maps.map baru (document.getElementById ("googlemap2"), mapprop2); var MAP3 = google.maps.map baru (document.getElementById ("googlemap3"), mapprop3); var map4 = google.maps.map baru (document.geteLementById ("googlemap4"), mapprop4);} google.maps.event.adddomlistener (window, 'load', initialize); </script> </head> <bod "goorop2 =" goognlemap "> </Div> <br> <br> <boPOp =" gooan "gooGlEp2 id = "googlemap3"> </div> <br> <div id = "googlemap4"> </div> </body> </html>Memuat peta
Setelah jendela dimuat, objek peta diinisialisasi dengan mengeksekusi fungsi initialize (), yang memastikan bahwa Google Maps dimuat setelah halaman sepenuhnya dimuat:
google.maps.event.adddomlistener (jendela, 'muat', inisialisasi);
Di atas adalah kompilasi dari informasi dasar Google Maps. Kami akan terus menambahkannya nanti. Terima kasih atas dukungan Anda untuk situs ini!