Cara Menampilkan Weather di Google Maps

Cara Menampilkan Weather di Google Maps - Weather atau cuaca dapat terkini atau yang sedang berlangsung dapat kita tampilkan di dalam map dengan menggunakan salah satu library dari google maps yaitu weather. Weather layer ini juga berisi ramalan cuaca beberapa hari kedepan di sebuah wilayah, weather ini juga mencakup seluruh peta atau seluruh dunia. Untuk lebih jelasnya langsung saja kita ke prakteknya.

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.

HTML

Jika anda belum membuat folder Google_maps buatlah sebuah folder dengan nama Google_maps kemudian buat sebuah file HTML dengan nama weather_map.html kemudian masukan script :

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Menampilkan Weather di Google Maps</title>
    <style>
   html { height: 100% }
   #map-canvas { height: 400px;}
   *{
   margin: 0;
   padding: 0;
  }
  body {
   text-align:center;
   background-color:#61b3de;
   font-family:Arial, Helvetica, sans-serif;
   font-size:80%;
   color:#666;
  }
  .wrap {
   background: #f3f8fb;
   width:900px;
   margin:30px auto;
   border: 4px dashed #61b3de;
   border-radius:4px;
   padding: 20px 5px;
  }
  h1 {
   font-family:Georgia, "Times New Roman", Times, serif;
   font-size:24px;
   color:#645348;
   font-style:italic;
   text-decoration:none;
   font-weight:100;
   padding: 10px;
  }
  .copy{
   margin-top: 20px;
   clear: both;
  }
  @media print {
   #map-canvas {
     height: 500px;
     margin: 0;
   }
    }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=weather"></script>
    <script> 
  function initialize() {
     var mapOptions = {
   zoom: 10,
   center: new google.maps.LatLng(-6.397809, 106.839022),
   mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

    var weatherLayer = new google.maps.weather.WeatherLayer({
   temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT
    });
    weatherLayer.setMap(map);

    var cloudLayer = new google.maps.weather.CloudLayer();
    cloudLayer.setMap(map);

  }

  google.maps.event.addDomListener(window, 'load', initialize);
    </script>

  </head>
  <body>
 <div class="wrap">
  <h1>Jin Toples Programming</h1>
  <h1>Menampilkan Weather di Google Maps</h1>
  <div id="map-canvas"></div>
  <p class='copy'>Copyright &copy <a href="http://jintoples.blogspot.com">Jin Toples Programming</a> 2015</p>
 </div> 
  </body>
</html>

Perhatikan baris kode berikut :

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=weather"></script>

Kita memanggil library weather, untuk menggunakan library weather kita harus meloadnya terlebih dahulu di script ini.

var weatherLayer = new google.maps.weather.WeatherLayer({
   temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT
    });
    weatherLayer.setMap(map);

Untuk menampilkan cuaca terkini dari setiap wilayah dalam map dengan setingan unit temperatur fahrenheit.

var cloudLayer = new google.maps.weather.CloudLayer();
    cloudLayer.setMap(map);

Untuk menampilkan ikon cuaca ( ini hanya muncul jika di zoom antara 0 - 6 kali ).

Anda dapat mencobanya sekarang dengan cara membukanya di browser anda, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran.

Apabila masih ada yang binggung anda juga dapat membacanya dari refrensi langsung di dokumentasi Weather Library Google Maps di sini : CEK TKP

Weather Di Google Maps anda sekarang sudah selesai, baca juga tutorial program HTML dan Javascript lainnya.