Untuk memasang google maps pada website, langkahnya sangat mudah, ketika berada digoogle maps, zoom in area yang ingin anda tampilkan di web, clik icon gear, dan pilih Embed Maps pada menu.
secara default, maps yang kita sematkan pada website belum responsive, artinya panjang dan lebar google maps yang akan kita tampilkan tidak dapat menyesuaikan ukurannya terhadap kontainer, untuk itu perlu dilakukan sedikit modifikasi agar tampilan maps kita menjadi lebih responsive, caranya sangat mudah :

1. letakkan code dari google maps dalam sebuah kontainer, misalnya dalam class “google-maps” :

contoh :

2. lalu di file css anda tambahkan properti berikut :


.google-maps {
position: relative;
padding-bottom: 75%; // This is the aspect ratio
height: 0;

overflow: hidden;

}

.google-maps iframe {

position: absolute;

top: 0;

left: 0;

width: 100% !important;

height: 100% !important;

}