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

Posting Komentar

4 Komentar

Unknown3 Mei 2016 pukul 09.15
mas, mohon informasi untuk data GPS yang diperoleh dari device GPS, apakah bisa dikirim lgsung ke web?
BalasHapus
Balasan
Unknown3 Mei 2016 pukul 09.17
dan untuk penenuan lpngitude lattitudenya saya ambil dari GPS device nya, sehingga nanti dapat dimunculkan dihalaman webnya
BalasHapus
Balasan
Unknown3 Mei 2016 pukul 09.18
dan untuk penenuan lpngitude lattitudenya saya ambil dari GPS device nya, sehingga nanti dapat dimunculkan dihalaman webnya
BalasHapus
Balasan
Unknown25 Februari 2017 pukul 06.58
gan software nya apa aja untuk membuat maps api di web?
BalasHapus
Balasan