Cara Menampilkan Google Maps di Website dengan HTML


 

Google Maps banyak sekali penggunanya dari berbagai penjuru negara. Maps yang begitu canggih karena dapat menelusuri hingga ke beberapa daerah yang terekam. Google maps juga memudahkan untuk membantuk menunjukkan jalan kemana arah untuk menuju tujuan kita. Selain itu, dapat dimanfaatkan untuk ditampilkan di website kita, agar pengguna tidak perlu repot-repot untuk mencari alamat Anda ke Google Maps terlebih dahulu. Sehingga pengguna langsung klik saja dan menuju maps yang Anda sediakan sebelumnya.

Maka dari itu, tutorialpendidikan.com memberikan solusi dan cara mudah agar Google Maps dapat ditampilkan di website Anda. Karena cara ini begitu mudah, hanya 3 poin penting saja yang akan kita gunakan nantinya.

Berikut ini adalah cara untuk mengambil iframe atau embed code dari Google Maps. Yang dapat anda gunakan untuk menampilkan lokasi maps di website anda. Embed ini dapat kita atur dengan ukuran kecil, sedang dan besar. Iframe ini merupakan salah satu fungsi google maps agar memudahkan para pengguna untuk mendapatkan petunjuk lokasi melalui google maps. Langsung saja ke langkah-langkah, karena langkah ini begitu mudah :

1. Kunjungi terlebih dahulu Google Maps (Klik Disini), setelah mengunjungi maka cari tempat yang akan anda tampilkan di website anda. Disini saya mencontohkan “Wuling Solo Kleco”.

 


2. Setelah itu tekan tombol “Share” atau “Bagikan”. Disini kita akan mengambil kode embed dengan cara pilih tab “Embed a map” nah disitu juga disertakan bahwa Anda dapat mengatur ukuran dari map yang akan Anda tampilkan di website anda, terdapat pilihan ukuran kecil, sedang, dan besar disesuaikan dengan kebutuhan Anda. Selanjutnya tekan “Copy HTML”.


 

3. Langkah terakhir kita akan menempelkannya ke website kita masing-masing seperti gambar di bawah ini. Untuk <div> adalah untuk menampilkan class daric ss yang sudah diatur sebelumnya (opsional saja), yang terpenting adalah kode embednya mulai dari <iframe>


 

4. Baik hasil dari saya akan menjadi seperti ini.


 

Terimakasih telah berkunjung, semoga menjadi bermanfaat.

Share To:

Miko Smartblogger

Post A Comment:

0 comments so far,add yours