Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

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

maplace2

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 🙂

Related Posts
Laravel Shield : Membuat dan Implementasi HTTP Basic Auth di Laravel Pada Middleware

Apa itu http basic auth? http basic auth merupakan implementasi keamanaan sederhana berupa username dan password pada url / route Read more

9 WordPress Template Gratis 2018 Style Magazine

WordPress merupakan CMS web yang paling populer digunakan. Banyak pilihan template wordpress. Berikut sejumlah template wordpress gratis yang menarik tahun Read more

Melakukan Print dan Log Query di Laravel

Ada kalanya ketika mengembangkan aplikasi kita perlu melihat query apakah sesuai dengan yang kita inginkan. Untuk melihat query tersebut bisa Read more

Fix Unable Create Directory di WordPress

Jika anda mengalami error ketika mengupload gambar atau media yang berada di menu media di wordpress, seperti : Unable to Read more

Tagged : # #

Leave a Reply

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