Jom Belajar HTML , Media di dalam HTML!!! (Genius Corner Siri 18)

Tajuk: Media di dalam HTML

Genius Corner Siri 18

Oleh: Fariz Gaskin

 

Salam ceria buat semua pembaca budiman. Kita bertemu kembali di dalam ruangan Genius Corner minggu ini, bersama latihan HTML5 bahagian yang kelima. Kali ini, kita akan pelajari topik yang sangat menarik, iaitu memaparkan Google Maps di dalam laman web.

 

Perkara istimewa di dalam latihan ini ialah, menggunakan HTML untuk mendapatkan kedudukan Latitud dan Longitud pelawat laman web. Jika anda masih ingat latihan Geografi, Garisan Latitud merupakan garisan yang dilukis secara melintang dan selari dengan Garisan Khatulistiwa di dalam pemetaan permukaan bumi.

 

Garisan Longitud pula merupakan garisan bayangan yang dilukis dari Utara ke Selatan di atas glob. Garisan ini sama panjang dan bertemu di bahagian Kutub Utara dan Kutub Selatan, serta diguna untuk menentukan waktu tempatan.

 

Bagi mendapatkan kedudukan sesebuah tempat, nilai kedudukan Latitud dan Longitud perlu diperolehi. Melalui HTML5, kedudukan ini dipetakan dari peranti yang diguna samada telefon pintar atau komputer, menggunakan sensor terbina dalam yang terdapat pada papan litar utama.

 

Seperti juga latihan Scratch di dalam Genius Corner siri ke-16 yang lalu, latihan HTML5 di ruangan ini juga semakin lama semakin ‘advanced’. Namun, kami tetap mengekalkan konsep simple dan ceria agar pembaca tetap terhibur sambil berpeluang belajar dengan tahap yang semakin tinggi.

 

Tanpa membuang masa, mari kita mulakan latihan minggu ini.

 

Latihan

 

Langkah 1: Buka mana-mana text editor yang anda miliki seperti Notepad (Windows) atau TextEdit (MacOS) dan tuliskan kod aturcara berikut.

 

<!DOCTYPE html>

<html>

<body>

<h1>My First Google Map</h1>

<div id=”map” style=”width:400px;height:400px;background:yellow”></div>

<script>

function myMap() {

var mapOptions = {

   center: new google.maps.LatLng(3.0717824,101.7098963),

   zoom: 14,

   mapTypeId: google.maps.MapTypeId.HYBRID

}

var map = new google.maps.Map(document.getElementById(“map”), mapOptions);

}

</script>

<script src=”https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap”></script>

<!–

To use this code on your website, get a free API key from Google.

Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp

–>

</body>

</html>

 

Langkah 2: Save hasil kerja anda tadi dengan nama googlemap.html ke dalam folder Genius Corner seperti latihan terdahulu.

 

Langkah 3: Double-click fail tadi untuk melihat hasilnya melalui pelayar web.

Semakan

 

Di dalam kod aturcara tadi, kita telah memaparkan peta Google Map di dalam laman web menggunakan fungsi terbina dalam HTML5. Fungsi ini amat berguna, terutamanya untuk memberi panduan kepada pelawat mengenai kedudukan rumah atau pejabat anda.

 

Di dalam tag <div>, kita telah menetapkan saiz paparan peta dengan ketinggian 400 piksel dan kelebaran 400 piksel. Di dalam blok <script> yang pertama,

 

Di dalam blok <script> yang pertama pula, kita telah memanggil library utama google.maps untuk mendapatkan paparan peta berdasarkan kedudukan Latitud 3.0717824 dan Longitud 101.7098963. Nilai tersebut merupakan kedudukan pejabat kami Tracdisk Technogreen secara terperinci di atas muka bumi.

 

Seterusnya kita telah menetapkan zoom pada nilai 14. Semakin kecil nilainya, semakin tinggi kedudukan paparan dan sebaliknya. Kemudian, kita memilih jenis paparan peta HYBRID. Terdapat 3 jenis paparan semuanya, dan SIMPLE merupakan paparan default jika anda menggunakan Google Maps di dalam pelayar web.

 

Akhir sekali, kita menggunakan blok <script> kedua untuk memanggil Google Maps API dengan menghantar API Key peribadi kita bagi mendapatkan akses. Tanpa API Key, anda tidak akan dapat memanggil paparan peta. Sama seperti kunci yang anda perlu untuk membuka pintu rumah atau menghidupkan enjin kereta.

Pelajar SK Bandar Baru Sentul meraikan kejayaan menyiapkan latihan Scratch

 

Soalan

 

Sebelum ruangan minggu ini ditamatkan, anda perlu menyelesaikan beberapa soalan latihan. Sila ubahsuai kod aturcara tadi supaya:

 

  1. Ubah kod supaya zoom menjadi lebih jauh
  2. Ubah kod daripada jenis HYBRID kepada jenis yang lain
  3. Gantikan nilai Latitud dan Longitud kepada nilai kedudukan anda sekarang

 

Jika anda mempunyai sebarang pertanyaan atau cadangan, sila emelkan kepada farizgaskin@gmail.com dan kami akan cuba jawab sepantas mungkin. Sehingga bertemu lagi dalam ruangan yang sama minggu hadapan, selamat mencuba!

 

Leave a Reply

Your email address will not be published. Required fields are marked *