Maplace.js – Plugin Jquery Google Map yang Serba Guna

Bagi yang tertarik untuk memasukkan google map ke dalam web, maplace.js merupakan jquery plugin yang menarik. Walaupun ukurannya kecil, namun memiliki fitur yang lengkap atau serba guna. Dengan maplace,js, anda dapat memasukkan google map di web beserta marker, dan custom menu dengan cepat dan mudah. Maplace.js membutuhkan adanya jquery dan Google Maps API v3 .

Fitur-fitur yang tersedia di maplace.js

• Implementasi yang mudah dan opsi menu yang sederhana
• Google map dapat dijalankan sebanyak apapun
• Tersedia marker dengan icon yang dapat dipilih sendiri dan kontrol menu yang dapat disesuaikan sendiri
• Mendukung untuk melakukan directions, polygons, polylines, Fusion tables dan styled maps
• Berjalan disemua browser yang populer.

Maplace.js memiliki lisensi MIT.

Contoh implementasi :

JS

var maplace = new Maplace(); 
maplace.Load(); 
// or new Maplace().Load(); 

HTML

Maka, itu sudah cukup untuk menampilkan google map. Jika Anda ingin mengarahkan posisi map yang ditampilkan bisa ditambahkan seperti :

new Maplace({
	show_markers: false,
	locations: [{
		lat: 45.9, 
		lon: 10.9,
		zoom: 8
	}]
}).Load(); 

atau

new Maplace({
	map_options: {
		set_center: [45.9, 10.9],
		zoom: 8
	}
}).Load(); 

Sementara jika anda ingin membuat rute pada maplace.js, anda terlebih dahulu harus menginisiasikan titik koordinat asal dan tujuan pada variabel, maka secara otomatis maplace.js akan menampilkan rutenya.

Misal :

variabel titik koordinat

var LocsD = [
	{
			lat: 45.4654,
			lon: 9.1866,
			title: 'Milan, Italy',
			html: '
Milan, Italy
'
	},
	{
			lat: 47.36854,
			lon: 8.53910,
			title: 'Zurich, Switzerland',
			html: '
Zurich, Switzerland
',
			visible: false
	},
	{
			lat: 48.892,
			lon: 2.359,
			title: 'Paris, France',
			html: '
Paris, France
',
			stopover: true
	},
	{
			lat: 48.13654,
			lon: 11.57706,
			title: 'Munich, Germany',
			html: '
Munich, Germany
'
	}
];

Sementara untuk menampilkannya :

new Maplace({
	locations: LocsD,
	map_div: '#gmap-route',
	generate_controls: false,
	show_markers: false,
	type: 'directions',
	draggable: true,
	directions_panel: '#route',
	afterRoute: function(distance) {
		$('#km').text(': '+(distance/1000)+'km');
	}
}).Load(); 

cukup sederhana kan 🙂