Membuat Map Sederhana menggunakan Google Maps API v3

Hello Friends„ How are you today? I hope all of you have a great day🙂

Ok langsung aja yh..

Pertama-tama kita panggil si api gugelnya dulu.. hey„ sini donk😀

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Kedua-dua kita tentukan posisi dimana kita berada. Simpan didalam kode javascript kita. 

var cirebon = new google.maps.LatLng(-6.7166667, 108.5666667);
var cirebonBarat = new google.maps.LatLng(-6.713411147532438, 108.56200218200684); 

Ketiga-tiga kita bikin Map untuk ditampilkan di html kita..

var myOptions =	{
		  center: cirebon,
		  zoom: 15,
		  mapTypeId: google.maps.MapTypeId.ROADMAP
		};
				
var map = new google.maps.Map(document.getElementById("maps"),myOptions);

Langkah selanjutnya untuk membuat titik/point Marker dan info window ketika di klik

var marker= new google.maps.Marker({
				    position: cirebon,
				    map: map			
				});
var klik = google.maps.event.addListener;
klik(marker, 'click', (function(marker){
  return function() {
  infowindow.setContent("Ini Rumahku"),
  infowindow.open(map, marker);				
}			
})(marker));

kemudian bikin garis dari point a ke b.. (polyline)

var lingkaran = new google.maps.Circle({ map: map, center: cirebon, fillColor: "#4CED4C", fillOpacity: 0.6, strokeColor: "transparent", strokeOpacity: 0.8, strokeWeight: 2 }) lingkaran.setRadius(200);

Untuk HTML-nya seperti ini

<div id="maps" style="width: 75%"></div>

Demo+Source Langsung sini aja : http://cezmed.comeze.com/map-sederhana.html

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s