Minggu, 20 Maret 2016

Cara Menyematkan / Menampilkan Peta Google Map pada Website

Cara Memasang / Menyematkan dan Menampilkan Peta Google Map di Website (Blogspot / Wordpress)


Anda dapat menyematkan peta dasar, citra Street View, petunjuk arah mengemudi, atau penelusuran lokal ke situs web atau blog dari Google Maps baru. Saat pemirsa masuk ke Google, mereka juga dapat melihat rumah dan kantor, tempat tersimpan, dan banyak lagi di peta Anda.

Mendapatkan kode

  1. Pastikan bahwa peta yang ingin disematkan muncul di tampilan peta saat ini.
  2. Klik ikon roda gigi setelan di kanan bawah.
  3. Klik Bagikan dan sematkan peta.
  4. Pada kotak yang muncul, pastikan tab Sematkan peta dipilih.
  5. Pilih ukuran semat yang diinginkan, kemudian salin HTML dan tempelkan kodenya ke kode sumber dari situs web atau blog.
Perlu diingat bahwa informasi lalu lintas dan beberapa fitur Maps lainnya mungkin tidak tersedia dalam peta sematan.

Sumber
=====

Google Maps adalah salah satu aplikasi web yang disediakan oleh Google untuk menampilkan Peta di Desktop maupun Mobile. Aplikasi Web Google Maps ini sangat bermanfaat bagi webmaster atau blogger untuk menunjukan lokasi yang diinginkan kepada pengunjung Website atau Blognya. Lokasi yang ditunjukan bisa saja merupakan alamat Kantor, lokasi rekreasi, lokasi hotel ataupun lokasi pusat perbelanjaan. Cara untuk memasang dan menampilkan Peta Google Map ini ke website kita pun boleh dikatakan cukup mudah, hanya beberapa langkah yang harus kita kerjakan untuk menampilkannya.

Langkah-langkah Memasang dan Menampilkan Peta Google Map di Website / Blog

Berikut dibawah ini akan saya sharing langkah-langkah untuk memasang dan menampilkan Peta Google Map di Website dan Blog terutama untuk platform Blogspot dan Wordpress.

Langkah di Google Maps

  1. Ketikan alamat Google Maps ini di address bar browser anda : https://www.google.co.id/maps
  2. Di Kotak Pencarian Google Maps, silakan ketikan lokasi yang diinginkan.
    Misalnya : Banjarmasin
  3. Google Maps akan menampilkan lokasi yang kita inginkan tersebut.
  4. Klik gambar "Gear"  yang terdapat di kanan bawah tampilan Google Maps.
  5. Akan muncul beberapa pilihan seperti :
    - Share and embeb map / Berbagi dan menyematkan peta
    - My Places / Tempat Anda
    - Web History / Riwayat
    - Search Setting / Setelan penelusuran
    - English - Inggris
    - Pilih dan Klik [Share and embeb map] / [Berbagi dan menyematkan peta]
  6. Google Maps akan memunculkan window yang menampilkan alamat link.
  7. Pilih dan Klik [Embeb map] / [Sematkan peta] pada window tersebut.
  8. Copy link yang ada didalam kotak.
    Contoh Kode --> Lokasi Banjarmasin
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d63729.61327507391!2d114.57440668208005!3d-3.3252596152784077!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2de4209aa1eec961%3A0x26030bfcc09204d2!2sBanjarmasin%2C+Kalimantan+Selatan!5e0!3m2!1sid!2sid!4v1416462320398" width="100%" height="100%" frameborder="0" style="border:0"></iframe>
    
  9. Kemudian Pastekan ke Blog atau Website anda. 

Langkah di Website atau Blog

Blogspot / Blogger
Berikut ini langkah-langkah untuk meletakan link yang kita Copy dari Google Maps ke Blogger / Blogspot.
  1. Masuk ke Dashboard Blogspot / Blogger anda
  2. Akses Posting atau artikel yang akan anda tampilkan Peta Google Maps
  3. Klik [HTML] untuk memasukan kode link yang telah di copy dari Google Maps.
    Catatan: Kode tersebut tidak dapat dimasukkan ke Text Editor Compose.
  4. Pilih lokasi peletakan yang sesuai dengan keinginan anda
  5. Paste-kan "link" tersebut.
  6. Anda dapat lihat kembali atau review hasilnya dengan klik [Compose] atau [Preview].
Wordpress
Berikut ini langkah-langkah untuk meletakan link yang kita copy dari Google Maps ke Wordpress.
  1. Masuk atau login ke Dashboard Wordpress anda
  2. Akses Posting atau artikel yang akan anda tampilkan Peta Google Maps
  3. Klik [Text] untuk memasukan kode link yang telah di copy dari Google Maps tadi.
    Catatan: Kode tersebut tidak dapat dimasukan ke Text Editor Visual.
  4. Pilih lokasi yang tepat untuk meletakan Peta Google Maps dalam artikel anda
  5. Paste-kan "link" tersebut
  6. Anda dapat review kembali hasilnya dengan klik [Preview]
Sekian cara untuk memasang dan menampilkan Peta Google Maps di Website atau Blog anda baik yang berplatform Blogspot maupun Wordpress.
Semoga bermanfaat dan Selamat Mencobanya.

Tidak ada komentar:

Posting Komentar