HTML5 mempunyai fitur yang berguna untuk menampilkan posisi baik longitude maupun latitude yang diberi nama Geolocation. Fitur ini dapat disematkan dalam aplikasi html5 untuk memudahkan para pengembang guna memperkaya dan berkreasi fasilitas yang akan ia bangun menggunakan HTML5. Menurut catatan penulis, sejak direkomendasikan oleh W3C pada Desember 2012, Bahasa pemrograman HTML5 banyak dipakai pengembang karena fungsi dan tagnya lebih develop friendly, dokumentasi lebih lengkap dan tentunya sangat modern.
HTML5 Geolocation by Google Maps
Sebagai eksperimen awal pengenalan untuk berkreasi dengan HTML5 Geolocation kombinasi Google Maps API, penulis akan memberikan slick tutorial untuk pembaca yang ingin secara mudah mengaplikasikan HTML5 Geolocation pada Google Maps guna mengetahui lokasi kota (dalam hal ini lokasi server). Berikut adalah perangkat dan juga library javascript yang dibutuhkan untuk melakukan eksperimen pendukung tutorial HTML5 Geolocation ini :
Perangkat :
- Browser yang support : Mozilla Firefox versi 3.5 keatas, Google Chrome versi 5.0 keatas, Safari 5.0+ , IE 9.0 +
- Koneksi internet untuk memanggil library Google API online.
Library :
- Google Maps Online API
- Jquery Library
- Google Font API (Opsional)
Tutorial
- Masuk folder localhost, dan buatlah folder bernama html5geolocation
- Buat dua file yaitu index.html dan style.css + download background pendukung disini
- Berikut adalah file index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset=utf-8> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> | |
| <title>HTML5 Geolocation</title> | |
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> | |
| <link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300" rel="stylesheet" type="text/css"> | |
| <link href="style.css" rel="stylesheet" type="text/css"> | |
| <body> | |
| <section id="wrapper"> | |
| <header> | |
| <h1>HTML5 Geolocation Untuk Mengecek Lokasi</h1> | |
| </header> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> | |
| <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> | |
| <article> | |
| <span id="button"><a href="#" id="ahref">Klik</a></span><br> | |
| <span id="status"></span> | |
| </article> | |
| <script> | |
| $("#button").click(function() { | |
| function success(position) { | |
| var s = document.querySelector('#status'); | |
| if (s.className == 'success') { | |
| // not sure why we're hitting this twice in FF, I think it's to do with a cached result coming back | |
| return; | |
| } | |
| s.innerHTML = "Lokasi telah ditemukan"; | |
| s.className = 'success'; | |
| var mapcanvas = document.createElement('div'); | |
| mapcanvas.id = 'mapcanvas'; | |
| mapcanvas.style.height = '400px'; | |
| mapcanvas.style.width = '560px'; | |
| document.querySelector('article').appendChild(mapcanvas); | |
| var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); | |
| var myOptions = { | |
| zoom: 15, | |
| center: latlng, | |
| mapTypeControl: false, | |
| navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, | |
| mapTypeId: google.maps.MapTypeId.ROADMAP | |
| }; | |
| var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions); | |
| var marker = new google.maps.Marker({ | |
| position: latlng, | |
| map: map, | |
| title:"Anda ada di radius "+position.coords.accuracy+")" | |
| }); | |
| } | |
| function error(msg) { | |
| var s = document.querySelector('#status'); | |
| s.innerHTML = typeof msg == 'string' ? msg : "failed"; | |
| s.className = 'fail'; | |
| // console.log(arguments); | |
| } | |
| if (navigator.geolocation) { | |
| navigator.geolocation.getCurrentPosition(success, error); | |
| } else { | |
| error('not supported'); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
by - Berikut adalah isi dari file style.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| font-family: 'Open Sans Condensed','Arial Narrow', serif; | |
| background: #ddd url(bg.jpg) repeat top left; | |
| } | |
| .top{ | |
| line-height: 23px; | |
| font-size: 11px; | |
| background: rgba(255, 255, 255, 0.5); | |
| text-transform: uppercase; | |
| z-index: 9999; | |
| position: fixed; | |
| top: 0px; | |
| left: 0px; | |
| width: 100%; | |
| height: 30px; | |
| box-shadow: 1px 0px 2px rgba(0,0,0,0.2); | |
| -webkit-animation: slideOut 0.5s ease-in-out 0.3s backwards; | |
| -moz-animation: slideOut 0.5s ease-in-out 0.3s backwards; | |
| -o-animation: slideOut 0.5s ease-in-out 0.3s backwards; | |
| -ms-animation: slideOut 0.5s ease-in-out 0.3s backwards; | |
| animation: slideOut 0.5s ease-in-out 0.3s backwards; | |
| padding-top: 4px; | |
| padding-right: 20px; | |
| } | |
| #fb-top { | |
| float: left; | |
| display: block; | |
| margin-top: 2px; | |
| } | |
| #twit-top { | |
| float: left; | |
| display: block; | |
| margin-top: 2px; | |
| margin-right: 3px; | |
| } | |
| .top a{ | |
| padding: 0px 10px; | |
| letter-spacing: 1px; | |
| color: #333; | |
| text-shadow: 0px 1px 1px #fff; | |
| display: block; | |
| float: left; | |
| } | |
| .top a:hover{ | |
| background: #fff; | |
| } | |
| .top span.left{ | |
| float: left; | |
| padding-top: 1px; | |
| font-size: 16px; | |
| } | |
| .top span.right{ | |
| float: right; | |
| } | |
| .top span.right a{ | |
| float: left; | |
| display: block; | |
| } | |
| #wrapper { | |
| text-align: center; | |
| width: 570px; | |
| margin: 0 auto; | |
| background: white; | |
| padding: 5px; | |
| } | |
| #ahref{ | |
| -moz-border-radius: 3px; | |
| -webkit-border-radius: 3px; | |
| border-radius: 3px; | |
| box-shadow: 0 1px 1px #999; | |
| color: #222; | |
| display: inline-block; | |
| font-size: 16px; | |
| font-weight: bolder; | |
| margin: 0 5px 5px 0; | |
| padding: 5px 5px; | |
| text-align: center; | |
| width: 130px; | |
| text-decoration: none; | |
| } | |
| #ahref { | |
| background-color: #BDC3C7; | |
| background: -moz-linear-gradient(top, #ECF0F1, #BDC3C7); | |
| background: -ms-linear-gradient(top, #ECF0F1, #BDC3C7); | |
| background: -webkit-linear-gradient(top, #ECF0F1, #BDC3C7); | |
| background: -khtml-linear-gradient(top, #ECF0F1, #BDC3C7); | |
| background: linear-gradient(top, #ECF0F1, #BDC3C7); | |
| border: 1px solid #BDC3C7; | |
| text-shadow: 0 -1px -1px #BDC3C7; | |
| } | |
| #ahref:hover { | |
| background: -moz-linear-gradient(top, #BDC3C7, #ECF0F1); | |
| background: -ms-linear-gradient(top, #BDC3C7, #ECF0F1); | |
| background: -webkit-linear-gradient(top, #BDC3C7, #ECF0F1); | |
| background: -khtml-linear-gradient(top, #BDC3C7, #ECF0F1); | |
| background: linear-gradient(top, #BDC3C7, #ECF0F1); | |
| } | |
| article { | |
| width: 560px; | |
| margin: 0 auto; | |
| border-radius: 5px; | |
| } |
Sangat bermanfaat sekali mas eksperimen yang sudah diberikan, sangat membantu saya dalam mempelajari location dengan GMaps.
Sama-sama mas terimakasih sudah berkunjung dan berkomentar.
Demonya error, bisa diupdate??
maaf, server demo masih perbaikan.