Tips Dan Trik Seputar Jquery , CSS, PHP

Cara membuat Google Maps serta memasang di website

google mapsSaat ini kebanyakkan website atau blog sudah dipasang Google Maps untuk itu kali ini saya akan membahas tentang bagaimana cara untuk mendapatkan Google Maps serta mendapatkan code Iframe HTML untuk dipasang di blog atau website.

Oke kali ini saya akan memberikan tutorial bagaimana cara mendapatkan Google Maps beserta cara membuat tanda peta berikut cara mengintegrasikan kedalam website atau blog WordPress.

Mari kita mulai…

Pertama kali kawan harus memiliki Account Google, jika belum punya silahkan Register terlebih dahulu, account Google bisa berupa layanan Email dari Google.

Saya berasumsi  kawan sudah punya account Google dan kawan bisa membuka link : http://maps.google.com.


My Places maps google

Untuk pertama kali setelah login ke Google Maps, kawan perlu membuat peta sendiri untuk itu silahkan klik My Places dan dilanjutkan dengan Create New Map.


create new maps


Klik dan drag icon ketempat yang dimaksud ( bisasanya kantor / toko/ rumah ).

 

new maps

 

Isi keterangan yang dibutuhkan Title dan Dikripsi dari peta, setelah selesi klik OK.

 

Create Title anda Discription maps

Peta sudah berhasil dibuat, dan kawan perlu mengisi keterangan dari My Places, isilah sesuai yang diminta setelah selesai mengisi klik Done.

Kawan sudah berhasil membuat tempat dan peta Maps dari Google dengan icon Standard atau Default dari Google, kawan bisa merubah icon tersebut dengan icon yang lain atau dengan gambar atau logo perusahaan untuk itu kita kembali melihat tutorial gambar dibawah ini.

 

icon maps

 

Kembali klik icon Maps Google , muncul kotak dialog dan untuk mengganti Icon silahkan kawan klik logo icon dipojok kakan atas.

 

chance Icon Maps

 

Untuk mengganti dengan icon yang lain kawan tinggal memilih pada icon yang telah disediakan , jika ingin mengganti gambar sendiri kawan tinggal klik Add An Icon.

 

My Icon maps

Kawan tinggal memasukkan Url dari image yang akan dibuat sebagai icon maps ( sebelumnya harus diupload dulu ke hosting ) dengan ketentuan gambar tidak lebih dari 64px X 64px dan klik OK jika sudah selesai.

new icon maps

Nampak sudah tercipta icon baru dan klik Ok jika dirasa sudah cocok.

Sekarang ini saatnya untuk mendapatkan Code HTML untuk dipasang di Website atau blog.

Get HTML maps

Pada pojok kanan atas ada icon sepeti gambar Link, klik icon tersebut.

Customized Embedded Maps

Muncul kotak dialog, jika ingin langsung apa adanya ukuran maps google, kawan bisa mengcopy kode HTML dari Google Maps atau jika ingin menyesuaikan bisa klik Customized and Preview embedded Map.

custom embedded map

 

Kawan bebas menentukan ukuran dari map, sesuaikan dengan layout website atau Blog, setelah selesai Copy kode HTML dan siap digunakan.

 

New Page wordpress

 

 

Untuk wordpress kawan bisa membuat new page atau new post, pilih tampilan HTML dengan mengganti disebelah pojok kanan.

 

paste Code Embedded Map

Paste pada kotak content dan kawan bisa beralih ke tampilan Visual.

 

Visual map page

 

Kawan bisa menambah artikel lain yang dibutuhkan dan setelah itu klik Publish.

Berhasil !

Maps Google in page website

 

Nah demikian tutorial dalam membuat Google Maps dan memasang kedalam website atau blog, jika ada tambahan lain bisa menirim komentar dibawah ini.


Berlangganan Artikel ?

Silahkan masukkan Email anda sekarang

Kiriman oleh : Google FeedBurner

 

56 Comments
  1. ass….mau tanya ,saya ikutin yang create new maps ito kok langsung ke peta australia ya…cara nentuin lokasi kita , seperti nama jalan daerah kita itu gimana caranya??,

    • Atur lokasi default dulu, klik atur lokasi default atau jika sudah disetting lokasi default, bisa gunakan ubah lokasi default…

  2. info ini yang ane cari2..terima kasih sob, ane mau pasang google map di blog ane

  3. Oke Pak, ThanxU banyak nehh, nambah lagi halaman saya di http://tes.blokm.netne.net/about-me

    Thanks,
    asanoer @ Nur Khasan

  4. bagaimana cara masukin peta kota jakarta di dalam sebuah postingan di website? thanks

  5. gimana cara buat google maps di web pribadi?
    yg persis,pake kotak tempat asal dan tempat tujuan jd orang bisa search lokasi dari web kita,bkn lgsg dari google maps

  6. Saya sdh membuat google map tetapi kenapa kok blm bs?

    • Coba anda baca lebih teliti,mungkin ada yang terlewatkan.

      Biasanya sih anda belum login atau belum memiliki akun Google sewaktu membuat Google Maps.

      Semoga membantu.

  7. pak, saya sudah mencoba ambil link dari google maps tersebut tetapi This map cannot be embedded. bisakah membantu mencarikan solusinya, jika kode link di pasang di laman html maka hanya akan muncul link ke google maps saja

    terima kasih :)

  8. Seharusnya bisa, jika code yang didapat dari google maps di simpan dalamhtml dibuka langsung dibroser bisa langsung nampak.
    Sepertinya google sudah memindah untuk mendapatkan codenya.
    Codenya bisa didapatkan di sebelahkanan tombol print.

    • iy tu pak, kx keluar ny “This map cannot be embedded. Bantuan”
      padahal brp migu lalu bisa lo,,
      mohon solusinya pak, soalnya mau buat peta dengan ukuran yang luas..

  9. bos tolong bagaimana cara supaya saya tahu angka koordinat rumah saya ya trims sblumnya.

  10. Saya juga mengalami masalah yang sama dengan junis,yaitu This map cannot be embedded,code html nya tidak bisa di kopi paste

    • Itu terjadi karena berbagai macam diantaranya tidak disimpan, tidak berada di posisi login dan lain-lain

  11. suwun cak siip .salam bonexmania
    gmana e memasang meta itu aku kan newbiee

  12. haturnuhun.. :)

  13. Trims infonya, sy sudah pasang unt web kantor, http://www.bmmt-hajiumroh.com

  14. terimakasih gan, sangat bermanfaat untuk bisnis saya

  15. Tanya gan..Kan saya buat untuk website pribadi yang masih belum dihosting, semua yang diatas sudah mau keluar. Tapi ketika keluar dari akun dan cari lokasi yang dibuat nampaknya belum bisa publish. Kira2 kenapa?apa web yang sy bkin harus dhostingkan dahulu baru bisa terlihat secara publish?Terima kasih :)

  16. gan, tanya; sudah saya paste kode html; tapi gambar peta gak muncul; yang muncul hanya link “Lihat Peta Lebih Besar”. mohon pencerahan, terima kasih.

  17. gmn cr post lokasi dgn googlemaps ke update status facebook yah??kayak fasilitas “check-in” dari facebook itu loh.

    tmn ku ada yg slalu check in di facebook pk googlemaps.

    thanks yaa

  18. terima kasih tipsnya… sangat membantu

  19. Mas, kalau pakai presta shop ãpa sama saja ?

    • Saya tidak pernah menggunakan prestashop, tetapi pernah mencoba prestashop, sepertinya bisa.

  20. wow…mantabs gan. makasih tutorialnya. langsung tkp aja.

  21. segera saya praktekkan pak terima kasih banyak

  22. Mas setelah saya copy di kode html dan dilihat di visual sudah muncul kotak kuning, namun saat di publish kok cuma keluar tulisan “lihat XXXXX dipeta lebih besar”

  23. Trimakasih gan, Infonya sangat membantu.

  24. Terima kasih kawan, artikel ini yang saya cari dari dulu. Bisa ga yach biar lokasinya otomatis terpasang setiap kita posting ?

  25. Masih bingung, saya sudah sampai tahap Customized and Preview embedded Map, setelah itu ga tau lagi gmn, itu muncul “About Me” nya dari mana ya?

    • About Me nya itu buat page baru di WordPress atau di blog lain atau buat pasang script dari google maps

      • Dear Mas Rudy
        Saya sudah coba tapi belum bisa boleh minta nomor hpnya dan kalau bisa sms mas mau diskusi thanks

  26. mau tanya gimana cara napilin icon jika di joom gambar iconnya tidak pecah ttp ttp kecil

    • Dear Mas Ali… klo blm terjawab, cara mencantumkan icon, mas harus mengupload ke dalam blog/website dulu, kemudian url nya dicopy ke menu add icon google map yg berada di kanan atas seperti petunjuk diatas
      Thanks

  27. Thanks share nya
    Sangat membantu untuk memudahkan kita dalam mencantumkan peta google ke dalam website.
    Salam Perubahan

    Liliana – Sahabt Perubahan Jatrova

  28. terus cara biar tampil di searcing itu gmna gan

  29. Nice Info gan …

  30. nice info gan.

    Bisa juga ditambahin rute perjalanan terdekat pada button “GET DIRECTION”. Cmiiww :-D

  31. terima kasih banyak ilmunya pak Rudi, Sukses selalu

  32. Thanks impohnya gan!
    Mantab n ngebantu banget…

  33. salam kenal pak… saya mau tanya pak gn.. tp sebelumnya saya cerita saya lagi bikin website SIG saya sudah bisa masukkan peta ke web dan berhasil tp msih ada menu satu yang kurang yaitu menu pencarian jarak saya pingin di menu pencarian jarak itu Tempat asal dan tempat tujuan. contoh jika di cari tempat asal JAKARTA tempat tujuan BANDUNG makan akan muncul di web yang kita bikin bagai mana kodenya dan cara memasang ke website kita terimaksihhh…

  34. Trima Kasih ini sangat membantu, salah satu yang di perlukan di ol shop biar terpercaya harus ada peta lokasinya ^^

  35. saya sdh login, stelah mau salin link nya kx tulisan custome and riviwe gk ada malah “This map cannot be embedded. Bantuan”

  36. trims bangetnih,dah aku bisa pasang,walau ada sedikit perubahan/pembaharuan dari google tapi bisa dengan sedikit usaha.

  37. mass saya kok gak jadi yah bikinnya…

  38. Agak bingung gan, please help me .. TQ

Leave a Reply

*