Selamat Pagi, Dalam tutorial kali saya akan membagikan cara membuat Marker di Google Maps dengan menggunakan API Console. Langsung saja ikuti langkah-langkah dibwah ini :
1. Pastikan Kamu telah memiliki Akun Google agar dapat menkoneksikan ke Google Maps.
2. Selanjutnya, masuk ke Google API Consule Klik disini , jika sudah masuk ke link tersebut maka akan tampil seperti gambar di bawah ini :
3. Kemudian Pilih Menu Credentials di Side Bar
4. Selanjutnya pilih Create Credentials lalu pilih API Key
5. Setelah kalian mengklik API Key, Maka akan tampil seperti gambar di bawah ini, kemudian copy kode API Key nya.
6. Sekarang Kita sudah selesai dalam pembuatan API Key, Sekarang kita membuat file index.html dan isikan titik koordinat tempat yang ingin di buat marker ( teks yang berwarna biru ) dan paste kan API Key yang kalian dapat tadi pada kode yang berwarna merah pada source code html di bawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Praktikum 1</title>
<meta charset="utf-8"><!--parsing code-->
<meta name="viewport" content="initial-scale=1.0"> <!--web mobile-->
<style>
#map{/* modifikasi element html yang ber-id map*/
height: 100%;
}
html, body{
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
//data titik koordinat
var locations = [
['ATM BNI Hotel Damai Indah',-3.763719, 114.769525],
['ATM BRI Poltek',-3.753401, 114.765975],
['ATM Bank Kalsel Samsat',-3.758420, 114.767658],
['ATM BRI RSIA', -3.789774, 114.775673],
['ATM BRI', -3.799969, 114.776940],
['ATM Mandiri',-3.801819, 114.765782],
['ATM Bank Kalse',-3.802517, 114.767824],
['ATM BRI',-3.807727, 114.759991],
['ATM BRI',-3.814915, 114.785314],
['ATM Mandiri',-3.787051, 114.740300]
];
map = new google.maps.Map(document.getElementById('map'),{
center: {lat: -3.7990165, lng: 114.779605},
zoom: 10
});
var marker;
var infowindow = new google.maps.InfoWindow();
for (var i=0; i<locations.length; i++){
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1],locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i){
return function(){
infowindow.setContent(""+locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCns0o8yq9Q6Z3sskLNzV6hfaPilFI5twU
&callback=initMap" async defer ></script>
</body>
</html>
<html>
<head>
<title>Praktikum 1</title>
<meta charset="utf-8"><!--parsing code-->
<meta name="viewport" content="initial-scale=1.0"> <!--web mobile-->
<style>
#map{/* modifikasi element html yang ber-id map*/
height: 100%;
}
html, body{
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
//data titik koordinat
var locations = [
['ATM BNI Hotel Damai Indah',-3.763719, 114.769525],
['ATM BRI Poltek',-3.753401, 114.765975],
['ATM Bank Kalsel Samsat',-3.758420, 114.767658],
['ATM BRI RSIA', -3.789774, 114.775673],
['ATM BRI', -3.799969, 114.776940],
['ATM Mandiri',-3.801819, 114.765782],
['ATM Bank Kalse',-3.802517, 114.767824],
['ATM BRI',-3.807727, 114.759991],
['ATM BRI',-3.814915, 114.785314],
['ATM Mandiri',-3.787051, 114.740300]
];
map = new google.maps.Map(document.getElementById('map'),{
center: {lat: -3.7990165, lng: 114.779605},
zoom: 10
});
var marker;
var infowindow = new google.maps.InfoWindow();
for (var i=0; i<locations.length; i++){
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1],locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i){
return function(){
infowindow.setContent(""+locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCns0o8yq9Q6Z3sskLNzV6hfaPilFI5twU
&callback=initMap" async defer ></script>
</body>
</html>
7. Kemudian buka file index.html tadi pada browser kalin, maka akan tampil peta dan marker, jika marker kalian klik akan ada informasi mengenai marker tersebut.
OK seikain tutorial mengenai cara membuat Marker di Google Maps dengan menggunakan API Console, Semoga tutorial ini bermenfaat.
1 Comments:
Slot machines with 3D edge titanium
Slot machines with 3D edge titanium. the rainbow titanium famous SEGA titanium septum ring Mega Drive and Genesis Classics collection is coming titanium density to titanium hair trimmer Nintendo titanium fishing pliers Switch. SEGA has
EmoticonEmoticon