index.html

<!DOCTYPE html>
<html>
<head>
    <title>WebGIS Google Map API (Point, Line, Polygon)</title>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<meta name="description"  content="Peta WebGIS Interaktif dan Menarik dibuat dengan Google Map API" />
    <meta name="keywords"  content="peta interaktif, webgis, visualisasi data, google map api, titik, garis, area" />
	<link rel="shortcut icon" href="https://spasialkan.com/wp-content/uploads/2016/12/spasialkan.png"/>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyDnijxdX4zf4_wyZP6F8-mPXzLiH7nP_fY"></script>
	<script src="data.js"></script>
	
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-TD4LH4X5WX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-TD4LH4X5WX');
</script>
	
</head>

<body>
	<div class="tampilan">
		<div class="header">			
			<h2 class="teks-atas">WebGIS Google Map API (Point, Line, Polygon)</h2>
		</div>
		<div class="body-content">
			<div class="sidebar">
				<div style="height:20"> 
					<h3 class="judul-sidebar">DESKRIPSI SINGKAT</h3>
				</div>
				<div style="background:white; height:480px; overflow:auto;">
				<p class="teks-sidebar">WebGIS disamping dibuat dengan menggunakan Google Map API. Adapun data yang ditampilkan meliputi tiga macam, yakni berupa titik (point), garis (polyline), dan area (polygon). Animasi bounce dan info window ditambahkan supaya lebih menarik.</p>
				</div>
			</div>
			<div id="googleMap"></div>
		</div>
		<div class="footer">
			<p class="teks-bawah">&copy; Belajar <a href="https://spasialkan.com" target="_blank" title="Spasialkan!com">WebGIS</a></p>
		</div>
	</div>
</body>
</html>