Cara Membuat Static Map dengan API Google Maps

Cara Membuat Static Map dengan API Google Maps - Kali ini kita akan belajar membuat sebuah static map dengan menggunakan API Google Maps, maksud maps static disni adalah mapnya kita sendri yang menentukan kordinat latitude dan longitude dari mapsnya nanti. Menggunakan API yang disediakan oleh google maps kita dapat membuat peta dari lokasi dengan memasukan logitude dan latitudenya, maps ini anda dapat pergunakan sebagai peta lokasi anda seperti yan biasa anda lihat di kontak - kontak website. untuk lebih jelasnya langsung saja ke prakteknya.

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

HTML

Buatlah sebuah folder dengan nama Google_maps kemudian buat sebuah file HTML dengan nama static_map.html kemudian masukan script :

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
   html { height: 100% }
   #map-canvas { height: 400px; width:100%; }
   *{
   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:730px;
   height:500px;
   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;
  }
 </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js">
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: { lat: -6.187931, lng: 107.031279},
          zoom: 16
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
 <div class="wrap">
  <h1>Jin Toples Programming</h1>
  <h1>Membuat Static Maps dengan API Google Maps</h1>
  <div id="map-canvas"></div>
 </div>
  </body>
</html>

Perhatikan pada baris kode berikut :

<script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js">
    </script>

ini adalah script yang kita gunakan untuk memanggil API Google Maps

perhatikan baris kode berikut :

<script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: { lat: -6.187931, lng: 107.031279},
          zoom: 16
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

mapOptions adalah tempat kita mensetting maps yang kita gunakan seperti kordinat latitude, longitude dan zoom maps

var map adalah tempat kita menyeting lokasi dari map yaitu dengan memberikan elemen dalam html yang kita tuju dalam kasus ini kita memanggil elemen dengan id map-canvas.

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 API Google Maps di sini : CEK TKP

Selanjutnya kita bertemu lagi membahas Maps yang disertai dengan tombol serach untuk lokasi dari map.

Baca disini : Cara Membuat Geocoding Map Dengan API Google Maps

Static Map dengan API Google Maps anda sekarang sudah selesai, baca juga tutorial program HTML dan Javascript lainnya.