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 :D

<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