<html>
<head>
<title>Java Sc Developer - MAPS</title>
<style type="text/css">
html, body {width: 600px;height: 400px;margin: 0 auto ;padding: 0;}
h1 {text-align: center;text-transform: uppercase;}
p {text-align: center;font-size: 14px;text-transform: uppercase;}
#map {height: 100%;}
.scroll {line-height:1.35;overflow:hidden;white-space:nowrap;}
.header {width: 100%;background-color: #1e88e5;font-size:16px;padding: 5px;text-align: center;color: #fff;font-weight: bold;box-shadow: 2px 2px 6px 0 #1565c0;margin-bottom: 2px}
.content {background-color: #eee;padding: 5px;}
.footer {background-color: #1e88e5;text-align: center;color: #fff}
.footer a {color: #fabb3d;font-weight: bold;text-decoration: none;}
</style>
</head>
<script type="text/javascript">
var map ;
var posisi = {lat:0.512574, lng: 101.448355};
var gambar = "http://icons.iconarchive.com/icons/pelfusion/long-shadow-media/48/Maps-Pin-Place-icon.png";
var isiInfo = "<div class='scroll'>"+
"<div class='header'>G-Maps Tust by JSC</div>"+
"<div class='content'>I make hello world in my code and now i see my world in my life <p> lorem ipsum coba liat info window di mana saja</p></div>"+
"<div class='footer'>Jangan lupa kunjungi <a href='http://www.java-sc.web.id'>Java Source Code</a> Create by Bang Hes</div></div>";
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: posisi
});
var marker = new google.maps.Marker({
position:posisi,
map: map,
draggable: true,
title: 'Java Source Code',
icon: gambar,
});
var infoWindow = new google.maps.InfoWindow({
content: isiInfo,
maxWidth:400,
maxHeight:150,
});
marker.addListener('click',function() {
infoWindow.open(map,marker);
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key={API KEY ANDA}&callback=initMap">
</script>
<body>
<h1>Kostumisasi Konten Info Window</h1>
<p>Java Source Code</p>
<div id="map"></div>
</p>
</body>
</html> Cara Merubah Style Konten Info Window Pada Google Maps
Sabtu, 27 Februari 2016
Sebenarnya ini hanya tutorial sederhan untuk mengkostum tampilan konten dari info window. Semisanya merubah font, warna, posisi, dan semua diatur menggunakan CSS saja. Saya membuat ini hanya untuk menambah pengetahuan mengenai desain info window, yang padahal pada kostumisasi nantinay akan menggunakan infoBox dari google maps. Lansung saja pada tahap penulisan sintak.
0 Komentar
Keep Learning and Keep Sharing