Penggunaan api google maps kelompok6

1. M Arief Gusti P
2. Benedicta GL
3. Putu agus wibawa

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.

2. Akan muncul notifikasi berikut

var map = new
google.maps.Map(document.getElementById("map_canvas
"), myOptions);

<script type="text/javascript">
// Langkah 4
function initialize() {
var latlng = new google.maps.LatLng( -6.9128, 107.6206);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Langkah 3
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>

•
•
•
•
•
•
•
•
•

<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDKV7t2
2h-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"),mapPr •
op);
•

•
•
•
•

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>

“ Membuat Maps Koordinat ”

Memanggil API dari google maps
yang dokumennya berupa
javascript
Membuat sebuah peta degan
ukuran 400px x 300px
Membuat sebuah textfield untuk
menginputkan lokasi pencarian

Membuat sebuah button untuk
memberi aksi pencarian
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.

Memanggil 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

http://lecturer.eepisits.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/

Penggunaan api google maps kelompok6

More Related Content

Similar to Penggunaan api google maps kelompok6

Penggunaan api google maps kelompok6