Menampilkan Peta dengan Google Maps API V3


Bismillaah,,

Salam hangat,,

Ok friends, kali ini saya mencoba ingin berbagi nih tentang sesuatu yang udah berhasil saya buat. Hmm, simple aja kok ! Saya cuma bikin aplikasi sederhana yang bisa ngasih info prodi perguruan tinggi negeri alias PTN di Pulau Jawa. Nah, aplikasi sederhana ini saya beri nama dengan SIP Prodi ,,hehehe..

Let’s start friends!

Pengantar dulu yahh, bahasanya tak bikin formal dikit :)…

Google Maps API Version 3

Google Map merupakan suatu layanan aplikasi teknologi peta (map) berbasis web yang disediakan oleh Google secara gratis. Saat  ini  Google  Map  adalah layanan pemetaan berbasis web yang cukup popular. Google Maps API dapat ditambahkan ke dalam website kita apabila kita ingin menambahkan layanan Google Map. Google Maps API adalah library JavaScript sehingga Google  Maps  API  dapat  ditambahkan  ke  website  kita menggunakan  JavaScript.  API  tersebut  menyediakan banyak  fasilitas  dan  utilitas  untuk  memanipulasi  peta dan  menambahkan konten  ke  peta  melalui  berbagai layanan.

Ada beberapa hal penting yang perlu dipahami apabila kita menggunakan Google Maps API yaitu  tentang HTML, JavaScript, dan kita harus terkoneksi dengan internet. Pada Google Maps API adalah versi 3, JavaScript API mirip dengan versi  sebelumnya. Versi 3 disesain  lebih cepat, khusunya untuk browser mobile seperti Android dan iPhone. Dalam Google Maps API versi 3 ini, API key hanya bersifat opsional, sehingga kita tidak perlu mendaftarkan API key. Jika  tidak  ingin  menggunakan  API Key, cukup mengisi parameter sensor=false. Seperti ini : <script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”></script&gt;

Aplikasi SIP-Prodi

Udah yaa pengantarnya, langsung deh siap-siap buat coding :)…

Buat Database dengan nama mymap.sql. Kemudian kita akan membuat tiga buah tabel, yaitu tabel ptn, fakultas, dan prodi. Lebih lengkapnya, ada di bawah ini :


 CREATE TABLE IF NOT EXISTS `fakultas` (
 `id_fakultas` int(10) NOT NULL AUTO_INCREMENT,
 `nama_fakultas` varchar(64) NOT NULL,
 PRIMARY KEY (`id_fakultas`)
 ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=9 ;

INSERT INTO `fakultas` (`id_fakultas`, `nama_fakultas`) VALUES
 (1, 'Teknik'),
 (2, 'Sains dan Teknologi'),
 (3, 'Sekolah Teknik Elektro dan Informatika'),
 (4, 'Kedokteran'),
 (5, 'Teknologi Industri'),
 (6, 'MIPA'),
 (7, 'Farmasi'),
 (8, 'Pertanian');

CREATE TABLE IF NOT EXISTS `prodi` (
 `id_prodi` int(10) NOT NULL AUTO_INCREMENT,
 `nama_prodi` varchar(64) NOT NULL,
 `akreditasi` varchar(10) NOT NULL,
 `alamat_prodi` varchar(128) NOT NULL,
 `lat` double NOT NULL,
 `lng` double NOT NULL,
 `id_fakultas_prodi` int(10) NOT NULL,
 `id_ptn_prodi` int(10) NOT NULL,
 PRIMARY KEY (`id_prodi`)
 ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=16 ;

INSERT INTO `prodi` (`id_prodi`, `nama_prodi`, `akreditasi`, `alamat_prodi`, `lat`, `lng`, `id_fakultas_prodi`, `id_ptn_prodi`) VALUES
 (1, 'Teknik Informatika', 'B', 'Jl Aipda Tut Harsono Sleman Yogyakarta', -7.773757, 110.394058, 2, 2),
 (2, 'Teknik Elektro', 'A', 'Jl Grafika No 2 Kampus Ugm Sleman Yogyakarta', -7.756281, 110.368009, 1, 1),
 (3, 'Teknik Informatika', 'B', 'Jl Colombo Karangmalang Sleman Yogyakarta', -7.691939, 110.527267, 1, 3),
 (4, 'Teknik Informatika', 'A', 'Jalan Ganesha 10, Bandung 40132', -6.892173, 107.610312, 3, 4),
 (5, 'Kedokteran Umum', 'A', 'Jl Salemba Raya No 4 Kenari Jakarta Pusat', -6.362713, 106.8291, 4, 5),
 (6, 'Teknik Elektro', 'A', 'Sukolilo, Surabaya, 60111', -7.268822, 112.791653, 5, 6),
 (7, 'Ilmu Komputer', 'A', 'Jl. Pancasila Bulaksumur Sekip Unit III Caturnunggal Depok Sleman', -7.792275, 110.368652, 6, 1),
 (8, 'Matematika', 'A', 'Jl. Pancasila Bulaksumur Sekip Unit III Caturnunggal Depok Sleman', -7.792275, 110.368652, 6, 1),
 (9, 'Matematika', 'A', 'Jl Colombo Karangmalang Sleman Yogyakarta 55281', -7.691939, 110.527267, 6, 3),
 (10, 'Kedokteran Umum', 'A', 'Jl Ir. Sutami No. 36a Jebres Kota Surakarta', -7.555824, 110.858917, 4, 7),
 (11, 'Matematika', 'A', 'Jl Colombo Karangmalang Sleman Yogyakarta 55281', -7.691939, 110.527267, 6, 3),
 (12, 'Kedokteran Umum', 'A', 'Jl Ir. Sutami No. 36a Jebres Kota Surakarta', -7.555824, 110.858917, 4, 7),
 (13, 'Farmasi', 'A', 'Jl Kampus Ugm Sekip Utara Yogyakarta 55281', -7.765848, 110.376034, 7, 1),
 (14, 'Teknik Pertanian', 'B', 'Jl dr Suparno Karangwangkal Purwokerto, Purwokerto 40115', -7.424092, 109.24736, 8, 8);

CREATE TABLE IF NOT EXISTS `ptn` (
 `id_ptn` int(10) NOT NULL AUTO_INCREMENT,
 `nama_ptn` varchar(64) NOT NULL,
 PRIMARY KEY (`id_ptn`)
 ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;

INSERT INTO `ptn` (`id_ptn`, `nama_ptn`) VALUES

(1, 'UGM'),
 (2, 'UIN Sunan Kalijaga'),
 (3, 'UNY'),
 (4, 'ITB'),
 (5, 'UI'),
 (6, 'ITS'),
 (7, 'UNS'),
 (8, 'Unsoed'),
 (9, 'Universitas Brawijaya');

Siapkan notepad++ atau editor lainnya, lalu ketik kode-kode di bawah ini :
Buat dulu file untuk koneksi ke database.

Baru buat file dengan nama index.php :

 <?php
 include "db_connect.php";
 $prodi = $_POST['search'];</b>

if(isset($_POST['submit'])){
 $sql = "select * from prodi
 left outer join fakultas
 on prodi.id_fakultas_prodi=fakultas.id_fakultas
 left outer join ptn
 on prodi.id_ptn_prodi=ptn.id_ptn
 where prodi.nama_prodi like '%$prodi%'";

$query = mysql_query($sql);
 $num = mysql_num_rows($query);
 }
 ?>
 <html>
 <head>
 <title>Peta</title>
 <link rel="stylesheet" type="text/css" href="style-map.css">
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 <script type="text/javascript">
 <?
 if($num>0){
 echo 'var locations = ['."\r\n";
 $i=0;
 while($row = mysql_fetch_array($query)){
 echo '['.$row['lat'].','.$row['lng'].',"'.$row['nama_prodi'].'","'.$row['nama_fakultas'].'","'.$row['nama_ptn'].'","'.$row['akreditasi'].'","'.$row['alamat_prodi'].'"]';
 if($i<$num-1)
 echo ','."\r\n";
 else
 echo "\r\n";
 $i++;
 }
 echo ']'."\r\n";
 }
 ?>
 function initialize() {
 var map = new google.maps.Map(document.getElementById('map'), {
 zoom: 7,
 center: new google.maps.LatLng(-7.614529,110.712246),
 mapTypeId: google.maps.MapTypeId.ROADMAP
 });

var infowindow = new google.maps.InfoWindow();

var marker, i;

for (i = 0; i < locations.length; i++) {
 marker = new google.maps.Marker({
 position: new google.maps.LatLng(locations[i][0], locations[i][1]),
 map: map
 });

google.maps.event.addListener(marker, 'click', (function(marker, i) {
 return function() {
 infowindow.setContent("Nama Prodi : "+locations[i][2]+"<br />Fakultas : "+locations[i][3]+"<br />PTN : "+locations[i][4]+"<br />Akreditasi : "+locations[i][5]+"<br />Alamat : "+locations[i][6]+"\n");
 infowindow.open(map, marker);
 }
 })(marker, i));
 }
 }
 google.maps.event.addDomListener(window, 'load', initialize);
 </script>
 </head>
 <body>
 <div id="top"></div>
 <div id="form-cari">
 <img id="logo" src="SIP-Prodi.gif"></img>
 <form method="post">
 <input type="text" id="search" name="search"/>
 <input type="submit" id="button-search" name="submit" value="Cari" />
 </form>
 </div>
 <div id="map">
 </div>
 </body>
 </html>

Terakhir nih, buat kode css-nya yaa lalu simpan dengan nama style-map.css, biar tampilan web yang kita buat lebih menarik.. 🙂


*{
 margin:0;
 padding:0;
 }
 #top{
 width:100%;
 height:30px;
 background:black;
 }
 #logo{
 padding:5px 100px 0 50px;
 width:200px;
 height:65px;
 float:left;
 }
 #map{
 width:90%;
 height:70%;
 border:1px solid black;
 margin-top:10px;
 margin-left:60px;
 }
 #search{
 width:400px;
 height:30px;
 border:1px solid #D8D8D8;
 padding:0 0 0 5px;
 margin:18px 0 0 0;
 }
 #button-search{
 width:40px;
 height:30px;
 border:1px solid #808080;
 border-radius:5px;
 background:#0066FF;
 color:white;
 }
 #form-cari{
 width:100%;
 height:70px;
 background:#F0F0F0;
 border-bottom:1px solid #E0E0E0;
 }

Silahkan download file di sini Yap, alhamdulillaah,, program telah selesai. Selamat mencoba !! 🙂

Advertisements

7 thoughts on “Menampilkan Peta dengan Google Maps API V3

  1. terima kasih atas penjelasanya sebelumnya, ada yang saya mau tanyakan cara mengubah color bagaimana pak? contoh untuk marker 1: red sedangkan marker 2: green. cara ubah di code itu bagaimana ?. terima kasih atas penjelasannya sebelumnya

  2. semua pertanyaannya tolong di reply mas. sayang bgt klo g diatasi. masalah yang saya alamin juga sama seperti @fireman, dan saya juga pingin tau gmn cara pengubahan warnannya. 🙂

  3. Yang saya coba dari script untuk line 1 sampai 3 untuk index.php :

    <?php
    include "db_connect.php";
    $prodi = $_POST['search'];

    Tapi masih belum keluar marker yang selama coba.

  4. salam,
    salam kenal,
    saya udah coba download filenya,,
    makasih banget pak,,

    ada yg ingin saya tanyakan,,
    kalau di saya kenapa petanya tidak muncul ya pak??
    hanya muncul tulisan “Laman ini tidak memuat Google Maps dengan benar. Lihat konsol JavaScript untuk mengetahui detail teknisnya”
    Mohon petunjuknya

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s