Tutorial Membuat Google Maps Dan Menentukan Lokasi Sendiri

Tutorial Membuat Google Maps Dan Menentukan Lokasi Sendiri. Hal ini dapat berguna jika Sobat membuat web untuk hotel, perumahan, ataupun toko online agar pengunjung dapat mengetahui lokasi Sobat dengan tepat. Dan dengan begitu akan memberikan kepercayaan tersendiri terhadap layanan online yang Sobat bangun. Karena jika tidak ada kepercayaan, maka usaha online yang Sobat bangun akan sia-sia saja.

Kali ini saya akan share cara membuat Google Maps dengan menentukan lokasi kita sendiri dan menambahkan link web kita pada lokasi yang kita buat.
Sebenarnya link tersebut tersemat sebagai rel="nofollow" namun setidaknya kita sudah menanamkan link blog kita di salah satu service tools milik Google.
Untuk memulainya, silahkan Sobat masuk ke webnya dan klik tombol Create a new map di bawah ini.
Google Maps: https://mapsengine.google.com/map/



Kemudian setelah terbuka jendela baru, silahkan klik anchor text Untitled Map di kotak sebelah kiri untuk memulai membuat map Sobat sendiri.



Kemudian silahkan isi Map Title dan deskripsi untuk map yang Sobat buat pada form dialog box yang muncul selanjutnya.



Kemudian silahkan ketikan nama tempat atau daerah Sobat untuk menuju ke daerah Sobat dengan mudah pada kotak search di atas.

Setelah peta daerah tempat tinggal Sobat terbuka silahkan cari tempat Sobat dengan men-zoom petanya agar mudah menemukan tempat kita yang tepat pada peta tersebut. Setelah Sobat menemukan titik yang tepat untuk rumah Sobat, silahkan klik ikon Marker di bawah kotak pencarian di atas kemudian klik pada titik yang tepat sebagai tempat tinggal kita. Kemudian silahkan beri nama dan deskripsi untuk titik tersebut.

Kemudian silahkan beralih pada kotak putih di sebelah kiri layar, di situ terdapat tab Style, Data, dan Label.
Tab Style untuk merubah gaya pointer/marker yang Sobat tentukan tadi sebagai ciri titik tempat tinggal Sobat.
Tab Data untuk menentukan data tempat tinggal Sobat yang muncul ketika seseorang mengklik marker tersebut.
Tab Label untuk memberikan label pada ikon Marker Sobat.

Kemudian silahkan klik tab Data untuk menyematkan link web Sobat pada data peta kita. Kemudian silahkan klik sobat panah kecil dan klik Insert Column After.



Kemudian ketikan URL pada kolom yang tersedia dan biarkan type-nya pada text.



Lalu silahkan re-fresh halamannya agar colom URL yang kita buat tadi muncul. Setelah itu silahkan klik kotak kosong di bawah tab URL dan paste URL blog Sobat di situ.



Sekarang coba klik marker titik tempat tinggal Sobat. Jika di situ belum muncul URL yang kita buat tadi silahkan klik icon pensil (edit) kemudian centang radio button URL-nya.



Sehingga ketika marker-nya diklik akan tampak seperti di bawah ini.



Kemudian silahkan klik tombol Share di pojok kanan atas, lalu klik tulisan Change pada Private dan rubah menjadi Publik on the web.





Kemudian silahkan klik icon folder pada kotak di sebelah kiri layar dan klik Embed on my site untuk mendapatkan kode embed untuk dipasang di blog kita.



Untuk Tamplate Valid AMP HTML bisa pakai yang ini

<amp-iframe width="600" height="400" layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups" frameborder="0" src="https://www.google.com/maps/d/embed?mid=1MwM_DNdId-tbm8MHW3PcQZk0KDU"> </amp-iframe>

Agar widgetnya menjadi responsive, maka Sobat perlu memodif sedikit kode frame-nya, biasanya kode frame-nya akan seperti berikut ini.

<iframe src="https://www.google.com/maps/d/embed?mid=1MwM_DNdId-tbm8MHW3PcQZk0KDU" width="640" height="480"></iframe>

Ganti kode width="640" height="480" menjadi style="width:100%;height:480px;" sehingga menjadi seperti di bawah ini.

<iframe src="https://www.google.com/maps/d/embed?mid=1MwM_DNdId-tbm8MHW3PcQZk0KDU" style="width:100%;height:480px;"></iframe>

Bagi yang tidak ingin pakai iframe, Sobat bisa menggunakan script iframe loader agar iframe tidak terdetek yang bisa mengurangi nilai seo blog kita. Sebagai contoh seperti Google Maps Darwin Isrin di bawah ini.

Sumber : Kompiajaib.com