Hello World Google Map API

1:26 AM

Dalam tutorial ini akan ditunjukkan cara dasar untuk menampilkan sebuah peta menggunakan Googlemap API.

Langkah pertama untuk memulainya tentu saja kita harus mempunyai akses key ke API google map, cara untuk memperolehnya adalah sebagai berikut:
  1. Visit the APIs Console at https://code.google.com/apis/console and log in with your Google Account.
  2. Click the Services link from the left-hand menu.
  3. Activate the Google Maps API v3 service.
  4. Click the API Access link from the left-hand menu. Your API key is available from the API Access page, in the Simple API Access section. Maps API applications use the Key for browser apps. 
The Real Hello World. .
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-6.224521,106.840553),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>
Simpan kode Hello world di atas di dalam browser, misal map-simple.html
Untuk melihat hasilnya kita tinggal membuka browser kesayangan kita

Berikut beberapa keterangan dari kode diatas
center: new google.maps.LatLng(-6.224521,106.840553)
angka pada kode diatas menunjukkan posisi default dari map yang kita load. 
zoom: 8
kode di atas menunjukkan zoom level dari peta, nilai paling kecil dari zoom adalah 0 , semakin besar zoom level yang kita load, maka semakin detail pula informasi yang kita dapat dari sebuah daerah, dan sebaliknya. Jika kita menggunakan zoom level 0 maka yang terlihat adalah peta dari bumi ini.
mapTypeId: google.maps.MapTypeId.ROADMAP
 kode diatas menunjukkan default jenis peta yang ditampilkan
  1. MapTypeId.ROADMAP menampilkan road map view sebagai default
  2. MapTypeId.SATELLITE menampilkan Google Earth satelite images
  3. MapTypeId.HYBRID menampilkan gabungan dari normal dan satelite view
  4. MapTypeId.TERRAIN menampilkan peta beserta terrain information
  5. setTilt  menampilkan 45 degree imagery
Tutorial di atas diambil dari dokumentasi Google Map API google. .

Hasil :

Share This Story

Tags: ,

Just an Ordinary Techno Learner

You Might Also Like

2 comments

  1. Fahmi Al AzharNovember 14, 2012 at 1:08 PM

    Bikin aplikasi jadinya trus ditaruh di web bisa ga ni?
    Jangan lupa mampir juga ke azuharu ya

    ReplyDelete
  2. deaNovember 14, 2012 at 1:49 PM

    bisa, ini kan yang paling dasar buat nampilin peta dari google map aja. .
    nanti nya bisa di embed di web lain atau di blog. .

    ReplyDelete