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