Google Map Markers with Jquery

cafe para pecinta komputer

Google Map Markers with Jquery

Author : Izul Cyber Cafe 28 June 2010 199 views No Comment

Google map saat ini semakin banyak di gunakan oleh para developer, Google Maps API memberikan cara canggih bagi pengembang dan webmaster untuk menambahkan peta interaktif kustom ke situs Web mereka. Versi 3 dari API, dirilis pada Mei 2009, merupakan pemeriksaan lengkap API dalam menanggapi beberapa tahun nilai masukan dari pengguna pada versi sebelumnya.

Dalam tutorial ini kita akan membahas beberapa fitur API yang sederhana dengan menunjukkan Anda bagaimana cara menambahkan peta dengan satu set spidol lokasi ke sebuah website. Setiap marker akan memiliki gelembung info yang terkait dengan nama dan alamat dari lokasi. Terlebih lagi, kita akan memuat data lokasi melalui Ajax, jadi ini dapat digunakan sebagai langkah pertama menuju mengembangkan aplikasi berbasis peta yang lebih canggih.

Tutorial

Mari kita mulai tutorial kali ini

Langkah-1

Buat sebuah file dengan nama Map.html

tuliskan skrip berikut untuk map.html

<!DOCTYPE html>
<html>
<head>
<title>Google Maps</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/markers.js">
 
</script>
</head>
<body><div id="map"></div>
<div ><input type="button" id="showmarkers" value="Show Markers" /></div>
</body>
</html>

Langkah-2

Buat file javascript, dan beri nama marker.xml

tuliskan skrip dibawah ini, skrip tersebut untuk menentukan lokasi-lokasi yang akan di marker, kamu bisa mendapatkan lokasi (latitude, longitude) langsung dari situs Google Maps

<?xml version="1.0"?>
 
<markers>
<marker>
<name>DEPOK</name>
<address>Stasiun Depok Baru</address>
<lat>-6.390122</lat>
<lng>106.821723</lng>
</marker>
 
<marker>
<name>DEPOK</name>
<address>Stasiun Pondok Cina</address>
<lat>-6.370032</lat>
<lng>106.831957</lng>
</marker>
 
<marker>
<name>DEPOK</name>
<address>Stasiun Universitas Indonesia</address>
<lat>-6.360191</lat>
<lng>106.831474</lng>
</marker>
 
</markers>

Langkah-3

Buat direktori dengan nama js, taruh file jquery (disini saya menggunakan jquery-1.4.1.min.js), dan sebuah file javascript lain dengan nama markers.js

tuliskan skrip berikut untuk marker.js

$(document).ready(function() {
  $("#map").css({
		height: 800,
		width: 800
	});
	var myLatLng = new google.maps.LatLng(-6.390122, 106.821723);
  MYMAP.init('#map', myLatLng, 11);
 
  $("#showmarkers").click(function(e){
		MYMAP.placeMarkers('markers.xml');
  });
});
 
var MYMAP = {
  map: null,
	bounds: null
}
 
MYMAP.init = function(selector, latLng, zoom) {
  var myOptions = {
    zoom:zoom,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  this.map = new google.maps.Map($(selector)[0], myOptions);
	this.bounds = new google.maps.LatLngBounds();
}
 
MYMAP.placeMarkers = function(filename) {
	$.get(filename, function(xml){
		$(xml).find("marker").each(function(){
			var name = $(this).find('name').text();
			var address = $(this).find('address').text();
 
			// create a new LatLng point for the marker
			var lat = $(this).find('lat').text();
			var lng = $(this).find('lng').text();
			var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
 
			// extend the bounds to include the new point
			MYMAP.bounds.extend(point);
 
			var marker = new google.maps.Marker({
				position: point,
				map: MYMAP.map
			});
 
			var infoWindow = new google.maps.InfoWindow();
			var html='<strong>'+name+'</strong.><br />'+address;
			google.maps.event.addListener(marker, 'click', function() {
				infoWindow.setContent(html);
				infoWindow.open(MYMAP.map, marker);
			});
			MYMAP.map.fitBounds(MYMAP.bounds);
		});
	});
}