Belajar Google Maps API v3 : Tahap Awal Membuat Maps

Jika dahulu kala orang perlu bersusah payah mencari alamat suatu tempat, kini dengan GPS semuanya menjadi mudah, terlebih lagi titik koordinat GPS bisa diintegrasikan dengan berbagai Maps, seperti Google Maps, maupun maps alternatif yang lainnya.

Tapi paling tidak memang pengaksesan informasi berdasarkan lokasi ini jauh lebih menarik, karena memang lebih relevan. Ketimbang mencari sesuatu yang tidak tau berasal dari mana informasi tersebut.

Nah, pada tutorial kali ini dan beberapa tutorial kedepannya, kita akan fokus membahas bagaimana memanfaatkan Google Maps, yang betul-betul kedepannya bisa Anda manfaatkan, untuk memudahkan user website Anda dalam mencari lokasi sesuatu. Sebagai contohnya yang sudah betul-betul memanfaatkan Google Maps ini adalah airbnb.com, kemudian citydirectory.co.id, dan banyak lagi. Nah pertanyaannya adalah, bagaimana membuat itu semua? Inilah yang akan kita pelajari.

Mulai Membuat Maps

Untuk pertemuan awal ini, kita akan coba terlebih dahulu bermain-main dengan Google Maps API versi ke 3. Yakni mulai dari membuat Mapsnya terlebih dahulu.

Pertama-tama adalah kita siapkan terlebih dahulu file html kosongnya.

<html>
  <head>
    <title>Belajar Google Maps API 3</title>
  </head>
  <body>
  </body>
</html>

Kemudian kita persiapkan sebuah div dengan id nya map, yang nantinya digunakan sebagai wadah si maps googlenya. Jadi jelas google maps membutuhkan sebuah wadah untuk menyisipkan mapsnya. Kita persiapkan dulu.

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Belajar Google Maps API 3</title>   
 <style type="text/css">
 body {
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: small;
   background: #fff;
 }
 #map {
   width: 100%;
   height: 500px;
   border: 1px solid #000;
 }
 </style>
  </head>
  <body>
    <h1>My first map</h1>
    <div id="map"></div>
  </body>
</html>

Dan terakhir baru kita sisipkan kode untuk menyisipkan maps nya ke dalam div tadi, tentunya kita akan menggunakan library javascript google mapsnya. Kode lengkapnya seperti ini.

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>My first map</title>
    
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
 (function() {
   window.onload = function() {
    
  // membuat map berdasarkan div id untuk map
  var mapDiv = document.getElementById('map');
  
  // penentuan longitude 
  var latlng = new google.maps.LatLng(-6.589166, 106.792999);
  
  // konfigurasi untuk maps api
  var options = {
    center: latlng,
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  
  // membuat imagenya berdasarkan divnya
  var map = new google.maps.Map(mapDiv, options);
   }
 })();
 </script>
 <style type="text/css">
 body {
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: small;
   background: #fff;
 }
 #map {
   width: 100%;
   height: 500px;
   border: 1px solid #000;
 }
 </style>
  </head>
  <body>
    <h1>My first map</h1>
    <div id="map"></div>
  </body>
</html>

Untuk demo silahkan Anda kunjungi http://ilmuwebsite.com/tutorial/maps/maps-00.html Silahkan Anda pelajari scriptnya ...


Kita akan pelajari lebih mendalam di pertemuan berikutnya.

Salam. Semoga Bermanfaat.

Loka Dwiartara
Admin ilmuwebsite.com
Founder kaffah.biz
DVD Video Tutorial : Kursus Web Development Komplit Bangun 5 Project Aplikasi Website - Membuat CMS Sendiri Dari Nol, Blog, Portal Berita, Ecommerce, Web Komunitas dengan CodeIgniter 3 JQuery AJAX Bootstrap

Video Tutorial Kursus Web Development Komplit Bangun 5 Project Website ini merupakan ‘penunjuk arah’ agar Anda yang sedang maupun baru akan terjun ke dalam dunia web development yang lebih mendalam memiliki peta perjalanan pembelajaran yang lebih terarah menuju web developer professional. (Disertai pembelajaran dasar HTML CSS, JQuery, PHP & MySQL, CodeIgniter) Dibuat oleh praktisi yang memiliki pengalaman lebih dari 10 tahun di bidang web development (Pemesanan bisa SMS/WA ke 0838 1157 5876, atau bisa pesan secara online di sini)

Admin Ilmuwebsitecom

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

4 komentar:

  1. mas, mohon informasi untuk data GPS yang diperoleh dari device GPS, apakah bisa dikirim lgsung ke web?

    BalasHapus
  2. dan untuk penenuan lpngitude lattitudenya saya ambil dari GPS device nya, sehingga nanti dapat dimunculkan dihalaman webnya

    BalasHapus
  3. dan untuk penenuan lpngitude lattitudenya saya ambil dari GPS device nya, sehingga nanti dapat dimunculkan dihalaman webnya

    BalasHapus
  4. gan software nya apa aja untuk membuat maps api di web?

    BalasHapus