Haii haiii.... masih suka mengoding kan nahh sekarang kita di part 3 disini saya akan membahas tentang menampilkan titik google dan membuat footer.
pertama tama kalian harus memasukkan script berikut yah gais dan menambahan pada head html kalian ini gais
<script src="http://maps.googleapis.com/maps/api/js"></script>
lalu tulis kembali script yang ini gaiss
<script>
// fungsi initialize untuk mempersiapkan peta
function initialize() {
var propertiPeta = {
center:new google.maps.LatLng(-6.161072,106.612488),
zoom:11,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var peta = new google.maps.Map(document.getElementById("googleMap"), propertiPeta);
var marker=new google.maps.Marker({
position: new google.maps.LatLng(-6.147849,106.727784),
map: peta
})
}
// event jendela di-load
google.maps.event.addDomListener(window, 'load', initialize);
</script>
di body nya kalian menambahkan script berikut gais
<span class="tanggal-posting">
Diposting pada 03:19 WIB, 21 Juni 2020
</span>
<div id="googleMap" style="width:100%;height:200px;"></div> <!--Untuk menentukan ukuran yang akan di visualkan -->
nahh maka output yang di hasilkan akan seperti ini gaiss
okee sekarang tinggal pelengkap membuat footer nya nih gais
buat scrip berikut
<footer>
@copyright || Tomy Agung Saputro
</footer>
footer{
clear: both;
background-color: black;
color: white;
padding: 0px;
text-align: center;
height: 30px;
}
Maka hasil outpotnya seperti ini yah gaiss
okee gaiss sekian untuk pembahasan kali ini berikut untuk script lengkapnya yah gaiss
Baca juga : Mengenal Hlookup dan Vlookup
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background-color:#A9A9A9;
}
header{
background-color:#DC143C;
padding:10px
}
.container{
max-width: 1080px;
margin: 20px auto;
background-color: white;
padding: 5px;
overflow: hidden;
}
.header h1{
color:white;
padding:60px;
}
#navbar {
margin:0px;
height:50px;
background-color:black;
}
#navbar ul{
list-style-type:none;
float:right;
}
#navbar ul li{
align:top;
float:left;
text-align:center;
}
#navbar ul li a{
display:block;
color:white;
text-decoration:none;
padding:0px 20px;
line-height: 30px
}
#navbar ul li a:hover{
background-color:#00FFFF;
color:black;
}
.banner{
margin-bottom: 10px;
}
.banner img{
display: block;
width: 100%;
height: 330px;
}
.menu-kiri
{
width: 300px;
margin-right: 10px;
float: left;
}
.kotak{
border: 1px solid gainsboro;
padding: 8px;
margin-bottom: 15px;
}
.kotak h3{
background-color: black;
color: white;
text-align: center;
padding: 10px;
margin-bottom: 13px;
}
.menu-kanan
{
width: 760px;
margin-right: 0px;
float: right;
}
.menu-kanan img
{
display: block;
width: 100%;
}
footer{
clear: both;
background-color: black;
color: white;
padding: 0px;
text-align: center;
height: 30px;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
// fungsi initialize untuk mempersiapkan peta
function initialize() {
var propertiPeta = {
center:new google.maps.LatLng(-6.161072,106.612488),
zoom:11,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var peta = new google.maps.Map(document.getElementById("googleMap"), propertiPeta);
var marker=new google.maps.Marker({
position: new google.maps.LatLng(-6.147849,106.727784),
map: peta
})
}
// event jendela di-load
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div class="container">
<header>
<h1>Hallo gaiss</h1>
</header>
<div id="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="banner">
<img src="image7.jpg">
</div>
<div class="menu-kiri">
<div class="kotak">
<h3>Contact Me</h3>
<br>
<address>
<strong>Alamat Kami.</strong>
<br>
Cengkareng Bar., Kecamatan Cengkareng,
<br>
Kota Jakarta Barat,
<br>
Daerah Khusus Ibukota Jakarta
<br>
<abbr title="phone">P :</abbr>
+6281288530882
</address>
<address>
<strong>Email</strong>
<br>
<a href="#">service.online@gmail.com</a>
</address>
</div>
</div>
<div class="menu-kanan">
<div class="kotak">
<h3>Artikel</h3>
<img src="profile-02.jpg" alt="profile">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<span class="tanggal-posting">
Diposting pada 03:19 WIB, 21 Juni 2020
</span>
<div id="googleMap" style="width:100%;height:200px;"></div><br>
<footer>
@copyright || Tomy Agung Saputro
</footer> <!--Untuk menentukan ukuran yang akan di visualkan -->
</div>
</body>
</html>
Posting Komentar