Octav GoogleMapsAPI

Google Maps API
M.Octaviano Pratama
tavgreen008@gmail.com http://tavgreen.com
Lisensi Dokumen:
Copyright 2003-2012 IlmuKomputer.Com Seluruh dokumen di IlmuKomputer.Com 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 IlmuKomputer.Com.
Saat ini, Google maps API banyak digunakan pada berbagai platform untuk menampilkan peta dengan beragam atribut tertentu sesuai dengan keinginan dari programmer. API (Application Programming Interface) menurut w3schools : An API is a specification used by software components to communicate with each other. An API may describe the ways in which a particular task is performed. Salah satu API yang dapat kita manfaatkan adalah Google API untuk menampilkan peta pada mobile platform,desktop atau web buatan programmer. Dalam tutorial ini hanya dibataskan pada penggunaan API pada web based saja. Berikut contoh screenshot penggunaannya :
Komunitas eLearning IlmuKomputer.Com Copyright 2003-2012 IlmuKomputer.Com
Tahap Awal
Kunjungi terlebih dahulu API Key , dengan mengakses link berikut : https://code.google.com/apis/console gunakan akun google anda untuk mengaksesnya, jika belum mempunyai google account silahkan signup terlebih dahulu, setelah anda login dengan menggunakan google account anda, anda dapat membuat project baru seperti berikut :
Buatlah project baru dengan cara menekan tombol create project Banyak sekali API yang dapat anda manfaatkan setelah anda login. Namun karena tujuan kita disini adalah untuk mengakses maps, maka centang Google maps API v3 : Pada menu persetujuan penggunaan API ini, ceklist I agree kemudian Accept. Pada menu API Projects anda, silahkan kunjungi API Access. Selamat anda telah dapat menggunakan API Google Maps V3
Simple Maps
Sebelum anda mempelajari lebih lanjut mengenai google maps, ada baiknya kita mengenal istilah yang sering keluar didalam penggunaan google maps. Latitude , merupakan garis lintang Longitude , merupakan garis bujur Marker, Penanda lokasi Zoom, memperbesar / memperjauh lokasi
Untuk membuat simple maps seperti gambar diatas, anda dapat membuat dengan script berikut : <script src="http://maps.googleapis.com/maps/api/js?key=Masukankey_anda&sensor=false"> </script> <script> function initialize() { var peta = { center:new google.maps.LatLng(-6.9629731,107.577832), zoom:17, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("googleMap") ,peta); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="googleMap" style="width:100%;height:300px;"></div> Keterangan : - <script src=http://maps.....> digunakan untuk menggunakan API google Maps. - Var peta digunakan untuk inisialisasi dari maps yaitu lokasi, zoom dan tipe - Center merupakan lokasi spesifik yang ingin kita tampilkan - Anda dapat merubah nilai zoom menjadi lebih besar untuk memperbesar kedalaman peta atau menjadi lebih kecil untuk memperkecil kedalaman peta. Agar inisialisasi tipe anda berubah menjadi bertipe lain, silahkan ubah TypeID.ROADMAP menjadi salah satu dibawah : - ROADMAP Tampilan Normal - SATELLITE Tampilan Foto dari satelit - Hybrid Tampilan Foto dari satelit tapi terdapat keterangan nama jalan dan info lainnya Komunitas eLearning IlmuKomputer.Com 3
Copyright 2003-2012 IlmuKomputer.Com
TERRAIN Peta dengan gunung,sungai dll
Advance Maps
Setelah belajar bagaimana membuat basic maps yaitu menampilkan peta standard pada web kita, pada bahasa advance maps, kita akan membuat marker atau penanda lokasi secara detail. Berikut cuplikannya :
Tambahkan baris kode berikut :

<script src="http://maps.googleapis.com/maps/api/js?key=Kode_ANDA&sensor=false"> </script> <script> var posisi=new google.maps.LatLng(LatitudeANDA,LongitudeANDA); function initialize() { var mapProp = { center:posisi, zoom:15, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); var marker=new google.maps.Marker({ position:posisi, animation:google.maps.Animation.BOUNCE, Title:"Lokasi Anda", icon:'unpad.png' }); marker.setMap(map); } google.maps.event.addDomListener(window, 'load', initialize); </script> <div id="googleMap" style="width:100%;height:420px;"></div> Keterangan : animation:google.maps.Animation.BOUNCE,merupakan tipe animasi pada marker anda, yaitu BOUNCE. Terdapat beberapa pilihan dibawah untuk animasi : - DROP - BOUNCE Title:"Lokasi Anda", merupakan hint yang akan muncul ketika anda melakukan hover atau cursor anda melewati marker icon:'unpad.png' merupakan gambar pada marker anda anda dapat melakukan modifikasi seperti gambar berikut :
Selain menggunakan icon, anda juga dapat menggunakan info windows, yaitu suatu teks yang dapat digabungkan dengan event, misalnya ketika anda menekan marker, akan muncul tulisan yang menjelaskan info dari lokasi anda, seperti pada contoh berikut :
Berikut source codenya : function initialize()

{ var mapProp = { center:myCenter, zoom:15, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); var contentString = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h2 id="firstHeading" class="firstHeading">Bandung</h2>'+ '<div id="bodyContent">'+ '<p>Posisi Anda saat ini menunjukan anda berada di Bandung</p>'+ '</div>'+ '</div>'; var infowindow = new google.maps.InfoWindow({ content: contentString }); var marker=new google.maps.Marker({ position:myCenter, animation:google.maps.Animation.BOUNCE, Title:"Lokasi Anda", icon:'<?php echo base_url()?>data_backend/images/unpad.png' }); marker.setMap(map); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); } Dengan menggunakan API Google Maps, anda dapat melakukan apapun yang anda inginkan, atau anda pun dapat menggabungkan aplikasi anda dengan API Google Maps ini misalkan informasi restaurant di suatu daerah, tempat wisata, sistem informasi, system akademik kampus dll.
Penutup
Dalam penyusunan E-book ini, penulis menyadari banyaknya kekurangan, oleh karena itu penulis mengharapkan mendapat kritik dan saran agar penulis dapat menyusun E-book lainnya dengan lebih baik lagi. Apabila pembaca terdapat kesulitan dalam mengaplikasikan materi-materi yang telah diulas sebelumnya, silahkan menghubungi penulis di http://tavgreen.com. Nantikan E-book selanjutnya yang sedang penulis selesaikan.
Referensi
http://www.w3schools.com/googleAPI/default.asp 2013 diakses pada tanggal 23 Januari
https://developers.google.com/maps/documentation/javascript/tutorial diakses pada tanggal 23 januari 2013
Biografi Penulis
M.Octaviano Pratama . Alumni D3 Teknik Komputer Unpad, saat ini sedang melanjutkan studi di D4 Teknik Informatika Kesehatan program kerjasama Seamolec dan Institut Teknologi Bandung. Penulis menggeluti beberapa bidang IT terutama di Pemprograman Java, Game, Interpreter Language, Mikrokontroller, dll. Saat ini membuka startup IT Midhighsolution yang dapat diakses di http://midhighsolution.com dan juga Insanity-studio di http://insanity-studio.com Anda dapat menghubungi penulis pada alamat dibawah untuk diskusi dan projects : http://www.tavgreen.com dan tavgreen008@gmail.com

Octav GoogleMapsAPI

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Octav GoogleMapsAPI

Diunggah oleh

Hak Cipta:

Format Tersedia

Google Maps API

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2012 IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2012 IlmuKomputer.Com

TERRAIN Peta dengan gunung,sungai dll

Tambahkan baris kode berikut :

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2012 IlmuKomputer.Com

Berikut source codenya : function initialize()

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2012 IlmuKomputer.Com

https://developers.google.com/maps/documentation/javascript/tutorial diakses pada tanggal 23 januari 2013

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2012 IlmuKomputer.Com

Anda mungkin juga menyukai