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.