Tutorial Google Maps JavaScript API: Tambahkan Peta Kustom ke Situs Web Anda

Google Maps membantu kami setiap hari dalam menavigasi jalan kami dan menemukan tempat-tempat dengan cara yang tidak imajinatif hanya beberapa dekade yang lalu. Ini tidak hanya berguna dalam menemukan jalan, tetapi kami juga melihat banyak contoh peta yang digunakan untuk visualisasi data, seperti berapa banyak situs web yang menggunakan peta untuk memvisualisasikan penyebaran COVID-19 di seluruh dunia. Hari ini, mari kita belajar bagaimana kita dapat menggunakan Google Maps JavaScript API untuk membangun peta khusus untuk situs web dan aplikasi kita.


Anda mungkin bertanya-tanya mengapa kita harus menggali Google Maps JavaScript API untuk membuat peta ketika kita dapat menggunakan a Peta Statis sebagai gantinya, atau gunakan salah satu plugin WordPress yang tersedia untuk melakukannya tanpa harus repot membuat kode.

Tentu saja, keduanya adalah opsi yang sangat baik ketika Anda ingin menampilkan beberapa lokasi bisnis di situs web Anda. Tetapi Google Maps JavaScript API menawarkan Anda lebih banyak kendali untuk saat-saat ketika Anda ingin membangun peta khusus dengan lebih banyak kompleksitas daripada yang ditawarkan oleh plugin yang dibuat sebelumnya.

Tutorial Google Maps JavaScript API

Jika Anda tidak ingin menghabiskan waktu untuk coding dan ingin cara yang lebih mudah untuk menampilkan peta di situs web Anda, saya sarankan Blok Google Maps dari Otter.

Mendapatkan Kunci Google Maps JavaScript API

Sebelum kita mulai, pertama-tama kita perlu mendapatkan kunci API untuk Google Maps. Anda bisa mendapatkannya dari sini. Google Maps API tidak sepenuhnya gratis, tetapi dilengkapi dengan paket gratis yang cukup untuk sebagian besar kasus.

Punya kunci API? Ambil jalan keluar ketiga dari bundaran dan lanjutkan dengan tutorial. ��

Membuat Peta Sederhana

Contoh dasar Google Maps dengan pengaturan default.Contoh dasar Google Maps dengan pengaturan default.

Pertama, mari kita membangun Google Map sederhana untuk memulai. Meskipun Anda dapat memisahkan JavaScript dan CSS Anda, kami menggunakan satu file HTML dalam tutorial ini. Berikut struktur yang akan kami gunakan:

html>
<html>
<kepala>
<judul>Judul Peta Sederhana>
<nama meta ="viewport" konten ="skala awal = 1.0">
<meta charset ="utf-8">
<gaya>
#map {
tinggi: 100%;
}

html, tubuh {
tinggi: 100%;
margin: 0;
bantalan: 0;
}
gaya>
kepala>
<tubuh>
<div id ="peta">div>
<naskah>
biarkan peta;
function initMap () {
map = google.maps.Map baru (document.getElementById (‘map’), {
pusat: {
lat: 51.513329,
lng: -0.088950
},
zoom: 14
});
}
naskah>
<script src ="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback = initMap" tunda async>naskah>
tubuh>
html>

Setelah Google Maps API dimuat, ia memanggil fungsi initMap yang menginisialisasi peta. Jika kami merinci kode kami lebih jauh, kami menggunakan div kosong dengan ID peta untuk menyatakan di mana kami ingin merender peta.

biarkan peta;
function initMap () {
map = google.maps.Map baru (document.getElementById (‘map’), {
pusat: {
lat: 51.513329,
lng: -0.088950
},
zoom: 14
});
}

Dalam JavaScript kami, pertama-tama, kami menetapkan variabel peta di luar fungsi, sehingga merupakan bagian dari cakupan global sehingga kami dapat memodifikasi peta nanti. Dalam fungsi initMap kami, pertama-tama kami mendeklarasikan Google Map baru dan mengaturnya untuk me-render dengan memanggil elemen dengan ID peta. Setelah itu, kami menentukan opsi kami, yang merupakan pusat peta dan tingkat zoom.

Kami menggunakan koordinat Kota London, tengara bersejarah di tengah London, sebagai pusat peta. Kemudian, kami membahas bagaimana Anda dapat menggunakan Maps API untuk menemukan koordinat lokasi mana pun di peta. Tetapi untuk saat ini, jika Anda penasaran, Anda bisa menggunakannya latlong.net untuk menemukan koordinat alamat apa pun dengan cepat.

Jenis peta

Sekarang kita memiliki peta dasar, kita dapat melihat opsi penyesuaian yang diberikan Google Maps JavaScript API. Opsi pertama yang akan kita gunakan adalah jenis peta. Google Maps mendukung empat jenis peta, yaitu:

  • roadmap: peta default yang biasanya Anda lihat.
  • satelit: tampilan satelit Google Maps dan Google Earth, jika tersedia.
  • hybrid: campuran peta jalan dan tampilan satelit.
  • terrain: peta yang didasarkan pada informasi terrain, seperti gunung dan lembah.

Dalam opsi peta kami, kami dapat menambahkan properti mapType untuk memilih tampilan yang kami inginkan, seperti ini:

map = google.maps.Map baru (document.getElementById (‘map’), {
pusat: {
lat: 51.513329,
lng: -0.08895
},
zoom: 14,
mapTypeId: ‘hybrid’
});

Sebagai contoh kami, kami menggunakan peta hybrid. Anda dapat bereksperimen dengan berbagai jenis untuk melihat mana yang sesuai dengan kasus penggunaan Anda.

Opsi peta

Setelah tipe peta, kita sampai kontrol peta. Google Maps memungkinkan Anda untuk menggunakan salah satu dari enam kontrolnya di peta Anda. Anda dapat menemukan daftar kontrol di situs web mereka.

Anda dapat menentukan kontrol yang ingin Anda gunakan dan lokasinya jika perlu, seperti ini:

map = google.maps.Map baru (document.getElementById (‘map’), {
pusat: {
lat: 51.513329,
lng: -0.08895
},
zoom: 14,
mapTypeId: ‘hybrid’,
scaleControl: true,
fullscreenControlOptions: {
posisi: google.maps.ControlPosition.RIGHT_BOTTOM
},

});

Kami mengaktifkan scaleControl, yang menunjukkan skala peta di bagian paling bawah di samping hak cipta Google, dengan menyatakannya sebagai BENAR. Dan di baris berikutnya, kita mengubah tampilan fullscreenControl dari posisi kanan atas default ke kanan bawah menggunakan properti fullscreenControlOptions. Demikian pula, Anda dapat menyesuaikan posisi kontrol lain.

Ingin kontrol yang melakukan sesuatu selain yang terpasang? Jangan khawatir, Google Maps juga memungkinkan Anda membuat kontrol khusus untuk peta Anda.

Mari kita bicara tentang penanda!

Menambahkan penanda

Penanda luar biasa, dan memungkinkan untuk membangun banyak aplikasi interaktif dengan peta. Misalnya, beberapa situs web pemesanan hotel menggunakan spidol untuk menunjukkan lokasi hotel pada peta. Dan mereka juga sangat mudah untuk ditambahkan.

Ayo tambahkan penanda ke Jembatan London dengan kode berikut:

biarkan marker = new google.maps.Marker ({
posisi: {
lat: 51.506821,
lng: -0.0879
},
peta: peta,
judul: ‘Jembatan London’
});

Seperti yang Anda lihat di atas, kode untuk marker kami memiliki tiga properti. Yang pertama adalah koordinat. Setelah itu, kami melewati variabel peta tempat kami menyimpan peta kami di awal, dan akhirnya, kami melewati judul marker.

Anda juga dapat meneruskan URL ke ikon penanda kustom dengan properti ikon di blok kode di atas.

Menambahkan InfoWindow

Anda mungkin menemukan sesuatu yang hilang dari spidol kami. Biasanya, ketika Anda mengklik penanda di peta, itu menunjukkan Anda sebuah sembulan dengan rincian lebih lanjut. Munculan itu adalah komponen yang berbeda dalam dirinya yang disebut InfoWindow.

Google Maps dengan spidol khusus.Google Maps dengan spidol khusus.

Untungnya bagi kami, sangat mudah untuk melampirkan InfoWindow ke penanda kami.

biarkan infoWindow = new google.maps.InfoWindow ({
kandungan: ‘

jembatan London


});

marker.addListener (‘click’, function () {
infoWindow.open (peta, penanda);
});

Pertama, kami membuat variabel infoWindow baru yang menyimpan komponen InfoWindow kami. Kami hanya memberikan properti konten yang berisi HTML yang ditampilkan setelah diklik. Setelah itu, kami menambahkan pendengar acara klik untuk penanda kami, yang memberitahu itu untuk membuka infoWindow ketika mengklik penanda.

Sama seperti itu, Anda dapat menggunakan penanda dan infoWindow untuk membuat pengalaman interaktif dengan peta Anda.

Sekarang adalah saat yang tepat untuk berhenti sejenak dan melihat kembali kemajuan yang telah kita buat. Hanya dalam 30 baris kode, kami telah menggunakan Google Maps JavaScript API untuk membangun peta khusus dengan spidol dan kotak informasi. Perlu dicatat betapa mudahnya menggunakan API Google Maps untuk melakukan hal-hal yang tampaknya menantang bagi pemula.

Modifikasi dinamis & pendengar acara

Penanda dan opsi peta belum tentu menjadi alasan mengapa orang membuang parit plugin Google Map dan beralih ke API. Mereka menjanjikan, tetapi banyak plugin sudah menawarkan fitur-fitur ini. Mari kita coba sesuatu yang tidak mungkin dengan sebuah plugin.

Modifikasi dinamis

Google Maps telah banyak metode untuk berinteraksi dengan peta dan memodifikasi perilakunya. Jika Anda terbiasa bekerja dengan DOM, maka Anda seharusnya tidak memiliki banyak masalah dengan metode ini.

Beberapa metode ini memungkinkan Anda untuk mendapatkan informasi dari peta, seperti getCenter, yang mengembalikan koordinat pusat peta. Dan demikian pula, beberapa memungkinkan Anda untuk mengubah perilaku, seperti setCenter, yang mengubah pusat peta.

Ada banyak metode, dan Anda harus melihat semuanya, sehingga Anda tahu apa yang mungkin dengan API. Mari kita gunakan salah satu metode ini dengan peta kita.

Kami dapat menambahkan tombol ke contoh kami yang membawa pusat peta kami kembali ke Kota London.

Pertama, kita perlu menambahkan tombol ke kode kita:

<tombol id ="bawaToCenter">Bawa ke Centerbutton>

Sekarang kami lampirkan pendengar acara ke tombol kami yang memicu metode setCenter:

const centreButton = document.querySelector (‘#bringToCenter’);

centerButton.addEventListener (‘click’, function (e) {
e.preventDefault ();
map.setCenter ({
lat: 51.513329,
lng: -0.08895
});
});

Dan itu dia. Sederhana bukan? Kami telah menggunakan map.setCenter di mana peta adalah variabel yang kami nyatakan di awal untuk menyimpan peta kami.

Anda harus mencoba bereksperimen dengan metode yang berbeda dan menjelajahi batas-batas API.

Pendengar acara

Konsep lain yang mungkin akrab bagi pengembang JavaScript adalah pendengar acara. Anda dapat melampirkan tindakan ke acara tertentu, yang berarti bahwa ketika suatu peristiwa terjadi, seperti perubahan pusat, tindakan tersebut akan terpicu.

Mari kita ambil salah satu contoh dari Google Maps docs untuk mendapatkan koordinat peta saat Anda mengekliknya.

biarkan infoWindowLatLang;

map.addListener (‘klik’, fungsi (mapsMouseEvent) {
if (infoWindowLatLang) infoWindowLatLang.close ();

infoWindowLatLang = new google.maps.InfoWindow ({
posisi: mapsMouseEvent.latLng
});

infoWindowLatLang.setContent (mapsMouseEvent.latLng.toString ());
infoWindowLatLang.open (peta);
});

Seperti yang Anda lihat, konsepnya hampir sama dengan cara pendengar acara bekerja dalam JavaScript. Pertama, kami lampirkan pendengar acara onClick ke peta kami. Di dalam pendengar acara kami, kami mendapatkan koordinat tempat pengguna mengklik dan memasukkannya ke dalam InfoWindow.

Jika Anda memeriksa Blok Google Map oleh Otter, Anda dapat melihat bagaimana kami menggunakan pendengar acara dan metode ini untuk melakukan hal-hal seperti menambahkan seret & setetes Penanda dan hapus penanda dengan mengkliknya.

Membuat kontrol khusus

Dan akhirnya, kami mengakhiri artikel ini dengan contoh bangunan kontrol khusus untuk Google Maps Anda.

Seperti disebutkan sebelumnya, kami sedang membangun tombol khusus yang menambahkan penanda ke tengah peta. Sementara kode untuk ini terlihat sedikit rumit, itu mudah.

Pertama, kita membangun tombol sebagai fungsinya, yang memiliki pendengar acara untuk menambahkan penanda ke tengah peta.

Anda perlu mengganti YOUR_API_KEY di blok kode di atas dengan kunci API Anda. Ini membuat Google Map sederhana dengan garis lintang dan bujur yang diberikan sebagai pusatnya.

function MarkerControl (controlDiv, map) {
const controlUI = document.createElement (‘div’);
controlUI.style.backgroundColor = ‘#fff’;
controlUI.style.border = ‘2px solid #fff’;
controlUI.style.borderRadius = ‘3px’;
controlUI.style.boxShadow = ‘0 2px 6px rgba (0,0,0, .3)’;
controlUI.style.cursor = ‘pointer’;
controlUI.style.margin = ’10px’;
controlDiv.appendChild (controlUI);

const controlText = document.createElement (‘img’);
controlText.style.padding = ‘5px’;
controlText.title = ‘Klik untuk menambahkan Marker’;
controlText.src = ‘https://maps.google.com/mapfiles/ms/icons/red-pushpin.png’;
controlUI.appendChild (controlText);

controlUI.addEventListener (‘click’, function () {
google.maps.Marker baru ({
posisi: map.getCenter (),
peta: peta
});
});
}

Sebagian besar kode di atas hanya membuat elemen untuk tombol kita. Pada akhirnya, kami lampirkan pendengar acara ke tombol kami yang menambahkan penanda ke tengah peta.

Sekarang kita harus melampirkan tombol kita ke peta kita, yang kita lakukan dengan kode berikut:

const markerControlDiv = document.createElement (‘div’);
const markerControl = MarkerControl baru (markerControlDiv, peta);
markerControlDiv.index = 1;
map.controls [google.maps.ControlPosition.LEFT_BOTTOM] .push (markerControlDiv);

Kode di atas menempelkan tombol kami ke peta ke posisi kiri bawah. Dan itu dia. Hanya itu yang diperlukan untuk menambahkan kontrol khusus ke Google Maps menggunakan JavaScript API-nya.

Google Maps dengan tombol khusus.Google Maps dengan tombol khusus di sudut kiri bawah.

Kesimpulan

Contoh yang berfungsi dari semua yang kami lakukan dalam artikel ini tersedia online di CodeSandbox.

Itu untuk artikel ini, dan saya harap itu memberi Anda rasa percaya diri bekerja dengan Google Maps JavaScript API. Ini sangat mudah digunakan dan memungkinkan Anda untuk membangun apa saja yang Anda inginkan dengan peta!

Sekarang Anda harus mencoba menggunakan apa yang Anda pelajari hari ini dan mempraktikkannya dengan membangun proyek demo untuk Anda sendiri menggunakan Google Maps. Beri tahu kami di komentar jika Anda memiliki pertanyaan; kami dengan senang hati menjawabnya!

Jangan lupa untuk bergabung dengan kursus kilat kami tentang mempercepat situs WordPress Anda. Dengan beberapa perbaikan sederhana, Anda dapat mengurangi waktu loading hingga 50-80%:

Tata ruang dan presentasi oleh Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map