Cara Membuat Overlay Map di Google maps

Cara Membuat Overlay Map di Google maps - Overlay map disini adalah google maps yang diberikan ilustrasi tampilan jaring - jaring kotak yang diberi title kordinat dari map, anda mungkin pernah menemukannya di beberapa peta yang anda lihat. Hal ini akan membantu memudahkan anda untuk mengetahui batas kordinat dari suatu wilayah, karena data kordinat sudah di tampilkan diatas setiap kotaknya. Untuk lebih jelasnya langsung saja 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 overlay_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>Menggambar Overlay Map 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"></script>
    <script>
  function CoordMapType(tileSize) {
    this.tileSize = tileSize;
  }

  CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
    var div = ownerDocument.createElement('div');
    div.innerHTML = coord;
    div.style.width = this.tileSize.width + 'px';
    div.style.height = this.tileSize.height + 'px';
    div.style.fontSize = '10';
    div.style.borderStyle = 'solid';
    div.style.borderWidth = '1px';
    div.style.borderColor = '#AAAAAA';
    return div;
  };
  
  var map;
  
  function initialize() {
     var mapOptions = {
   zoom: 10,
   center: new google.maps.LatLng(-6.397809, 106.839022),
   mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    var bermudaTriangle;

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

    map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256)));

  }

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

  </head>
  <body>
 <div class="wrap">
  <h1>Jin Toples Programming</h1>
  <h1>Menggambar Overlay Map 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 :

function CoordMapType(tileSize) {
  this.tileSize = tileSize;
}

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
   var div = ownerDocument.createElement('div');
   div.innerHTML = coord;
   div.style.width = this.tileSize.width + 'px';
   div.style.height = this.tileSize.height + 'px';
   div.style.fontSize = '10';
   div.style.borderStyle = 'solid';
   div.style.borderWidth = '1px';
   div.style.borderColor = '#AAAAAA';
   return div;
};

Script inilah yang nantinya akan membuat kotak - kotak dan menampilkan title kordinat map di dalamnya.

map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256)));

script ini digunakan untuk menambahkan overlay map type sebagai overlay map pertama di posisi 0. dam kita memanggil fungsi objek CoordMapType untuk membuatnya.

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 Overlay Map Type Google Maps di sini : CEK TKP

Overlay Map di Google maps anda sekarang sudah selesai, baca juga tutorial program HTML dan Javascript lainnya.