Aptech Jakarta
Kategori
  • Android
  • Aplikasi
  • Gadget
  • Game
  • Teknologi
  • Website
  • Windows

Wedding Organizer Surabaya | Wedding Organizer Gresik | Wedding Organizer Malang | Wedding Organizer Madura | Wedding Organizer Mojokerto | Wedding Organizer Jakarta | Wedding Organizer Bogor | Wedding Organizer Depok | Wedding Organizer Tangerang | Wedding Organizer Bekasi

Catering Surabaya | Catering Gresik | Catering Malang | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi | Catering Jakarta Murah | Catering Bogor Murah | Catering Depok Murah | Catering Tangerang Murah | Catering Bekasi Murah

Supplier Sayur | Supplier Buah | Hosting Gratis
Catering Surabaya
 | Catering Gresik | Catering Malang | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi

Catering Surabaya | Catering Malang | Catering Gresik | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi

ApTech Jakarta
  • Beranda
  • Catering Jakarta
  • Catering Bogor
  • Catering Depok
  • Catering Tangerang
  • Catering Bekasi
  • Teknologi

Berkreasi Dengan Google Maps dan HTML5 Geolocation

  • Mei 2, 2013
  • admin
0

SHARES

ShareTweet

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 jakarta geolocation demo

HTML5 Geolocation by Google Maps

Lihat Demo

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


<!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+“)”
});
}
admin

Previous Article
  • Teknologi

Hotspot Gratis Indosat Super Wifi Bertebaran di Semarang

  • Mei 1, 2013
  • admin
View Post
Next Article
  • Teknologi

4 Penyebab Terjadinya Crash Pada Google Chrome

  • Mei 3, 2013
  • admin
View Post

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Pos-pos Terbaru
  • 8 HP Untuk Main Call of Duty Mobile Terbaik 2023
  • Game Esports Terbaik
  • Rekomendasi 10 Game Browser Terbaik
  • Aplikasi Pengunci Aplikasi Android Terbaik
  • 6 Smartwatch Terbaik 1 Jutaan Tahun 2022, Super Canggih!
Arsip
Kategori
  • Android
  • Aplikasi
  • Gadget
  • Game
  • Teknologi
  • Website
  • Windows
Wedding Organizer

Wedding Organizer Surabaya | Wedding Organizer Gresik | Wedding Organizer Malang | Wedding Organizer Madura | Wedding Organizer Mojokerto | Wedding Organizer Jakarta | Wedding Organizer Bogor | Wedding Organizer Depok | Wedding Organizer Tangerang | Wedding Organizer Bekasi

Partner

Catering Surabaya | Catering Gresik | Catering Malang | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi | Catering Jakarta Murah | Catering Bogor Murah | Catering Depok Murah | Catering Tangerang Murah | Catering Bekasi Murah

External Link

Supplier Sayur | Supplier Buah | Hosting Gratis
Catering Surabaya
 | Catering Gresik | Catering Malang | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi

Catering Surabaya | Catering Malang | Catering Gresik | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi

Blog Teknologi Jakarta
Berita dan artikel teknologi dan Informasi Jakarta

Input your search keywords and press Enter.