Belajar Menggunakan API Google MAP

Assalamualaikum,

Di hari yang panas dan terik ini, akhirnya saya akan mengupdate blog yang memang sudah cukup lama tidak saya blog. 🙂 oke langsung saja, kali ini saya akan membahas sesuatu yang sedikit berbeda, yaitu google map API. Lho kok sudah tidak membahas PHP? tenang saja ini masih ada hubungannya dengan PHP.

Singkat cerita, siapa yang tidak tahu Google Map? Aplikasi Web MAP yang menurut saya sangat detail, lebih detail dari Bing Map dan NOkia Map, dan lebih ringan dari Wikimapia. Nah kita akan memanfaatkan Apinya.

google map

Pertanyaan: Apa sih API ?
API kepanjangan dari Aplication Programming Interface, kalo menurut saya, adalah suatu service khusus dari penyedia suatu layanan gratis, yang mana bisa dipergunakan untuk kepentignan kita dalam membuat Program.

Masih bingung, Singkatnya, jika kita ingin membuat suatu website menggunakan MAP seperti google, kita tidak perlu membuat dari awal peta tersebut, tanya-tanya Pak Lurah mengenai gang dan sebagainya, konon kabarnya Google mempekerjakan 10.000 orang untuk Proyek Google Map. WAWWWW 😀

Oke sampai disini dulu keterangan dari API.
Pertanyaan: Apa Cuma Google yang menyediakan API ?
Tidak, banyak perusahaan raksasa lainnya yang menyediakan API, Seperti Yahoo, Facebook, Wikipedia dll pokoknya tinggal pakai saja. (Intinnya jadi Programmer saat ini lebih mudah dari pada Programmer jaman dulu, hehehe :D)

Langsung saja Praktek.
Anda bisa membuat sebuah file dan beri nama map.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE HTML>
<html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDP7zPnQESyfjWjX0KQDAd4_owawKDvkXE&sensor=false">
</script>
<script type="text/javascript">
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(function(position){
//var latitude = position.coords.latitude;
//var longitude = position.coords.longitude;
// var coords = new google.maps.LatLng(latitude, longitude);
var coords = new google.maps.LatLng(-7.289166000000001000, 112.734398000000060000);//latitude Surabaya
//var coords = new google.maps.LatLng(-6.914744400000000000, 107.609811100000000000);//latitude Bandung
var mapOptions = {
zoom: 6,
center: coords,
mapTypeControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(
document.getElementById("mapContainer"), mapOptions
);
var marker = new google.maps.Marker({
position: coords,
map: map,
title: "Posisi Anda ada disini"
});

});
}
/*else
{
alert("Geolocation API is not supported in your browser.");
}*/
</script>
<style type="text/css">
#mapContainer {
margin : 0 auto;
height: 500px;
width: 800px;
border:10px solid #eaeaea;
}
</style>
</head>
<body>
<div id="mapContainer"></div>
</body>
</html>

Script diatas Adalah script javascript yang bisa diubah, misal liat yang ada angka (-7.289166000000001000, 112.734398000000060000), itu adalah angka latitude dan longitude daerah Surabaya, coba anda ganti dengan ini
(-7.289166000000001000,112.734398000000060000) maka insyaallah peta akan berubah menjadi wilayah kota Lain. 😀

Untuk zoom 8 juga bisa anda rubah lagi, jadi 7 atau angka terserah anda, itu merupakan tingkat untuk Zoom, jika anda ingin mempelajari lebih detail untuk API google Map coba kunjungi link ini

intinya jika anda ingin merubah lokasi peta, anda harus mengganti nilai latitude dan longitudenya. Bagaiamana caranya? anda perlu belajar lebih dalam (:D termasuk Penulis)

Oke Sekian dulu tutorial kali ini, maaf ini malah tidak ada PHPnya, hehe javascript, sekedar saran, jika anda bisa PHP + Javascript, itu malah super Dahsyat, kenapa? karena rata-rata API, JQUERY dll menggunakan JAvascript

Semoga bermanfaat

Wassalamaualaikum..

Leave a Reply

Your email address will not be published. Required fields are marked *