Mengubah Basemap Google Map

AUTHOR

Apa itu Basemap?

Mengubah basemap Google Map Basemap adalah peta dasar yang menjadi tampilan utama. Di atas basemap tersebut kemudian kita dapat menambah data-data lain, seperti polygon, polyline, KML, layer table fusion dan lain-lain. Pada google map, tampilan peta dasar atau basemap dapat diubah-ubah jenisnya. Ada empat jenis tipe basemap yaitu:
  1. Roadmap (peta jalan)
  2. Satellite (tampilan citra satelit)
  3. Hybrid (Citra satelit dengan overlay jalan)
  4. Terrain (Tampilan topografi)
Untuk mengubah tampilan basemap dapat dilakukan denga dua cara, yaitu:

  1. Menambahkan opsi mapTypeId pada property class map. 
  2. Menggunakan metode setMapTypeId pada class map. 

Mengubah Basemap Google Map

Untuk cara pertama struktur kodenya adalah sebagai berikut:

var map= {
  center:new google.maps.LatLng(koordinat),
  zoom:[level zoom(integer)],
  mapTypeId: google.maps.MapTypeId.HYBRID/SATELLITE/TERRAIN/ROADMAP
};

Sedangkan struktur kode untuk cara kedua:

map.setMapTypeId(google.maps.MapTypeId.HYBRID/SATELLITE/TERRAIN/ROADMAP)

Berikut adalah contoh kode lengkap untuk metode pertama. Hasil running kode ini dapat dilihat pada gambar 1.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
 src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
</script>
<script type="text/javascript">
   function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(4.027433,97.267278),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.SATELLITE
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
    <div id="map-canvas" style="width:700px;height:500px" />
</body>
</html>
Download Kode
Tampilan basemap satelit google map
Gambar 1. Tampilan basemap satelit

Sedangkan untuk metode kedua, menggunakan metode setMapTypeId. kode lengkapnya sebagai berikut
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
 src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
</script>
<script type="text/javascript">
   function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(4.027433,97.267278),
          zoom: 8
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
        map.setMapTypeId(google.maps.MapTypeId.TERRAIN);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
    <div id="map-canvas" style="width:700px;height:500px" />
</body>
</html>
Download Kode
Gambar 2. Tampilan basemap terrain

Dari contoh kode di atas dapat dilihat perbedaan kedua cara merubah basemap. Perbedaannya adalah pada cara pertama diatur pada opsi atau properti objek map. Sedangkan yang kedua dilakukan dengan metode setMapTypeId pada objek map. Cara kedua memiliki fleksibilitas untuk dapat mengganti basemap sewaktu-waktu kapan pengguna mau, tentunya dengan memberikan pilihan untuk mengganti basemap.

Kode di bawah adalah contoh yang memberikan pilihan untuk merubah basemap. Hasil running kode ini dapat dilihat pada gambar 3.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
 src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
</script>
<script type="text/javascript">
var map
   function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(4.027433,97.267278),
          zoom: 8
        };
        map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
   
   function ganti_basemap(nama_map){
   var citra;
   if (nama_map=="SATELLITE"){
   citra=google.maps.MapTypeId.SATELLITE
   } else if 
   (nama_map=="TERRAIN"){
   citra=google.maps.MapTypeId.TERRAIN
   } else {
   citra=google.maps.MapTypeId.ROADMAP
   }
   map.setMapTypeId(citra)
   }
</script>
</head>
<body>

<form action="">
  <input type="radio" name="basemap" value="SATELLITE" onclick="ganti_basemap(value);"> Satelit
  <input type="radio" name="basemap" value="TERRAIN" onclick="ganti_basemap(value);"> Terain
  <input type="radio" name="basemap" value="ROADMAP" onclick="ganti_basemap(value);"> Jalan
</form>

<div id="map-canvas" style="width:700px;height:500px" />
</body>
</html>
Download Kode
Menu pilihan untuk mengubah tampilan basemap google map
Gambar 3. Menu pilihan untuk mengubah tampilan basemap

Ada beberapa penambahan dan perubahan yang dilakukan pada listing kode merubah basemap, ditandai dengan font yang ditebalkan(bold). Secara singkat dijelaskan sebagai berikut.
1. Perubahan pertama yang dilakukan adalah mendeklarasikan varibel map di luar fungsi initialize. Ini dilakukan agar variabel map dapat diakses oleh fungsi-fungsi lain, dalam kasus ini fungsi ganti_basemap.
2. Membuat fungsi ganti_basemap. Fungsi ini akan dieksekusi ketika radio button jenis basemap diklik. Fungsi ini memiliki satu argumen yaitu nama_map. nilai nama_map ini diperoleh dari value radio button. Basemap akan diganti sesuai dengan value dari radio button.

Untuk mempelajari lebih dalam tentang Google Maps API, Anda dapat mengunjungi situs Google Developer. Di situs tersebut dapat ditemukan tutorial dan dokumentasi yang sangat lengkap.

Related Posts

Disqus Comments