Selamat malam, kali ini saya akan membuat tutorial tentang Google Maps. Tutorial kali ini membuat Marker di Google Maps.  Pertama-tama kalian harus mempunyai Google Maps API.  Ok langsung saja tutorialnya. Buat file berekstensi .php terserah kalian mau dinamakan apa filenya. Setelah itu tuliskan ...

Meletakkan Marker di Google Maps

Selamat malam, kali ini saya akan membuat tutorial tentang Google Maps. Tutorial kali ini membuat Marker di Google Maps. 

Pertama-tama kalian harus mempunyai Google Maps API.  Ok langsung saja tutorialnya. Buat file berekstensi .php terserah kalian mau dinamakan apa filenya. Setelah itu tuliskan API yang telah kalian dapatkan, scriptnya seperti dibawah ini

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

Lalu atur canvas nya, saya sendiri memakai ukuran 500px X 400px

<style>
#map {
width: 500px;
height: 400px;
border: 1px solid blue;
}
</style> 

Tuliskan juga scriptnya di bawah ini, untuk penjelasannya saya tuliskan dibawah juga

  • zoom: untuk perbesaran/skala peta;
  • center: untuk menentukan titik koordinat tengah peta;
  • mapTypeId: untuk menentukan tipe peta yang digunakan;
var options = {
zoom: 12,
center: new google.maps.LatLng(-6.886791,107.615238), 
mapTypeId: google.maps.MapTypeId.ROADMAP
};

Membuat objek peta Google Maps, memanggil elemen HTML dengan id = 'map'  seperti di bawah ini.

var map = new google.maps.Map(document.getElementById('map'), options);

Selanjutnya menambahkan marker (penanda) ke dalam peta.

var marker = new google.maps.Marker({
position: new google.maps.LatLng(-6.886791,107.615238),
map: map,
title: 'Silahkan Klik'
});

Membuat InfoWindow dengan memunculkan informasi/teks ketika di-klik

var infowindow = new google.maps.InfoWindow({
content: 'UNIKOM'
}); 

Menambahkan event Click pada marker

google.maps.event.addListener(marker, 'click', function() { 

Dan yang terkahir memanggil 'open method' InfoWindow

infowindow.open(map, marker);
});
};
})();
</script>

Nah untuk full scriptnya seperti ini

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Marker Satu Lokasi</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyAqhJ6sg9DMHKhLvWrzU s96NDMemaDXriw&sensor
=false"></script> 
<style>
#map {
width: 500px;
height: 400px;
border: 1px solid blue;
}
</style> 
<script type="text/javascript">
(function() {
window.onload = function() {

var options = {
zoom: 12,
center: new google.maps.LatLng(-6.886791,107.615238), 
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById('map'), options);

var marker = new google.maps.Marker({
position: new google.maps.LatLng(-6.886791,107.615238),
map: map,
title: 'Silahkan Klik'
});

var infowindow = new google.maps.InfoWindow({
content: 'UNIKOM'
}); 

google.maps.event.addListener(marker, 'click', function() { 

infowindow.open(map, marker);
});
};
})();
</script>
</head> 
<body>
<center> 
<h4>Meletakkan Marker di Google Maps</h4>
<div id="map"></div> 
</center>
</body>
</html>

 

 

 


About Author

Ryan Ranjani


Comment & Discussions

    Please LOGIN before if you want to give the comment.