Langsung ke konten utama

Menampilkan Google Map Berformat Gambar di Website

Sudah kita ketahui bersama, bahwasannya penggunaan peta menjadi salah satu kebutuhan manusia yang sudah di gunakan beratus ratus tahun lamanya, apalagi dewasa ini penggunaan peta semakin masif di implementasi kan di segala aspek bidang, salah satu nya di dunia teknologi aplikasi.

Eksis nya dunia per peta an tak lepas dari semakin interaktifnya perkembangan fitur dari map itu sendiri, dari yang awalnya hanya sebatas penunjuk lokasi / arah, menjadi sarana infografis yang mudah di pahami, juga berubah menjadi sarana eksis di dunia maya dengan memamerkan lokasi nya saat ini.

Salah satu penyedia layanan peta yang paling nge hits saat ini adalah Google Maps, yang di kembangkan oleh perusahaan mesin pencari ternama di dunia, Google. Dengan Google Maps, kita bisa membuat dan mengembangkan berbagai macam aplikasi yang memanfaatkan fitur peta. Salah satu fitur yang dapat kita gunakan yaitu menampilkan peta dengan format gambar.

Kelebihan kita menggunakan format gambar yaitu kita tidak perlu lagi menggunakan javascript pada penggunaannya di web dan juga dalam segi ukuran dan waktu load, format gambar tentu lebih cepat di tampilkan dan lebih ringan.

Cara menggunakan nya yaitu, dengan memberi tag <img> seperti biasanya, namun penggunaan source nya dengan format seperti ini:
<img src="https://maps.googleapis.com/maps/api/staticmap?center=[latitude],[longitude]&zoom=[angka bulat]&format=png&sensor=false&size=640x480&maptype=roadmap" alt="Peta Daerah xxx">
Penjelasannya:

center=[latitude],[longitude] adalah menentukan lokasi yang akan kita tampilkan, [latitude],[longitude] dapat kita isi value nya dengan latitude dan longitude dengan di pisahkan tanda koma (,) tanpa tanda brancket ([ ]), misal ingin kita tampilkan lokasi Pelabuhan Tanjung Perak, tinggal kita isi latitude dan longitude nya dengan -7.197399, 112.733122

zoom=[angka bulat] adalah menentukan besaran zoom atau pembesaran peta yang akan kita tampilkan. Semakin tinggi angkanya, semakin besar zoom atau pembesaran yang kita lakukan, dengan artian kita makin dekat dengan objek darat yang kita tampilkan. Contoh: zoom=14.

size=640x480 adalah ukuran gambar yang akan kita tampilkan, agan sista bebas mengganti yang kalian suka dan sesuai kebutuhan.

maptype=roadmap adalah jenis peta yang akan kita gunakan, kita bisa menggunakan beberapa tipe peta, antara lain:
MapType.ROADMAP memperlihatkan tampilan peta jalan default. Ini adalah tipe peta default.
MapType.SATELLITE menampilkan citra satelit Google Earth
MapType.HYBRID menampilkan kombinasi tampilan normal dan satelit
MapType.TERRAIN menampilkan peta fisik berdasarkan informasi medan.
Sehingga jika kita gunakan penuh, kurang lebih seperti ini contoh source image nya (Contoh menggunakan Pelabuhan Tanjung Perak):
<img alt="Peta Daerah Pelabuhan Tanjung Perak" src="https://maps.googleapis.com/maps/api/staticmap?center=-7.197399,%20112.733122&amp;zoom=14&amp;format=png&amp;sensor=false&amp;size=1280x680&amp;maptype=roadmap" />
Dan hasil nya akan seperti ini:



Bagaimana, mudah kan? Semoga tutorial ini bermanfaat. Jangan lupa juga untuk selalu share di sosmed kalian, karena siapa tau banyak teman kalian yang membutuhkan.

Komentar

Postingan populer dari blog ini

Membuat Validasi Mencocokkan Form Password Dengan Javascript

Seringkali kita dalam membuat sebuah program website membutuhkan sebuah inputan kedalam database yang berfungsi untuk di tampilkan (misal di website dinamis) maupun untuk fungsi validasi (misal login pada sebuah halaman website).

Salah satu contoh inputan yang penting dalam fungsi sebuah website dinamis adalah password. Nah, pada suatu kasus saat kita akan mengganti sebuah informasi kita pada website tersebut kita di minta untuk memasukkan password kita kembali untuk memvalidasi apakah yang mengganti informasi ini adalah asli Anda sendiri ataukah ada orang lain yang sengaja ingin mengganti informasi pribadi Anda (dalam konteks negatif, semisal akun Anda di hack).

Ada kalanya saat kita di minta memasukkan password tadi, kita disuruh mengulang untuk menulis lagi password yang sudah kita tulis sebelumnya untuk mengkonfirmasi apakah sudah benar atau belum. Misal password kita 123456, maka di form konfirmasi password juga di isi 123456 untuk menunjukkan bila password kita sudah benar, bil…

Restore Script Yang Hilang Saat Notepad++ Stop Working

Halo Agan Sista semua, gimana kabarnya? Masih semangat belajar pemrograman kan, code writer apa yang Anda gunakan saat ini? Dari sekian banyak aplikasi writer baik itu yang gratis ataupun yang berbayar, saat ini banyak yang menggunakan aplikasi salah satunya Notepad++ di karenakan selain free juga ringan di gunakan. Namun pernahkah Anda mengalami saat yang menyebalkan dimana kita sedang asik asiknya menulis kode pemrograman dan sudah dapet banyak banget sampai beratus ratus line tiba tiba aplikasi Notepad++ tersebut Stop Working?

Mungkin untuk sebagian besar aplikasi sih tidak masalah, namun menjadi masalah besar buat pengguna Notepad++ di karenakan script yang sudah agan sista tulis banyak sampai beratus ratus line tersebut tiba tiba bisa hilang tanpa jejak, nah lo. Pasti kesel kan, dimana saat itu lagi di kejar deadline lagi.
Terus bagaimana solusi nya? Sebenarnya dari aplikasi Notepad++ sendiri sudah terdapat fitur bawaan buat mem-backup script yang hilang tadi saat aplikasi menga…

Mengukur Jarak Antar Pelabuhan Menggunakan Netpas

Halo agan sista, kali ini saya akan membagikan dan mengulas sebuah software yang sangat membantu sekali buat mahasiswa yang berkaitan dengan kelautan dan transportasi laut atau agan sista yang bekerja di bidang pelaut seperti Mualim 2 / Second officer / Second mate.

Aplikasi ini bernama Netpas Distance, sebuah software yang menurut mimin keren dan lengkap sekali fitur nya yang sangat membantu pekerjaan di bidang pelayaran, makanya sebenarnya aplikasi ini di fokus kan untuk perusahaan pelayaran.

Beberapa fitur yang di sediakan memang sangat mumpuni, antara lain :

ETAAnti PiracyPorts and Distance DatabaseCoordinates to coordinates distanceWeather ServiceSea IceRouting Point (RP)(S)ECA distanceSimple estimationVessel managerVisual route on e-world map Cara Menggunakan Netpas Pertama, download aplikasi Netpas dulu disini. Setelah itu, instal pada PC agan sista masing masing sesuai instruksi sampai selesai.

Untuk bisa menggunakan aplikasi ini kita harus mendaftar dulu di website nya untuk …