-->

Cara mengembed maps google responsive di website

Cara mengembed maps google responsive di website

Cara mengembed maps google responsive di website

Sudah lama juga saya tidak menulis di blog ini, maklum banyaknya project yang masuk menyita waktu sehingga saya baru sempat menulis lagi, pada kesempatan kali ini saya akan memberikan sedikit tips tutorial Cara mengembed maps google responsive di website, biasanya saya aplikasikan maps google pada saat create halaman kontak web company profile.

Jadi di halaman kontak kami pada web company profile yang sudah saya sering buat saya selalu menyertakan maps google kedalam halaman kontak kami tersebut, tujuannya adalah tidak lain memudahkan user untuk mencari lokasi dari perusahaan tersebut.

Baik tanpa perlu panjang lebar langsung saja, untuk membuat google maps responsive sebenarnya kita cukup menggunakan CSS saja, untuk mencobanya silahkan ada copy dan pastekan kode berikut ini

<html>
<head><title>Responsive Maps | www.hakkoblogs.com</title>
<style>
    .google-maps {
        position: relative;
        padding-bottom: 75%; // Kode ini aspek rasio dari tampilan
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
</style>
</head>
<body>
<div class="google-maps">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d126899.47380449671!2d107.08422224960219!3d-6.315041319647068!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e699a97cdfd23f3%3A0xa467efa8d683cc31!2sCikarang%2C%20Bekasi%2C%20Jawa%20Barat!5e0!3m2!1sid!2sid!4v1571824317404!5m2!1sid!2sid" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
</div>
</body>
</html>

kemudian simpan dengan nama maps.html, lanjut silahkan anda buka file tersbut di browser kesayangan anda, jika berhasil maka anda akan mendapatkan tampilan maps responsive seperti gambar yang ada di bagian atas postingan ini.

Penjelasan singkat kode

pada kode css bisa terlihat kode berikut


position: relative; // membuat posisi meyesuaikan layout

padding-bottom: 75%; // Kode ini aspek rasio dari tampilan


Semoga tutorial singkat ini bisa berguna bagi anda yang membacanya, silahkan di coba dan dipraktekkan, pantengin terus www.hakkoblogs.com untuk mendapatkan tutorial terbaru terkait informasi teknologi dan pemrograman.

Selamat Mencoba

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel