Cara Menambahkan Peta Google Maps Ke Website

Pada beberapa website yang JasaWebMedan kerjakan, sesuai permintaan, kami menambahkan denah (peta) lokasi bisnis dari klien pemilik website. Dengan update Google Maps terbaru, dibutuhkan beberapa trik untuk meletakkan peta tersebut ke dalam website.

Tutorial berikut akan menjelaskan langkah-langkah membuat peta dari Google Maps dan kemudian diletakkan di website atau blog. Peta ini dapat diperbesar (zoom in) dan diperkecil (zoom out) untuk memudahkan pengunjung dalam melihat detail lokasi dari peta tersebut.

1. Kunjungi maps.google.com dan login

Ini adalah langkah awal dalam membuat peta khusus di Google Maps. Berikutnya, silahkan login terlebih dahulu menggunakan akun Google (Gmail) milik Anda.

2. Create

Pada kolom pencarian (search) pada pojok kiri atas pada Google Maps, klik My maps lalu kemudian klik tombol Create.

 3. Buat Keterangan Tempat

Klik pada icon Add marker seperti pada gambar, kemudian klik pada lokasi yang ingin Anda tambahkan pada peta.

 

Kemudian tambahkan keterangan seperti nama lokasi/bisnis beserta alamat lengkapnya. Lihatlah contoh dibawah ini.

Pada bagian judul kotak Properties di pojok kanan atas peta, jika tulisannya masih Untitled, sebaiknya Anda ganti sesuai dengan nama lokasi petanya. Anda juga dapat memodifikasi tampilan penanda lokasi dengan memilih warna pada menu Style. Pada contoh diatas kami mengubah warna default menjadi kuning.

 4. Dapatkan ID peta

Berikutnya adalah mendapatkan ID dari peta yang baru Anda buat. Lihatlah pada bagian address bar seperti berikut:

Anda akan membutuhkan semua kode yang tertulis setelah karakter &mid= diatas. Karenanya, copy kode tersebut.

5. Embed pada website

Kini Anda siap meletakkan peta yang barusan dibuat ke website atau blog. Adapun rangkaian kodenya adalah sebagai berikut:

<iframe src="https://mapsengine.google.com/map/u/0/embed?mid=kode" width="lebar" height="tinggi"></iframe>

Ganti huruf tebal pada syntax diatas sesuai dengan data yang Anda miliki. Untuk ukuran peta dapat diatur melalui properti width dan height seperti diatas.

Hasil dari langkah diatas dapat dilihat dibawah ini: