Google maps membuka API nya pada berbagai platform dan salah satunya adalah pada aplikasi web. Untuk menggunakan pada aplikasi web, kita bisa memasang javasript dan merendernya pada tag html. Penjelasan resminya, kita kunjungi website dari google maps disini. Tentunya untuk bisa menggunakan layanan dari google maps, anda harus mempunyai akun Google.

Menggunakan Google Maps Api pada Aplikasi Web

Langsung saja tanpa basa basi lagi, kita mulai bagaimana cara memasang google maps api pada aplikasi web yang kita buat. Pada halaman utama di https://developers.google.com/maps/, pilih platform web dan selanjutnya untuk kodingnya akan menggunakan javascript.

Menggunakan Google Maps Api pada Aplikasi Web

Menggunakan Google Maps Api pada Aplikasi Web

Untuk memulai menampilkan peta secara sederhana, pilih Google Maps Javascript API.

Tampilan web kita kemudian akan diarahkan ke halaman overview. Untuk bisa menggunakan Api, kita harus mendapatkan KEY yang di berikan oleh google, oleh karena itu klik GET KEY pada halaman overview di pojok kanan atas.

Menggunakan Google Maps Api pada Aplikasi Web

Anda bisa membuat project baru atau yang sudah tersedia, kemudian klik ENABLE API. Maka anda akan mendapatkan KEY dari google untuk menggunakan layanan Google Maps.

Pilih Project untuk mendapatkan key

Key yang di berikan oleh google untuk menggunakan google maps

Setelah mendapatkan key tersebut, kita buat script sederhana untuk menampilkan peta dari Google Maps. Kita buat sebuah tag html dulu dengan script sebagai berikut.

<div class="row">
 <div class="col-lg-12">
   <div id="belajargooglemap"  style="width: 500; height: 400px"></div>
 </div>
</div>

Kemudian tambahkan javascript untuk meretrive maps pada tag html tadi yang kita buat pada halaman yang sama.

<script>
      function initMap() {
        // Create a map object and specify the DOM element for display.
        var map = new google.maps.Map(document.getElementById('belajargooglemap'), {
          center: {lat: -6.273300, lng: 106.823925},
          scrollwheel: false,
          zoom: 3
        });
      }

</script>

Tambahkan juga script untuk menginisialisasi peta dari Google Maps, pada script ini pasang Api Key yang telah anda dapatkan tadi.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
   async defer></script>

Untuk Script Lengkapnya adalah sebagai berikut.

<div class="row">
 <div class="col-lg-12">
   <div id="belajargooglemap"  style="width: 500; height: 400px"></div>
 </div>
</div>
<script>
      function initMap() {
        // Create a map object and specify the DOM element for display.
        var map = new google.maps.Map(document.getElementById('belajargooglemap'), {
          center: {lat: -6.273300, lng: 106.823925},
          scrollwheel: false,
          zoom: 3
        });
      }

</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBOVfpPuuh3VHFvtoas3ZuNTt2Kp9KIkTU&callback=initMap"
async defer></script>

Tampilan Google Maps

Berikut adalah hasil dari script sederhana yang telah kita buat tadi. Untuk mengganti lokasi mana yang ingin kita tampilkan, kita bisa mengganti latitude dan longitude nya pada javasript di atas (lat: -6.273300, lng: 106.823925).

Menggunakan Google Maps Api pada Aplikasi Web

Berikut adalah contoh sederhana untuk menampilkan Google Maps pada aplikasi web yang kita buat. Untuk selanjutnya saya akan memberikan tutorial yang lebih advance dalam menggunakan Google Maps. Semoga tulisan saya dapat bermanfaat dan membantu anda. Terimakasih.

The post Menggunakan Google Maps Api pada Aplikasi Web appeared first on Mr Agus.

Pada tutorial ini, saya akan menggunakan layanan google ini pada aplikasi web dengan menggunakan bahasa pemograman php. Tetapi terlebih dahulu kita harus mendapatkan api key nya terlebih dahulu. Masuk ke situs resminya disini dan login menggunakan akun google anda.

Menggunakan Layanan Google Shortener dengan PHP dan CURL

Menggunakan Layanan Google Shortener dengan PHP dan CURL

Untuk memuai kita klik dulu tombol get a key, kemudian akan muncul jendela dialog untuk membuat atau memilih project yang sudah tersedia.

Menggunakan Layanan Google Shortener dengan PHP dan CURL

Menggunakan Layanan Google Shortener dengan PHP dan CURL

Kemudian kita akan mendapatkan api key nya dan klik finish.

Menggunakan Layanan Google Shortener dengan PHP dan CURL

Setelah itu kita perhatikan bagaimana cara mengimplementasikannya pada aplikasi kita. Berikut adalah dokumentasi untuk request dan response yang disediakan oleh google, kita bisa menggunakan curl.

Menggunakan Layanan Google Shortener dengan PHP dan CURL

Langkah berikutnya kita buat sriptnya dengan mencantumkan api key yang telah kita buat tadi. Berikut adalah contoh scriptnya.

<?php
$url = $_GET['url'];
$postData = array('longUrl' => $url);
$jsonData = json_encode($postData);

$curlObj = curl_init('https://www.googleapis.com/urlshortener/v1/url?key=AIzaSyAl1mg7mc_Ecj6O7RQqB-mbRRQgpBZ0Noo'); //masukkan key dsini

curl_setopt($curlObj, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curlObj, CURLOPT_SSL_VERIFYPEER, 0);
curl_setopt($curlObj, CURLOPT_HEADER, 0);
curl_setopt($curlObj, CURLOPT_HTTPHEADER, array('Content-type:application/json'));
curl_setopt($curlObj, CURLOPT_POST, 1);
curl_setopt($curlObj, CURLOPT_POSTFIELDS, $jsonData);

$response = curl_exec($curlObj);
$json = json_decode($response);

curl_close($curlObj);
echo $json->id;
?>

(panggilShortener.php)

Long Url merupakan url yang nanti nya akan kita input di form dan jangan lupa sesuaikan api key nya. Kemudian kita buat form untuk menggenerate url shortenernya, dan untuk pemanggilan shortener saya menggunakan Ajax. Saya tambahkan sedikit asesoris juga loading animation waktu mengirim request.

<script type="text/javascript">
 $(function(){
  $("#callShortener").on("click",function(){		
   var urlData = $("#dataUrl").val();
   $("#elUrl").hide(100);
   if(urlData!=""){
    $("#elLoading").show(100);
    $.ajax({
      	method: "GET",
      	url: "/BlogNative/action/panggilShortener.php?url="+urlData,
     success:function(data) {
      $("#shortenerCode").html(data);
        	$("#elLoading").hide(100); 
        	$("#elUrl").show(100);
        }
    });
   }else{
    alert("Anda Belum memasukkan data Url");
   }
  });
 });
</script>
<div class="row">
 <div class="col-lg-6 col-md-offset-3">
  <div class="panel panel-default">
   <div class="panel-heading text-center">
    <a class="btn btn-success" id="callShortener"><span class="glyphicon glyphicon-refresh"></span> Generate Shortener</a>
   </div>
   <div class="panel-body">
    <div class="row">
     <div class="col-md-12">
      <div class="form-group">
       <label>Masukkan Url Anda</label>
       <input value="" type="text" name="dataUrl" id="dataUrl" class="form-control">
      </div>
     </div>
    </div>
    <div class="row">
     <div class="col-md-12 text-center">
      <div id="elLoading" style="display: none">
       <img width="300px" src="/BlogNative/assets/img/loading-animation.gif">
      </div>
      <div id="elUrl" style="display: none">
       Shortener anda adalah : 
       <h1 id="shortenerCode"></h1>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>

Berikut adalah penampakan formnya.

Menggunakan Layanan Google Shortener dengan PHP dan CURL

Testing

Setelah form kita buat, selanjutnya kita tes form yang kita buat dengan memasukkan url pada textbox.

Menggunakan Layanan Google Shortener dengan PHP dan CURL

Mudah bukan , selanjutnya anda bisa mengkreasikan layanan ini sesuai dengan kebutuhan aplikasi anda. Semoga tulisan ini bermanfaat, terimakasih.

The post Menggunakan Layanan Google Shortener dengan PHP dan CURL appeared first on Mr Agus.

menggunakan layanan google drive pada linux

Sejak di luncurkan pada tanggal 24 April 2012 google berjanji akan lebih bersahabat dengan pengguna linux. Tetapi sampai sekarang, google belum meluncurkan aplikasi officialnya ke publik, hanya terbatas pada smartphone dan web base. Tentunya hal ini tidak menjadi halangan bagi para pengguna Linux untuk menggunakan layanan google drive dengan memanfaatkan aplikasi dari pihak ketiga seperti overgrive dengan fitur yang lumayan lengkap.

Menggunakan Layanan Google Drive pada Linux

Karena OS yang saya gunakan adalah ubuntu 16.04, maka saya akan menggunakan sebuah layanan gratis yang telah di buat oleh gnome project untuk berintergrasi dengan layanan google drive. Untuk bisa menggunakan layanan ini pertama-tama kita harus menginstall GNOME Control Center dan GNOME Online Accounts packages. Install melalui terminal dan tunggu hingga proses intalasi selesai.

sudo apt install gnome-control-center gnome-online-accounts

Langkah selanjunya kita perlu menambahkan akun google kita pada gnome online akun, pertama-tama masuk ke sistem setting.

menggunakan layanan google drive pada linux

Kemudian pilih online account.

menggunakan layanan google drive pada linux

Kemudian tambahkan akun google dengan memasukkan email anda pada halaman yang di arahkan ke website login google.

menggunakan layanan google drive pada linux

menggunakan layanan google drive pada linux

Kemudian jangan lupa untuk meng enable untuk jenis layanan files.

menggunakan layanan google drive pada linux

Setelah itu coba anda cek pada file manager yang anda miliki apakah layanan google drive sudah dapat di akses. Seperti pada gambar di bawah bisa dilihat folder pada layanan google drive akan bertuliskan nama email yang anda miliki.

menggunakan layanan google drive pada linux

Anda bisa langsung membuka dan mengkopi file yang terdapat pada folder tersebut. Pokoknya ketika anda menambah, mengedit atau menghapus file pada folder tersebut, maka akan otomatis akan tersinkronisasi dengan layanan yang terdapat pada google drive. Sekian mengenai artikel  saya kali ini, semoga dapat bermanfaat. Terimakasih

The post Menggunakan Layanan Google Drive pada Linux appeared first on Mr Agus.