penggunaan api google maps kelompok6
DESCRIPTION
Tugas Matakuliah Rich Internet Aplication - Cara mendapatkan API Google Maps dan PenggunaannyaTRANSCRIPT
API Google Maps1. M Arief Gusti P2. Benedicta GL3. Putu agus wibawa
Garis Besar“ Tentang Google Maps”
Google Maps …
• Google Maps adalah suatu peta dunia yang dapat kita gunakan untuk melihat suatu daerah. Dengan kata lain, Google Maps merupakan suatu peta yang dapat dilihat dengan menggunakan suatu browser. Kita dapat menambahkan fitur Google Maps dalam web yang telah kita buat yang berbayar maupun gratis sekalipun dengan Google Maps API sedangkan Google Maps API adalah suatu library dari google maps itu sendiri yang berbentuk JavaScript.
Tipe Maps
• Pada Google Maps API terdapat 4 jenis pilihan model peta yang disediakan oleh Google, diantaranya adalah:
• ROADMAP : ini yang saya pilih, untuk menampilkan peta biasa 2 dimensi
• SATELLITE : untuk menampilkan foto satelit
• TERRAIN: untuk menunjukkan relief fisik permukaan bumi dan menunjukkan seberapa tingginya suatu lokasi, contohnya akan menunjukkan gunung dan sungai
• HYBRID : akan menunjukkan foto satelit yang diatasnya tergambar pula apa yang tampil pada ROADMAP (jalan dan nama kota)
Services
• Directions API• Distance Matrix API• Elevation API• Geocoding API• Time Zone API• Places API
Kode Versi pada Google Maps V3
• The experimental version, specified with v=3.exp.
• The release version, specified with v=3 or v=3.13.
• A numbered version, specified with v=3.12.
Mendapatkan API Google Maps
1. Pastikan anda mempunyai akun google dan daftarkan akun untuk mendapat API Google maps. Buka alamat url : https://code.google.com/apis/console/
Check list: I have read and …. Lalu continue
2. Akan muncul notifikasi berikut
3. Akan tampil service-service yang disediakan Google, pilih salah satu service yang akan digunakan. Misalnya "Google Maps API v3“ pilih satus menjadi "On"
4. Pada side kiri kita pilih Registered Apps, lalu klik tombol merah REGISTERED APPS
5. Registerkan Aplikasi yang akan kita buat
6. Sekarang kita sudah mendapatkan API Key yang dibutuhkan.
1. Memasukkan Maps API JavaScript ke dalam HTML kita.
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&key=AIzaSyDKV7t22h-MTicAfgfKMbxV2bPtWit1GW8"></script>
2. Membuat element div dengan nama map_canvas untuk menampilkan peta.<div id="map_canvas" style="width:600px; height:600px"></div>
3. Membuat beberapa objek literal untuk menyimpan property-properti pada peta.
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
4. Menuliskan fungsi JavaScript untuk membuat objek peta.<script type="text/javascript">
// Langkah 4function initialize() {
var latlng = new google.maps.LatLng( -6.9128, 107.6206);var myOptions = {zoom: 13,center: latlng,mapTypeId: google.maps.MapTypeId.ROADMAP};
// Langkah 3var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);}
</script>
Penggunaan API Google Maps“ Membuat Maps Basic ”
5. Meng-inisiasi peta dalam tag body HTML dengan event onload.
<body onload="initialize()">
Running Program
Modifikasi Maps [Set Markers and Open InfoWindow for Each Marker]
• <!DOCTYPE html>• <html>• <head>• <script• src="http://maps.googleapis.com/maps/api/js?
key=AIzaSyDKV7t22h-MTicAfgfKMbxV2bPtWit1GW8&sensor=false">
• </script>• <script>• var map;• var myCenter=new google.maps.LatLng(51.508742,-
0.120850);
• function initialize()• {• var mapProp = {• center:myCenter,• zoom:5,• mapTypeId:google.maps.MapTypeId.ROADMAP• };
• map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
• google.maps.event.addListener(map, 'click', function(event) {
• placeMarker(event.latLng);
• });• }
• function placeMarker(location) {• var marker = new google.maps.Marker({• position: location,• map: map,• });• var infowindow = new google.maps.InfoWindow({• content: 'Latitude: ' + location.lat() + '<br>Longitude: '
+ location.lng()• });• infowindow.open(map,marker);• }
• google.maps.event.addDomListener(window, 'load', initialize);
• </script>• </head>
• <body>• <div id="googleMap"
style="width:600px;height:600px;"></div>
• </body>• </html>
Awesome !
Penggunaan API Google Maps“ Membuat Maps Koordinat ”
Geolocation
Membuat sebuah textfield untuk menginputkan lokasi
pencarian
Membuat sebuah button untuk memberi aksi pencarian
Membuat sebuah peta degan ukuran 400px x 300px
Memanggil API dari google maps yang dokumennya
berupa javascript
Membuat variabel map yang memanggil id ‘map’ yang disediakan API. Map yang
dipanggil jenisnya TERRAIN/ Relief. Posisinya ada di tengah layar desktop. Posisi Latitude dang longtitude defaultnya adalah: (42.49,
10,46) yang merupakan daerah Albaina. Ukuran zoom sebesar 6
Membuat fungsi deocoder. Di dalamnya memanggil address untuk mencari lokasi, dan
get elemen by id adalah proses melakukan pencariannya.
Tampilan dari Geolocation 1
Geolocation Longtitude - LatitudeMemanggil API dari google maps yang dokumennya
berupa javascript
Memanggil library css google map
Menentukan titik default latitude suatu tempat
Menentukan titik default longtitude suatu tempat
Tampilan maps dengan longtitude dan latitude
Referensi…
http://lecturer.eepis-its.edu/~yuliana/Google%20Maps%20API/Buku/Tutorial%20Google%20Maps%20API.pdf
http://repository.amikom.ac.id/files/PUBLIKASI_09.11.2875.pdf
http://www.w3schools.com/googleAPI/