Menampilkan Peta Google Maps dengan gMaps

Adakalanya ketika membuat desain web, kita harus menampilkan informasi peta. Misalkan peta alamat sebuat kantor pada web portfolio ataupun profil sebuah perusahaan. Umumnya peta yang sering digunakan ialah peta dari Google Maps.

Download

Demo

Untuk menampilkan peta Google Maps secara mudah pada halaman web, Anda bisa menggunakan salah satu plugin yaitu gMaps. Berikut langkah menampilkan peta Google Maps menggunakan gMaps.

Langkah 1

Buatlah sebuah file (misal index.php), kemudian tuliskan perintah HTML dan CSS untuk area yang akan digunakan untuk menampilkannya peta Google Maps. Contoh :

Dokumen HTML

<html>
<head>
    <title>Menampilkan Peta Google Maps dengan gMaps - ePlusGo</title>
</head>
<body>
    <div id="map"></div>
</body>
</html>

Perintah CSS

#map {
    height:250px;
    margin-bottom:40px;
    margin-top:20px;
    padding:20px;
    width:800px;
}

Langkah 2

Setelah membuat area peta (contoh diatas pada #map), selanjutnya sematkan plugin jQuery, Google Maps serta plugin gMaps ke dalam file index.php. Untuk plugin gMaps, Anda bisa mendapatkannya pada link berikut. Contoh :

<html>
<head>
    <title>Menampilkan Peta Google Maps dengan gMaps - ePlusGo</title>
</head>
<body>
    <div id="map"></div>

    <script type='text/javascript' src='jquery.js'></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type='text/javascript' src='gmaps.js'></script>
</body>
</html>

Langkah 3

Untuk dapat menampilkan peta google maps menggunakan gMaps, Anda harus menuliskan koordinat latitude dan longitude sebuah lokasi. Serta apabila Anda ingin menampilkan marker pada lokasi yang di inginkan tuliskan pula perintah pengaturan plugin gMaps di dokumen web yang sudah dibuat.

Contoh berikut, kita akan menampilkan peta lokasi Bandar Udara International Soekarno Hatta.

<script type="text/javascript">
    (function( $ ){
        var map;
        map = new GMaps({
          el: '#map', // Menampilkan peta pada ID map
          lat: -6.125037, // Koordinat Latitude
          lng: 106.653658, // Koordinat Longitude
          zoom: 16
        });
        map.addMarker({ // Menambahkan Marker
          lat: -6.125037, // Koordinat Latitude
          lng: 106.653658, // Koordinat Longitude
          title: 'Bandar Udara Internasional Soekarno–Hatta',
          infoWindow: {
            content: '<p>Bandar Udara Internasional Soekarno–Hatta <br> Jakarta Tangerang Banten 19120</p>'
          }
        });
     })(jQuery);
</script>

Kesimpulan

Dengan menggunakan plugin gMaps, Anda akan sangat terbantu dalam menampilkan peta lokasi google maps secara mudah. Apabila Anda ingin melakukan custom lainnya, silahkan baca dokumentasinya lebih lanjut. Semoga bermanfaat.