PT Mitra Tekno Niaga
Hubungi Kami
x
Google Maps API: Cara Membuat Peta ROADMAP, SATELLITE, HYBRID dan TERRAIN
Pemrograman

22 Desember 2019

Google Maps API: Cara Membuat Peta ROADMAP, SATELLITE, HYBRID dan TERRAIN

Hallo sobat mitra tekno niaga, pada tulisan kali ini Kami ingin membahas tentang tipe peta apa saja yang ada di Google Maps dan bagaimana cara menggunakannya. Pasti Kalian sudah penasaran kan? Tanpa panjang lebar lagi, Yuk mari baca dan simak tulisan ini sampai habis. Di jamin akan memberikan manfaat yang besar untuk menambah pengetahuan Anda. Oke, langsung saja ya.

Pada Google Maps terdapat 4 tipe peta yang bisa Anda gunakan yaitu ROADMAP, SATELLITE, HYBRID dan TERRAIN. Berikut ini penjelasannya :

1. ROADMAP, tipe ini berupa peta normal dengan tampilan 2 dimensi dan merupakan peta standar dari Google Maps. Cara menggunakannya dengan menyisipkan script mapTypeId:google.maps.MapTypeId.ROADMAP, lihat contoh script di bawah ini :

<html>
<head> 
<title> Google Maps API: Cara Mengubah Tipe Peta </title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
<script type="text/javascript">
	function initMap() {
		var map = new google.maps.Map(document.getElementById('show_maps'), {
		  center: {lat: -1.035721, lng: 118.436931},
		  zoom: 5,
		  mapTypeId:google.maps.MapTypeId.ROADMAP
		});
	}
</script>
</head>
<body>

   <div id="show_maps"  style="width:100%;height:100%;"></div>

</body>
</html>	

Bila dijalankan, script di atas akan menghasilkan Output seperti berikut ini :

Google Maps API: Cara Membuat Peta ROADMAP, SATELLITE, HYBRID dan TERRAIN

2. SATELLITE, merupakan tampilan peta dengan citra satelit Google Earth. Cara menggunakannya dengan menyisipkan script mapTypeId:google.maps.MapTypeId.SATELLITE, lihat contoh script di bawah ini :

<html>
<head> 
<title> Google Maps API: Cara Mengubah Tipe Peta </title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
<script type="text/javascript">
	function initMap() {
		var map = new google.maps.Map(document.getElementById('show_maps'), {
		  center: {lat: -1.035721, lng: 118.436931},
		  zoom: 5,
		  mapTypeId:google.maps.MapTypeId.SATELLITE
		});
	}
</script>
</head>
<body>

   <div id="show_maps"  style="width:100%;height:100%;"></div>

</body>
</html>	

Bila dijalankan, script di atas akan menghasilkan Output seperti berikut ini :

Google Maps API: Cara Membuat Peta ROADMAP, SATELLITE, HYBRID dan TERRAIN

3. HYBRID, merupakan peta campuran berupa tampilan citra satelit yang disertai dengan fitur peta normal berupa nama jalan, kota dan lain-lain. Cara menggunakannya dengan menyisipkan script mapTypeId:google.maps.MapTypeId.HYBRID, lihat contoh script di bawah ini :

<html>
<head> 
<title> Google Maps API: Cara Mengubah Tipe Peta </title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
<script type="text/javascript">
	function initMap() {
		var map = new google.maps.Map(document.getElementById('show_maps'), {
		  center: {lat: -1.035721, lng: 118.436931},
		  zoom: 5,
		  mapTypeId:google.maps.MapTypeId.HYBRID
		});
	}
</script>
</head>
<body>

   <div id="show_maps"  style="width:100%;height:100%;"></div>

</body>
</html>	

Bila dijalankan, script di atas akan menghasilkan Output seperti berikut ini :

Google Maps API: Cara Membuat Peta ROADMAP, SATELLITE, HYBRID dan TERRAIN

4. TERRAIN, merupakan tipe peta yang menampilkan bentuk fisik berdasarkan informasi di lapangan seperti dataran tinggi, dataran rendah, pegunungan, sungai dan lain-lain. Cara menggunakannya dengan menyisipkan script mapTypeId:google.maps.MapTypeId.TERRAIN, lihat contoh script di bawah ini :

<html>
<head> 
<title> Google Maps API: Cara Mengubah Tipe Peta </title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
<script type="text/javascript">
	function initMap() {
		var map = new google.maps.Map(document.getElementById('show_maps'), {
		  center: {lat: -1.035721, lng: 118.436931},
		  zoom: 5,
		  mapTypeId:google.maps.MapTypeId.TERRAIN
		});
	}
</script>
</head>
<body>

   <div id="show_maps"  style="width:100%;height:100%;"></div>

</body>
</html>	

Bila dijalankan, script di atas akan menghasilkan Output seperti berikut ini :

Google Maps API: Cara Membuat Peta ROADMAP, SATELLITE, HYBRID dan TERRAIN

Demikian pembahasan tentang Google Maps API: Cara Membuat Peta ROADMAP, SATELLITE, HYBRID dan TERRAIN, semoga tulisan ini bisa memberikan manfaat untuk Anda yang membaca. Sampai jumpa di tulisan berikutnya. Terima Kasih

Google Maps Google HTML JavaScript