Hallo teman – teman pernahkah teman melihat sebuah website memiliki petunjuk lokasi, tentu pernah ya! Nah pada kali ini saya akan membahas cara menampilkan Sebuah google map dalam website, google map dalam sebuah website sangatlah penting karena membantu pengunjung website kita untuk mengetahui alamat sebuah perusahaan atau kantor kita, misal kita membuat website sebuah perusahaan, Untuk menunjukan lokasi perusahan kita maka kita perlu memasang yang namanya google map di website.
Untuk memenuhi permintaan pengunjung, pemilik website menuliskan alamat kantor dari sebuah website. Lebih efektif ketika kita menampilkan alamat kantor dalam bentuk peta. Kita dapat menggunakan bantuan Google Map untuk menampilkan peta dengan mudah sekali dalam website kita teman-teman.
Caranya sangat mudah sekali
Ikuti langkah – langkah berikut untuk cara menampilkan Sebuah google map dalam website;
- Login ke Google lalu buka google map
- Masukkan alamat yang ingin ditampilkan pada kotak pencarian Gogle Map,
- Klik bagikan pad sebelah kiri peta,
- Pad popup yang muncul, klik tag Sematkan peta,
- Copy skrip yang muncul diatas peta kebagian website dimana peta tersebut akan ditampilkan
- Di bawah ini saya mencontohkan lokasi Dumet School dalam bentuk website.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<html> <head> <title> Kursus Web Programing Di Dumet School</title> <style> .container{width: 850px; margin:auto;} h2 {text-align:center;} .left{float: left; width: 300px;} .right{float: right; width: 545px} </style> </head> <body> <div class="container"> <h2> Cara Memasang Google Map Di Website</h2> <div class="left"> <h3><a href="http://www.dumetschool.com/">Dumet School</a> </h3> <p>ayo teman - teman buruan pada kursus di <a href="http://www.dumetschool.com/">Dumet school</a>, kenapa harus Dumet School karena kita belajarnya semi privat dan akan dibimbing oleh instruktur yang berpengalaman</p> </div> <div class="right"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.4171860448005!2d106.7613977138907!3d-6.208576295505515!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f725f1563483%3A0xdbe53a1591eadc28!2sDUMET+School+Srengseng!5e0!3m2!1sid!2sid!4v1487920912494" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe> </div> </div> </body> </html> |
Pada skrip diatas kita dapat mengatur lebar dan tinggi peta dengan mengubah atribut width dan height.
Misalnya kita pasang Google Map pada class right maka hasilnya seperti berikut, jika dibuka dalam browser ;
Oke cukup mudah bukan, itulah tadi pembahasan saya tentang cara menampilkan Sebuah google map dalam website semoga bermanfaat.