Halo sahabat Blogger!! Bertemu dengan saya lagi,kali ini kita akan membahas tentang Google Maps. Di sini kita akan menjelaskan bagaimana caranya menampilkan sebuah peta digital pada halaman website kita. Oh iya sebelumnya sudah pada tahu kan apa Google Maps itu, Jika masih banyak yang belum tahu mari kita berkenalan dulu dengan si Google Maps ini.
Apa sih Google Maps itu ? Seperti apa rupanya?
Google Maps adalah layanan pemetaan web yang dikembangkan oleh Google. Layanan ini memberikan citra satelit, peta jalan, panorama 360°, kondisi lalu lintas, dan perencanaan rute untuk bepergian dengan berjalan kaki, mobil, sepeda (versi beta), atau angkutan umum.
Google Maps dimulai sebagai program desktop C++, dirancang oleh Lars dan Jens Eilstrup Rasmussen pada Where 2 Technologies. Pada Oktober 2004, perusahaan ini diakuisisi oleh Google, yang diubah menjadi sebuah aplikasi web. Setelah akuisisi tambahan dari perusahaan visualisasi data geospasial dan analisis lalu lintas, Google Maps diluncurkan pada Februari 2005.[1] Layanan ini menggunakan Javascript, XML, dan AJAX. Google Maps menawarkan API yang memungkinkan peta untuk dimasukkan pada situs web pihak ketiga,[2] dan menawarkan penunjuk lokasi untuk bisnis perkotaan dan organisasi lainnya di berbagai negara di seluruh dunia. Google Map Maker memungkinkan pengguna untuk bersama-sama mengembangkan dan memperbarui pemetaan layanan di seluruh dunia.(id.wikipedia.org)
Google Maps dimulai sebagai program desktop C++, dirancang oleh Lars dan Jens Eilstrup Rasmussen pada Where 2 Technologies. Pada Oktober 2004, perusahaan ini diakuisisi oleh Google, yang diubah menjadi sebuah aplikasi web. Setelah akuisisi tambahan dari perusahaan visualisasi data geospasial dan analisis lalu lintas, Google Maps diluncurkan pada Februari 2005.[1] Layanan ini menggunakan Javascript, XML, dan AJAX. Google Maps menawarkan API yang memungkinkan peta untuk dimasukkan pada situs web pihak ketiga,[2] dan menawarkan penunjuk lokasi untuk bisnis perkotaan dan organisasi lainnya di berbagai negara di seluruh dunia. Google Map Maker memungkinkan pengguna untuk bersama-sama mengembangkan dan memperbarui pemetaan layanan di seluruh dunia.(id.wikipedia.org)
dari penjelasan di atas dapat saya ulas dan simpulkan kembali bahwa Google Maps adalah sebuah layanan pemetaan web dari Google, untuk dapat menampilkan Google Maps di halaman website kita, kita memerlukan Google Map API untuk dapat menginteraksikan Google Maps dengan website kita. Google Maps API sendiri dibangun tidak hanya untuk Web Service saja namun bisa untuk Android dan paltform lainnya, Sampai saat ini Google Maps API telah mencapai Versi ke 3.
Pada Tutorial kali ini kita akan mencoba menampilkan peta digital biasa, kemudian menampilkan Marker dan hal lainnya, Tentu saja untuk dapat melakukan semua itu kita menggunakan bahasa pemrograman JavaScript (JS).
Persiapan
Untuk Text Editor nya saya menggunakan Sublime Text 3, untuk dapatkan mengikuti tutorial ini saya harap anda telah menguasai basic-basic dari HTML,CSS dan Javascript.
Dibawah ini merupakan langkah-langkah sederhana untuk menampilkan Peta Basic.
- Hal yang pertama yaitu mengImport API JavaScript Google Maps API pada tag <head>
<html> <head> <head> <html> -
Selanjutnya kita buat script untuk menampilkan petanya di dalam tag DIV
-
Terakhir kita buat elemen HTML div sebagai tempat untuk menampilkan peta
penjelasan dari script di atas yaitu yang pertama kita menggunakan Google Maps API yang di load dengan JavaScript untuk menampilkan peta, kemudian kita buat sebuah function "inisialisasi" dengan 2 variabel di dalamnya. Variabel yang pertama yaitu "myPeta" variabel ini berisi peta yang menggantikan elemen HTML div, terus yang ke kedua yaitu variabel "opsiPeta" variabel ini berisi pengaturan google maps yang akan di tampilkan. Ada banyak pengaturan-pengaturan yang bisa digunakan, kita akan bahas sedikit diantaranya ada properti center,zoom dan maptype.
Baca Juga : Menambah Marker dan Menampilkan InfoWindows di Google Maps
- Center digunakan untuk mengatur titik tengah dari peta, di sini saya menggunakan LatLng dari daerah Cirebon.
- Zoom digunakan untuk mengatur perbesaran zoom pada peta yang digunakan, semakin besar angka zoom yang digunakan maka tampilan peta semakin besar.
- mapTypeId digunakan untuk menampilkan jenis peta ROADMAP, ada beberapa jenis peta selain ROADMAP seperti SATELITE,HYBRID dan TERRAIN.
Tara .....!!! Google Maps berhasil ditampilkan
Source Code lengkapnya
<html>
<head>
<head>
<body>
<body>
<html>
Thank's to jagocoding.comDemikian tutorial kali ini,, Cukup mudah untuk diikuti. Nantikan tutorial berikutnya kita masih membahas seputar Google Maps API. Jika ada hal-hal yang belum dimengerti dan ingin ditanyakan, Silahkan anda berkomentar dengan Sopan di kolom Komentar di bawah.
1 komentar:
Write komentarSlots Casino Games: 7 Tips To Know - DrmCD
ReplyFree Slots 안양 출장샵 Games Online. If 진주 출장샵 you 파주 출장안마 are looking for 평택 출장안마 free casino games to play online, then you are in the right place! 경상북도 출장샵