Menambahkan marker pada google map

alfa6661
- December 18, 2015
0 (0 votes)
Rate :
Cara menambahkan marker / penanda pada google map

Pada artikel Memasang Google Map pada website telah dibahas bagaimana kode sederhana untuk menampilkan google map pada website menggunakan html dan javascript. Pada artikel kali ini akan di bahas bagaimana menambahkan marker / penanda pada map yang dibuat.

Untuk membuat tanda baru kita bisa gunakan kode dibawah ini:

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(-6.9147444,107.6098111), // longitude latitude
  map: map,
  title: 'Bandung'
});

Kode Lengkapnya akan terlihat seperti ini

<!DOCTYPE html>
<html>
<head>
	<!-- Load google API -->
	<script src="http://maps.googleapis.com/maps/api/js"></script>
	<script>
	function initialize() {
	  var options = {
	    center:new google.maps.LatLng(-6.9147444,107.6098111), // longitude latitude bandung
	    zoom:5,
	    mapTypeId:google.maps.MapTypeId.ROADMAP // Tipe ROADMAP
	  };
	  // create map object
	  var map=new google.maps.Map(document.getElementById("googleMap"),options);
	  var marker = new google.maps.Marker({
	      position: new google.maps.LatLng(-6.9147444,107.6098111), // longitude latitude
	      map: map,
	      title: 'Bandung'
	  });
	}
	// membuat Event Listener untuk memanggil fungsi initialize pada saat halaman selesai di load
	google.maps.event.addDomListener(window, 'load', initialize);
	</script>
</head>
<body>
	<!-- Map container -->
	<div id="googleMap" style="width:500px;height:280px;"></div>
</body>
</html>

Multiple Marker

Untuk membuat lebih dari satu marker, kita hanya perlu menambahkan variable marker diatas dan mengganti sesuai opsi yang diinginkan.

function initialize() {
var options = {
	center:new google.maps.LatLng(-6.9147444,107.6098111), // longitude latitude bandung
	zoom:5,
	mapTypeId:google.maps.MapTypeId.ROADMAP // Tipe ROADMAP
};
// create map object
var map=new google.maps.Map(document.getElementById("googleMap"),options);
var marker = new google.maps.Marker({
 	position: new google.maps.LatLng(-6.9147444,107.6098111), // longitude latitude
	map: map,
	title: 'Bandung'
});
var marker = new google.maps.Marker({
	position: new google.maps.LatLng(-6.211544,106.845172), // longitude latitude
	map: map,
	title: 'Jakarta'
});
}
// membuat Event Listener untuk memanggil fungsi initialize pada saat halaman selesai di load
google.maps.event.addDomListener(window, 'load', initialize);

Computer science education cannot make anybody an expert programmer any more than studying brushes and pigment can make somebody an expert painter

– Eric S. Raymond

Have a better explanation?

If you have comments about this post. Please write your comments below

No comments associated with this article