Thursday, 7 April 2016

Prinsip Dasar Membuat Google Map Sendiri

Prinsip Dasar Membuat Google Map Sendiri. Apabila Anda ingin membuat Google Map Sendiri maka Anda bisa membaca artikel ini sampai akhir agar pemahaman Anda dalam membuat Google Map versi Anda sendiri jadi lebih mudah tanpa ada kesulitan.

Untuk memulai membuat sebuah program Google Map langkah yang harus Anda lakukan adalah menyiapkan senjata perang terlebih dahulu, apa sajakah senjata perang yang harus di gunakan untuk membuat program Google Map? Berikut program yang harus di siapkan.

1. Sublime Text
2. Code Block
3. Notepad ++
4. Min GW
5. Microsoft Visual Studio

Dari ke lima progrma tersebut silahkan bisa Anda install semuanya, karena masing masing program memiliki fitur yang berbeda beda dan juga memiliki kekurangan dan kelebihannya masing masing.

Selain itu terus Apakah yang di Maksud Google Maps?
Google Maps adalah layanan pemetaan web gratis oleh Google yang menyediakan berbagai jenis informasi geografis. Menggunakan Google Maps, satu kaleng.
  • Mencari tempat atau mendapatkan arah dari satu tempat ke tempat lain.
  • Melihat dan menavigasi melalui gambar tingkat panorama jalan horizontal dan vertikal dari berbagai kota di seluruh dunia.
  • Dapatkan informasi spesifik seperti lalu lintas pada titik tertentu.
Google Maps menyediakan API menggunakan yang Anda dapat menyesuaikan peta dan informasi yang ditampilkan pada mereka. Bab ini menjelaskan cara memuat Google Map sederhana pada halaman web Anda menggunakan HTML dan JavaScript.

Prinsip Dasar Membuat Google Map Sendiri
Google Map
1. Dalam membuat sebuah program Google Map Anda harus mengerti terlebih dahulu prinsip prinsip dasarnya yaitu HTML. Penulisan program HTML harus Anda kuasai terlebih dahulu, berikut contoh simpel dari penulisan HTML.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
..............
</body>
</html>

Itulah cara penulisan bagan dari HTML yang bisa Anda pelajari basicnya. Kemudian Anda juga harus mengingat bahwa penulisan program HTML selalui di akhiri tanda tutup. Perhatikan contoh program di atas:

  •  <html> di tutup dengan script </html>
  •  <head> di tutup dengan script </head>
  •  <body> di tutup dengan script </body>
Itulah contoh simpel atau sederhana penulisan program HTML, berarti setiap pembuka harus ada penutupnya. Hal ini wajib Anda lakukan, karena jika tidak ada penutup maka program akan error alias tidak bisa jalan.


2. Kemudian di dalam java juga terdapat javascript atau API. Biasanya penulisan API ini di letakkan pada bagian <head> . . . </head>.  Berikut contoh simpel kode programnya.


<!DOCTYPE html>
<html>
<head>
<script src = "http://maps.googleapis.com/maps/api/js"></script>
</head>
<body>
..............
</body>
</html>

Dari gambar di atas bisa di simpulkan bahwa letak kode script API yaitu terletak setelah <head> atau sebelum </head> yang bertuliskan http://maps.googleapis.com/maps/api/js

3. Kemudian di dalam HTML juga terdapat beberapa program tambahan seperti CSS, nah script CSS inilah yang nantinya di gunakan untuk mempercantik sebuah tampilan. Jika kurang jelas bisa Anda pahami programnya yaitu sebagai berikut ini.

<div id = "sample" style = "width:900px; height:560px;"></div>

Sebelum menginisialisasi peta, kita harus membuat objek mapOptions (itu dibuat seperti sebuah literal) dan menetapkan nilai-nilai untuk variabel peta inisialisasi. Sebuah peta memiliki tiga pilihan.


utama, yaitu, pusat, zoom, dan maptypeid.


pusat - Di bawah properti ini, kita harus menentukan lokasi mana kita ingin memusatkan peta. Untuk lulus lokasi, kita harus membuat objek LatLng dengan melewati lintang dan bujur dari lokasi yang diperlukan untuk konstruktor.

zoom - Di bawah properti ini, kita harus menentukan tingkat zoom peta.

maptypeid- bawah properti ini, kita harus menentukan jenis peta yang kita inginkan. Berikut ini adalah jenis peta yang disediakan oleh Google -

ROADMAP (normal, standar 2D peta)
SATELIT (peta fotografi)
HYBRID (kombinasi dari dua atau lebih jenis lainnya)
TERRAIN (map dengan gunung, sungai, dll)

Dalam fungsi, katakanlah, loadMap (), membuat objek mapOptions dan menetapkan nilai yang diperlukan untuk pusat, zoom, dan mapTypeId seperti yang ditunjukkan di bawah ini.

function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.240498, 82.287598),
zoom:9,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
}

4. Setelah itu langkah selanjutnya yaitu membuat object. Untuk membuat object sudah saya beri kode scriptnya di bawah tinggal Anda pahami dengan cermat. Berikut kodenya.

var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

5. Kemudian untuk langkah selanjutnya yaitu kita tinggal memasukan mapnya, berikut contoh programnya.

google.maps.event.addDomListener(window, 'load', loadMap);
or
<body onload = "loadMap()">

Nah itulah prinsip dasar bagaimana cara membuat sebuah program Google Map sendiri, apabila Anda tertarik dan ingin mempelajarinya silahkan Anda bisa memulai dari awal, mulai dari awal pengenalan bahasa pemrograman HTML, CSS. Pelajari baik baik dan harus super sabar dalam menjalaninya.

Saya rasa itu saja yang dapat saya jelaskan mengenai prinsip dasar membuat Google Map versi sendiri dan apabila ada yang kurang jelas jangan malulah untuk bertanya tentang semua itu. 
Subscribe to this Blog via Email :