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.
[code]<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> [/code] Perhatikan pada baris 10 sampai 13 , baris tersebuat adalah css untuk style yang digunakan pada baris 20 sampai 23. Sebenarnya hanya penggunaan tag html dan css biasa saja.
Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com
atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :
