Rabu, 23 Oktober 2013

Instalasi Google Maps v3 pada Rails

Google Maps API memudahkan kita dalam memuat google maps pada aplikasi web yang kita buat.
Berikut ini adalah langkah-langkah instalasi google maps pada Ruby on Rails.


Get Google API Key
Langkah berikut ini menjelaskan bagaimana mendapatkan google maps API key yang akan kita gunakan pada aplikasi kita.
Pertama, pastikan kita memiliki akun google.

1. Masuk ke halaman console API google dan login dengan menggunakan account google atau gmail. 
2. Klik link Services pada menu di sebelah kanan. 



3. Aktivasi servis Google Maps API v3 dengan klik tombol switch pada bagian kanan, lalu ikuti langkah selanjutnya dengan klik checkbox agree


4. Klik link API Access, dan API key untuk google maps telah tersedia di halaman ini. 


Instalasi dengan Ruby on Rails
Misalkan pada aplikasi yang kita buat akan menampilkan profile user dan menampilkan lokasi di map berdasarkan alamat usernya. 
Pertama buat model user yang berisi nama:string, city:string dan state:string


rails g model user name:string city:string state:string


Lalu buat user di console, misalkan


User.create!(
 [
  {:name => "John Doe", :city => "Washington", :state => "DC"}
 ]
)

Lalu buat halaman show untuk melihat detail dari profile user, buat misalkan di app/views/users/show.html.erb. Lalu masukkan API key di atas ke dalam code javascript di bawah ini. 

Contoh :
 <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAVdlyqpDfn1sXmYcY9WJS4cfU0jnkIWao&sensor=false">
    </script>
    <script type="text/javascript">
   function set_map(state, city){
    var mapOptions = {
      center: new google.maps.LatLng(25.687944,-100.309403),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
    mapOptions);

    if(state == ""){
      address = city;
    }else{
      address = state + ',' + city;
    }

    var geocoder = new google.maps.Geocoder();

    geocoder.geocode({
      'address':address
    },

    function(result, status){
      if (status == google.maps.GeocoderStatus.OK){
        map.setCenter(result[0].geometry.location);

        var marker = new google.maps.Marker({
          map: map,
          position: result[0].geometry.location
        });
      }else{
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
    return false;
  }

   $(document).ready(function(){
     set_map('<%= @user.state %>', '<%= @user.city %>');
   })
    </script>
    

<label>Name : </label>&nbsp;<%= @user.name %>
<br />
<label>Location :</label>
<br />
<br />
<div id="map-canvas" style="width:300px;height:200px"/>
Fungsi javascript set_map(state, city) di atas merupakan fungsi untuk menampilkan map dari lokasi setiap user dengan mendefinisikan variable city dan state sebagai city dan state milik user. Sehingga map yang ditampilkan juga dinamis, tergantung data dari usernya.  
Untuk inisialisasi map juga bisa disesuaikan tergantung lokasi mana yang akan ditampilkan dengan mengubah script di atas dengan menginput latitude dan longitude nya saja.
center: new google.maps.LatLng(latitude,longitude)
Berikut ini adalah contoh dari halaman profile user berdasarkan input data user di atas




Contoh kasus sederhana lainnya dari google maps dan Ruby on Rails adalah pointing lokasi berdasarkan input kota atau provinsi/region menggunakan AJAX  yang akan dibahas pada sesi selanjutnya.


Selamat mencoba dan happy coding :)

Sumber : 
https://developers.google.com/maps/documentation/javascript/tutorial


2 komentar:

  1. setau saya nggak perlu key itu mas

    BalasHapus
    Balasan
    1. Betul Mas As Sabiluna tanpa key itu pun sebetulnya bisa jalan.
      Key itu diperlukan untuk memonitor penggunaan.
      Jika traffic dari web yang menggunakan google map sanggat tinggi, dan melebihi batas penggunaan, maka kita butuh untuk menambah kuota penggunaan (bayar ke google tentunya), dan mencantumkan key tersebut

      Hapus