Thursday, September 13, 2012

Cara membuat Google Maps serta memasang di website


By on Thursday, September 13, 2012

Saat 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.

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.


My Places maps googlecreate 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.

sumber : http://rudydevianto.com

Mrapenweb About

Mrapenweb berawal dari sebuah ide mahasiswa dan alumni mahasiswa untuk mendirikan Organisasi jasa desain web / jasa pembuatan website murah yang juga menyediakan layanan pemograman software / web aplikasi profesional (web aplikasi berbasis PHP - MySQL) maupun pemrograman desktop.

1 komentar: