- Daftar
- 4 Oct 1988
- Post
- ×
- Like diterima
- 9.055
LINK :
DEMO
DOWNLOAD : http://www.mediafire.com/download/4fx0dmfuinpb6rs/peta-gmaps.zip
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
Perintah CSS
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 :
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.
DEMO
DOWNLOAD : http://www.mediafire.com/download/4fx0dmfuinpb6rs/peta-gmaps.zip
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
Code:
<html>
<head>
<title>Menampilkan Peta Google Maps dengan gMaps - ePlusGo</title>
</head>
<body>
<div id="map"></div>
</body>
</html>Perintah CSS
Code:
#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 :
Code:
<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.
Code:
<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>
