Google Maps sederhana dengan GoMap

Ada banyak cara untuk membuat Google Map. Dari situsnya documentasi si Google pun mudah untuk mempelajarinya. Namun, jika anda merasa sulit dan membutuhkan solusi untuk menampilkan alamat dengan Google Map tidak terlalu rumit dan memang hanya menampilkan alamat saja dan fungsi-fungsi tertentu, anda dapat mencoba menggunakan Plugin Google Map, goMap.

Hanya membutuhkan 5 step untuk menampilkan alamat dengan Google Map di situs anda.

Step #1 :
Sisipkan Google Map Javascript pada html anda seperti kode dibawah ini

1
2
3
4
5
6
7
8
<html>
<head>
  <title>Gmap Tutorial Sederhana</title>
</head>
<body>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
</body>
</html>

Step #2 :
Tambahkan Tag / tempat untuk menyimpan maps yang akan kita tampilkan pada html.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
  <title>Gmap Tutorial Sederhana</title>
<style>
  #map {
      width:700px;
      height:400px;
      margin:20px auto;
  }
</style>
</head>
<body>
<div id="map"></div>

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
</body>
</html>

Pada kode diatas, saya menambahkan div dengan id “map” lalu saya rapihkan stylenya dengan width, height dan tampilan agar ketengah.

Step #3 :
Tambahkan dibawah kode include javascript Google Maps, jQuery dan Plugin goMap.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
  <title>Gmap Tutorial Sederhana</title>
<style>
  #map {
      width:700px;
      height:400px;
      margin:20px auto;
  }
</style>
</head>
<body>
<div id="map"></div>

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="jquery.gomap-1.3.2.js"></script>
</body>
</html>

Note: pastikan sudah mendownload terlebih dahulu jquery.gomap-1.3.2.js di halaman ini [http://www.pittss.lv/jquery/gomap/download.php], lalu sesuaikan dengan path source pemanggilan file tersebut.

Step #4 :
Tentukan Latitude dan Longitude alamat yang mau anda tampilkan pada maps. Cara yang mudah adalah anda bisa buka halaman ini [http://itouchmap.com/latlong.html], lalu ketik alamat lengkap atau yang anda mau. Lalu double klik jika alamat sudah tepat. Dan dapatkan Latitude dan Longitude di bawahnya.

Step #5 :
Setelah mendapatkan Latitude dan Longitude, sekarang mari kita tempel pada plugin goMap.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
  $(function(){
    $("#map").goMap({
      markers : [
        {
          latitude : -6.245494,
          longitude : 107.022468,
          title : 'Rumah Adiputra',
          html : {
            content : '<p>Rumah Adiputra</p>',
            popup : true
          }
        }
      ],
      zoom : 15,
      maptype : 'ROADMAP',
      scaleControl : true
    });
  });
</script>

Hanya begitu saja pemanggilan plugin goMap untuk menampilkan map google. Sederhana ya.

Settingan lebih lengkap, anda bisa baca atau mencoba contoh-contoh lain pada situs goMap dibawah ini :

Example : [http://www.pittss.lv/jquery/gomap/examples.php]

Kode lengkapnya ada dibawah ini :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<html>
<head>
  <title>Gmap Tutorial Sederhana</title>
<style>
  #map {
      width:700px;
      height:400px;
      margin:20px auto;
  }
</style>
</head>
<body>
<div id="map"></div>

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="jquery.gomap-1.3.2.js"></script>
<script>
  $(function(){
    $("#map").goMap({
      markers : [
        {
          latitude : -6.245494,
          longitude : 107.022468,
          title : 'Rumah Adiputra',
          html : {
            content : '<p>Rumah Adiputra</p>',
            popup : true
          }
        }
      ],
      zoom : 15,
      maptype : 'ROADMAP',
      scaleControl : true
    });
  });
</script>
</body>
</html>
Google Map Sederhana Dengan GoMap
Google Map Sederhana Dengan GoMap

Sampai disini, moga bisa berguna 🙂

2 comments

  1. gan …klo map api integrasi dengan web lokomedia gimana gan ..? contohnya membuat modul peta di web lokomedia ..mohon bantuanya

Leave a Reply

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

%d bloggers like this: