menampilkan google maps di web browser dengan html5
advertisement
MENAMPILKAN GOOGLE MAPS DI WEB BROWSER DENGAN HTML5 Agung Nugroho [email protected] :: http://ngapainbingung.com Abstrak Google Maps merupakan maps yang paling popular karena keakuratannya dan sangat powerfull, karena itu banyak para developer menggunakan layanan ini untuk menampilkan informasi maps pada aplikasi buatannya. Karena kemudahan dalam menggunakannya, kita hanya harus mendaftar aplikasi kita ke google untuk mendapatkan kode API (Application Programming Interface) yang akan digunakan untuk verifikasi kode kita untuk meminta sebagian layanan yang google berikan. Kata Kunci: HTML5, Web, Google, Maps Pendahuluan Maksud dari artikel ini adalah sebagai untuk menambah pengetahuan dasar bagaimana tentang membuat tampilan maps pada web browser dengan. Ini penting karena tanpa ada dasar dalam artikel ini, maka para developer yang sedang belajar dan mengenal google maps pada web browser akan kesulitan dalam mengkonfigurasinya. Google API merupakan layanan yang google berikan untuk para developer agar dapat menyisipkan layanan google ke dalam aplikasi buatan mereka untuk menambah fitur yang ada pada aplikasi buatan mereka. Selain itu pada developer juga tidak dipusingkan dengan bagaimana membuat layanan seperti google buat, karena kita hanya harus meminta layanan mereka dengan gratis. Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org Pembahasan Hal pertama yang harus kita ketahui adalah apa itu API, API (Application Programming Interface) adalah fungsi standar/ layanan standar yang diberikan aplikasi untuk membuat aplikasi lain dengan menggunakan fungsi tertentu. Nah gampangnya adalah jika kita ingin membuat aplikasi dengan layanan yang sama, contohnya jika kita ingin menampilkan google maps pada aplikasi buatan kita, maka kita harus minta izin dan minta kunci kepada google untuk mendapatkan data yang kita butuhkan. Jadi minta izin dulu ya . Nah penjelasan API itu mirip seperti itu, ini sudah banyak diterapkan oleh banyak korporasi besar seperti Google. Untuk menampilkan Google Maps pada web broser dengan HTML5, terlebih dahulu kita harus meminta kode API untuk dimasukkan ke aplikasi kita. Silahkan anda login akun google anda terlebih dahulu, kemudian buka link ini https://console.developers.google.com/apis/library?project=web-map-167503 kemudian akan muncul seperti ini, lalu pilih Google Maps JavaScript API Lalu klik Kredensial – Buat kredensial, Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org Lalu akan muncul kode yang gak beraturan seperti ini Nah kode yagg berantakan itu yang akan kita simpan dan akan kita gunakan untuk disisipkan di pemrograman yang akan kita buat. Lalu kita buka notepad dan masukkan kode dibawah ini <!DOCTYPE html> Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org <html> <head> <title>Simple Map</title> <meta name="viewport" content="initial-scale=1.0"> <meta charset="utf-8"> <style> /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="map"></div> <script> var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: -6.239748, lng: 106.6517796}, zoom: 18 }); Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org } </script> <script src="https://maps.googleapis.com/maps/api/js?key= masukkan key yang didapat dari google tadi &callback=initMap" async defer></script> </body> </html> Nah sekarang masukkan kode API yang sudah didapat tadi. Yang akan menjadi seperti ini <!DOCTYPE html> <html> <head> <title>Simple Map</title> <meta name="viewport" content="initial-scale=1.0"> <meta charset="utf-8"> <style> /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } </style> Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org </head> <body> <div id="map"></div> <script> var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: -6.239748, lng: 106.6517796}, zoom: 18 }); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDkD8MqgiNQ45yoKSDv TP9ZVVXy780q6iw&callback=initMap" async defer></script> </body> </html> Lalu simpan dengan ekstensi html dan di direktori web anda seperti Htdocs di XAMPP atau di web hosting kita. Lalu kita coba running dengan web browser. Akan muncul tampilan seperti ini. Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org Nah kita sudah selesai menampilkan google maps di web buatan kita. Penutup Itu tadi adalah bagaimana kita menampilkan Google Maps pada web aplikasi buatan kita, dari kita harus meminta kode API pada google sampai melakukan konfigurasi pada HTML kita, semoga artikel ini bisa menjadi acuan untuk belajar dan berguna untuk kita semua, terutama untuk yang sedang belajar HTML5 dan menampilkan Google Maps pada HTML5. Referensi Pengalaman Sendiri Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org Biografi Nama saya Agung Nugroho, saya sedang menjalani studi Strata satu di salah satu STMIK di kota tangerang. Saya menyukai jaringan karena dapat menyatukan dari yang FOTO sebelumnya belum terhubung menjadi terhubung dan saling berbagi sumber daya. Cita cita kedepannya ingin belajar ke Android dan menjadi Developer Android. Amiin . jika ingin menghubungi saya bisa lewat email : [email protected] Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
