Sebelumnya saya sudah pernah membuat postingan tentang Google Maps, namun pada postingan itu kita hanya membuat embed Google Maps untuk tempat kita untuk kita tampilkan di website kita.
Nah kali ini kita tidak hanya membuat embed Google Maps saja, namun juga sekaligus cara menandai tempat di Google Maps sehingga tempat kita dapat kita cari di Google Maps.
Untuk mulai menandai tempat kita di Google Maps, silahkan ketikan di kotak pencarian Google untuk nama tempat yang ingin Anda tandai di Google Maps kemudian klik link Maps untuk menuju Google Maps dan silahkan masuk dengan akun Google Anda seperti gambar berikut:
Atau Anda bisa langsung menuju link berikut dengan akun Google Anda kemudian ketikan nama tempatnya di kotak pencarian: https://www.google.co.id/maps/
Selanjutnya akan terbuka halaman Google Maps seperti di bawah ini, kemudian klik link "Add (nama tempat Anda) to Google Maps".
Kemudian lengkapi kotak yang tersedia sesuai dengan informasi tempat kita seperti Nama, Alamat, Kategori, Phone, Website. Selanjutnya pindahkan marker atau pointer yang muncul ke titik tempat kita yang ingin kita tandai, lalu setelah marker-nya pas dengan tempat kita tinggal klik tombol "Submit".
Selanjutnya akan masuk email dari Google Maps ke kotak masuk email Anda yang menyatakan bahwa tempat yang kita tandai telah diterima dan akan di-review. Kemudian selanjutnya setelah proses review selesai maka akan masuk lagi email yang menyatakan bahwa tempat kita telah sukses ditambahkan ke Google Maps, tetapi kadang tempat kita tidak perlu review langsung sukses ditambahkan di Google Maps dengan masuk email seperti gambar di bawah. Untuk mengeceknya, Anda tinggal klik link "See Your Addition" yang terdapat pada email tersebut untuk melihat tempat Anda di Google Maps. Dan perlu diingat, Google memerlukan waktu sekitar 24 jam untuk benar-benar menampilkan tempat kita di Google Maps sampai tempat kita tampil ketika dicari.
Untuk mengambil kode embed Google Maps tempat kita, silahkan klik ikon Menu di pojok kiri atas lalu pilih menu "share or embed maps" lalu silahkan kode kode iframe "Embed Map" seperti di bawah ini.
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3953.9207513330716!2d108.6513236!3d-7.6916542!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xf18aa9a899b3191e!2sPondok+Nankenz!5e0!3m2!1sen!2s!4v1441874163329" width="600" height="450" frameborder="0"style="border:0" allowfullscreen></iframe>Agar menjadi responsive, silahkan rubah sedikit kode di atas dengan menghapus kode
width="600" height="450" frameborder="0" dan menambahkan kode width:100%;height:450px pada style sehingga menjadi seperti di bawah ini.<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3953.9207513330716!2d108.6513236!3d-7.6916542!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xf18aa9a899b3191e!2sPondok+Nankenz!5e0!3m2!1sen!2s!4v1441874163329" style="border:0;width:100%;height:450px" allowfullscreen></iframe>Atau bisa menggunakan kode javascript di bawah ini yang saya ambil dari kode responsive youtube dan ternyata bisa digunakan untuk responsive iframe Google Maps.
<script>
//<![CDATA[
document.write('<div style="text-align:center;margin:0 auto;width:100%;"><div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:0;"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3953.9207513330716!2d108.6513236!3d-7.6916542!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xf18aa9a899b3191e!2sPondok+Nankenz!5e0!3m2!1sen!2s!4v1441874163329" style="border:0;position:absolute;top:0;left:0;width:100%;height:100%;" allowfullscreen></iframe></div></div>');
//]]>
</script>Silahkan ganti kode url iframe yang saya marking di atas dengan url dari iframe Google Maps Anda, dan akan tampak seperti di bawah ini.
Selamat mencoba...
EmoticonEmoticon