Bu Sus Marker

Menampilkan Marker pada Peta Secara Manual pada script
HTML
A. Membuat Google Api Key

1. Pengertian
API atau Application Programming Interface dapat dikatakan
sebagai a set of methods and tools that can be used for building
software applications. Yakni, sekumpulan metode dan tools yang dapat
digunakan untuk membangun suatu aplikasi. API juga berarti kode
program yang merupakan antarmuka atau penghubung antara aplikasi
yang kita buat dengan fungsi-fungsi yang dikerjakan.
Google Maps API adalah suatu library yang berbentuk JavaScript,
yang berisi fungsi fungsi pemrograman yang disediakan oleh Google
maps agar Google maps bisa di integrasikan kedalam Web atau
aplikasi yang sedang di buat. Dengan kata lain Google Maps
merupakan suatu peta yang dapat dilihat dengan menggunakan suatu
browser.
Kita perlu mendapatkan key sebagai kunci untuk mengakses
google API. Sebenarnya google sendiri mengizinkan kita dapat
menggunakan google API tanpa harus mendapatkan key, namun itu
hanya sebatas untuk penggunaan secara personal, dalam arti apabila
aplikasi yang kita buat dikembangkan untuk aplikasi yang dapat
diakses oleh banyak pengguna, maka penggunaan key untuk google
API wajib dibutuhkan.
B. Langkah Mendapatkan Google Api Key
1. Pastikan anda memiliki account google (akun gmail), jika anda belum
memiliki, maka buatlah di alamat ini www.gmail.com
2. Setelah terdaftar dalam account google, kemudian kunjungi alamat ini
https://developers.google.com/maps/documentation/javascript/,
kemudian akan tampil seperti di bawah ini
Klik Masuk
Masukkan accont yang telah kalian buat
Masukkan Password account google anda

Maka akan tampil seperti dibawah ini, kemudian klik
dapatkan kunci
Maka akan tampil seperti ini, dan klik Lanjutkan

Setelah itu klik lanjutkan
Setelah tampil seperti dibawah ini, klik buat untuk

membuat project
Setelah tampil seperti dibawah ini, maka anda sudah
berhasil
Untuk Mengaktifkan
2. Menampilkan dan membuat 10 Marker pada Peta Secara
Manual
A. Buat Scribt HTML untuk membuat Marker pada beberapa
kota yaitu
Scribt utama untuk 1 kota
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0,
user-scalable=no">
<meta charset="utf-8">
<title>Info windows</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?
key=AIzaSyC8I-ZG8_66uxvplhagkUr5v33xEVbJmas"
"></script> // Masukkan api key yang telah dibuat tadi
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-
7.914263, 112.643909);
var malang = new google.maps.LatLng(-7.914263,
112.643909);//posisi latlng ponorogo
var mapOptions = {
zoom: 8,
center: myLatlng
};
var map = new

google.maps.Map(document.getElementById('map-
canvas'), mapOptions);
//untuk info malang

var contentString1 = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">M A L A
N G</h1>'+
'<div id="bodyContent">'+
'<p><b>MALANG</b>, Malang dikenal sebagai
gudangnya apel, sehingga julukan <b>"Kota Apel"
</b>'+
tidaklah mengherankan untuk disandangnya hal
ini dikarenakan produksi apel di Malang'+
cukup melimpah, dimana wilayah produksinya
berpusat di Kota Batu dan Poncokusumo. Apel dari '+
Malang inilah yang telah banyak di ekspor ke luar
negeri dan dijual ke berbagai daerah di dalam '+
negeri. Dari sini pulalah, berbagai pangan,
minuman, maupun jajanan khas Apel seperti sari apel, '+
kripik, manisan, dan serba apel lainnya diproduksi.
'+//untuk menampilkan teks
'<CENTER><P><img
src="malang.jpg"></P></CENTER>'+//untuk
menampilkan gambar
'<embed src="malang.mp3">'+//untuk backgroun
musik saat di klik
'</div>'+
'</div>';
var infowindow1 = new google.maps.InfoWindow({

content: contentString1
});
var marker1 = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Malang'
});
google.maps.event.addListener(marker1, 'click',
function() {
infowindow1.open(map,marker1);//memanggil div
untuk menampilkan konten ketika di klik
});
}
google.maps.event.addDomListener(window, 'load',
initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Untuk 10 kota, anda harus mengetahui LongLat

masing-masing kota, dan mengcopy scribt diatas
dengan inisialisi terlebih dahulu
Disini Saya akan membuat deng 10 kota yang terdiri
dari:
a. Ponorogo (-7.827945, 111.463554)
b. Malang (-7.914263, 112.643909)
c. Lumajang (-8.080175, 113.160267)
d. Surabaya (-7.179115, 112.764759)
e. Banyuwangi (-8.235146, 114.368763)
f. Jember (-8.148152, 113.709583)
g. Madiun (-7.593130, 111.534290)
h. Kediri (-7.783662, 112.017689)
i. Pamekasan (-7.173665, 113.489857)
j. Tuban (-6.816658, 112.042892)
Membuat Scrib untuk 10 kota
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0,
user-scalable=no">
<meta charset="utf-8">
<title>Info windows</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script
src="https://maps.googleapis.com/maps/api/js?
key=AIzaSyDbLk2G3mkRkt8oRDPUgZbkX1k1z2xcok0&
signed_in=true"></script>
<script>
function initialize() {
var myLatlng1 = new google.maps.LatLng(-
7.827945, 111.463554);
var ponorogo = new google.maps.LatLng(-7.827945,
111.463554);//posisi latlng ponorogo
7.914263, 112.643909);
var malang = new google.maps.LatLng(-7.914263,
112.643909);//posisi latlng malang
8.080175, 113.160267);
var lumajang = new google.maps.LatLng(-8.080175,
113.160267);//posisi latlng lumajang
7.179115, 112.764759);
var lumajang = new google.maps.LatLng(-7.179115,
112.764759);//posisi latlng surabaya
8.235146, 114.368763);
var banyuwangi = new google.maps.LatLng(-
8.235146, 114.368763);//posisi latlng banyuwangi
8.148152, 113.709583);
var jember = new google.maps.LatLng(-8.148152,
113.709583);//posisi latlng jember
7.593130, 111.534290);
var madiun = new google.maps.LatLng(-7.593130,
111.534290);//posisi latlng madiun
7.783662, 112.017689);
var kediri = new google.maps.LatLng(-7.783662,
112.017689);//posisi latlng kediri
7.173665, 113.489857);
var pamekasan= new google.maps.LatLng(-
7.173665, 113.489857);//posisi latlng Pamekasan
6.816658, 112.042892);
var tuban= new google.maps.LatLng(-6.816658,
112.042892);//posisi latlng Tuban
var mapOptions = {
zoom: 8,
center: myLatlng1
};
var map = new

google.maps.Map(document.getElementById('map-
canvas'), mapOptions);
//untuk info ponorogo

'</div>'+
'<h1 id="firstHeading" class="firstHeading">P O N
O R O G O</h1>'+
'<p><b>PONOROGO</b>, Dikenal dengan julukan
<b>Kota Reog</b> atau <b>Bumi Reog</b> ' +
'karena daerah ini merupakan daerah asal dari
kesenian Reog '+//untuk menampilkan teks
'<CENTER><P><img
src="PONOROGO.jpg"></P></CENTER>'+//untuk
menampilkan gambar
'<embed src="reog-ponorogo.mp3">'+//untuk
backgroun musik saat di klik
'</div>'+
'</div>';

});
position: myLatlng1,
map: map,
title: 'Ponorogo'
});
function() {
});
initialize);
//untuk info malang

'</div>'+
'<h1 id="firstHeading" class="firstHeading">M A L
A N G</h1>'+
'<p><b>MALANG</b> dikenal sebagai gudangnya
apel, sehingga julukan <b>"Kota Apel" </b>'+
'tidaklah mengherankan untuk disandangnya hal
ini dikarenakan produksi apel di Malang'+
'cukup melimpah, dimana wilayah produksinya
berpusat di Kota Batu dan Poncokusumo. Apel dari '+
'Malang inilah yang telah banyak di ekspor ke luar
negeri dan dijual ke berbagai daerah di dalam '+
'negeri. Dari sini pulalah, berbagai pangan,
minuman, maupun jajanan khas Apel seperti sari apel,
'+
'kripik, manisan, dan serba apel lainnya
diproduksi'+ //untuk menampilkan teks
'<CENTER><P><img src="malang.jpg"
width="600" high="400"></P></CENTER>'+//untuk
menampilkan gambar
'<embed src="malang.mp3">'+//untuk backgroun
musik saat di klik
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({

});
map: map,
title: 'Malang'
});
function() {
infowindow.open(map,marker2);//memanggil div
});
initialize);
//untuk info Lumajang

'</div>'+
'<h1 id="firstHeading" class="firstHeading">L U M
A J A N G</h1>'+
'<p><b>LUMAJANG</b> disebut sebagai kota
pisang, karena di Lumajang'+
'banyak sekali menghasilkan pisang maupun
olahannya. Pisang yang paling '+
'terkenal dan menjadi ikon kota Lumajang adalah
Pisang Agung. Dikatakan Pisang Agung,'+
'karena ukurannya sebesar lengan orang dewasa.
'+ //untuk menampilkan teks
'<CENTER><P><img src="lumajang.jpg"
menampilkan gambar
'<embed src="lmj.mp3">'+//untuk backgroun
musik saat di klik
'</div>'+
'</div>';

});
map: map,
title: 'Lumajang'
});
function() {
});
initialize);
//untuk info Surabaya

'</div>'+
'<h1 id="firstHeading" class="firstHeading">S U R
A B A Y A</h1>'+
'<p><b>SURABAYA</b> adalah ibu kota Provinsi
Jawa Timur, Indonesia sekaligus'+
'menjadi kota metropolitan terbesar di provinsi
Jawa Timur. Surabaya terkenal '+
'dengan sebutan Kota Pahlawan karena sejarahnya
yang sangat diperhitungkan dalam '+
'perjuangan Arek-Arek Suroboyo (Pemuda-Pemuda
Surabaya) untuk mempertahankan kemerdekaan '+
'bangsa Indonesia dari penjajah.'+ //untuk
menampilkan teks
'<CENTER><P><img src="aya.jpg" width="500"
high="300"></P></CENTER>'+//untuk menampilkan
gambar
'<embed src="sby.mp3">'+//untuk backgroun
musik saat di klik
'</div>'+
'</div>';

});
map: map,
title: 'Surabaya'
});
function() {
});
initialize);
//untuk info Banyuwangi

'</div>'+
'<h1 id="firstHeading" class="firstHeading">B A N
Y U W A N G I</h1>'+
'<p><b>BANYUWANGI</b> terkenal dengan
kesenian tarian yang khas yaitu tari Gandrung'+
'sehingga tak heran jika kota ini disebut sebagai
<b> Kota Gandrung</b>. Tari ini dipercayai '+
'sebagai wujud dari rasa syukur masyarakat
terhadap Dewi Padi. Banyuwangi juga terkenal dengan
'+
'pemandangan eksotisnya yang berbaur dengan
kekentalan adat-istiadat orang-orang Osing yang
merupakan '+
'keturunan kerajaan Mataram. '+ //untuk
menampilkan teks
'<CENTER><P><img src="banyuwangi.jpg"
menampilkan gambar
'<embed src="bwi.mp3">'+//untuk backgroun
musik saat di klik
'</div>'+
'</div>';

});
map: map,
title: 'Banyuwangi'
});
function() {
});
initialize);
//untuk info Jember

'</div>'+
'<h1 id="firstHeading" class="firstHeading">J E M
B E R</h1>'+
'<p><b>JEMBER</b> sangat terkenal dengan
even Jember Fashion Carnaval atau sering disebut JFC
adalah '+
'sebuah even karnaval busana yang setiap tahun
digelar di Kabupaten Jember, '+
'Jawa Timur.Even ini sudah mendunia dan
mendapatkan peringkat ke 3 sebagai acara karnaval
terbesar di '+
'Asia Tenggara.'+ //untuk menampilkan teks
'<CENTER><P><img src="jembr.jpg"
></P></CENTER>'+//untuk menampilkan gambar
'<embed src="jember.mp3">'+//untuk backgroun
musik saat di klik
'</div>'+
'</div>';

});
map: map,
title: 'Jember'
});
function() {
});
initialize);
//untuk info Madiun

'</div>'+
'<h1 id="firstHeading" class="firstHeading">M A D
I U N</h1>'+
'<p><b>MADIUN</b> dijuluki sebagai <b>kota
Gadis</b>.Gadis disini merupakan'+
'sebuah singkatan dari perda-GA-ngan, pen-DI-
dikan, dan indu-S-tri. Madiun juga '+
'terkenal dengan makanan khasnya yaitu
Pecel.'+ //untuk menampilkan teks
'<CENTER><P><img src="madiun.jpg"
></P></CENTER>'+//untuk menampilkan gambar
'<embed src="madiun.mp3">'+//untuk backgroun
musik saat di klik
'</div>'+
'</div>';

});
map: map,
title: 'Madiun'
});
function() {
});
initialize);
//untuk info Kediri

'</div>'+
'<h1 id="firstHeading" class="firstHeading">K E D
I R I</h1>'+
'<p><b>KEDIRI</b> dikenal merupakan pusat
perdagangan utama untuk gula dan industri '+
'rokok terbesar di Indonesia.Di kota ini juga, pabrik
rokok kretek Gudang Garam '+
'berdiri dan berkembang. Pada tahun 2010, Kediri
dinobatkan sebagai peringkat pertama '+
'Indonesia yaitu Most Recommended City for
Investment berdasarkan survei oleh SWA yang'+
'dibantu oleh Business Digest, unit bisnis riset
grup SWA.'+ //untuk menampilkan teks
'<CENTER><P><img src="kediri.jpg" high
"300"></P></CENTER>'+//untuk menampilkan
gambar
'<embed src="kediri.mp3">'+//untuk backgroun
musik saat di klik
'</div>'+
'</div>';

});
map: map,
title: 'Kediri'
});
function() {
});
initialize);
//untuk info Pamekasan

'</div>'+
'<h1 id="firstHeading" class="firstHeading">P A M
E K A S A N</h1>'+
'<p><b>PAMEKASAN</b> dikenal sebagai
<b>Kota Gerbang Salam</b> yang merupakan'+
'singkatan dari Gerakan Pembangunan Masyarakat
Islami.Hal ini mendukung program '+
'Pemerintah dalam merealisasikan visi dari
Gerbang Salam'+ //untuk menampilkan teks
'<CENTER><P><img src="pamekasan.jpg" high
gambar
'<embed src="pamekasan.mp3">'+//untuk
backgroun musik saat di klik
'</div>'+
'</div>';

});
map: map,
title: 'Pamekasan'
});
function() {
});
initialize);
//untuk info Tuban

'</div>'+
'<h1 id="firstHeading" class="firstHeading">T U B
A N</h1>'+
'<p><b>TUBAN</b> Tuban disebut sebagai
<b>Kota Wali</b> karena Tuban adalah '+
'salah satu kota di Jawa yang menjadi pusat
penyebaran ajaran Agama Islam'+
'namun beberapa kalangan ada yang memberikan
julukan sebagai kota tuak karena'+
'daerah Tuban sangat terkenal akan penghasil
minuman (tuak & legen) yang berasal'+
'dari sari bunga siwalan'+ //untuk menampilkan
teks
'<CENTER><P><img src="tbn.jpg" high
gambar
'<embed src="tbn.mp3">'+//untuk backgroun
musik saat di klik
'</div>'+
'</div>';

});
map: map,
title: 'Tuban'
});
function() {
});
}
initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>

Bu Sus Marker

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Bu Sus Marker

Diunggah oleh

Hak Cipta:

Format Tersedia

Menampilkan Marker pada Peta Secara Manual pada script

A. Membuat Google Api Key

Masukkan Password account google anda

Maka akan tampil seperti ini, dan klik Lanjutkan

Setelah tampil seperti dibawah ini, klik buat untuk

var map = new

//untuk info malang

var infowindow1 = new google.maps.InfoWindow({

Untuk 10 kota, anda harus mengetahui LongLat

var map = new

//untuk info ponorogo

var infowindow1 = new google.maps.InfoWindow({

//untuk info malang

var infowindow = new google.maps.InfoWindow({

//untuk info Lumajang

var infowindow3 = new google.maps.InfoWindow({

//untuk info Surabaya

var infowindow4 = new google.maps.InfoWindow({

//untuk info Banyuwangi

var infowindow5 = new google.maps.InfoWindow({

//untuk info Jember

var infowindow6 = new google.maps.InfoWindow({

//untuk info Madiun

var infowindow7 = new google.maps.InfoWindow({

//untuk info Kediri

var infowindow8 = new google.maps.InfoWindow({

//untuk info Pamekasan

var infowindow9 = new google.maps.InfoWindow({

//untuk info Tuban

var infowindow10 = new google.maps.InfoWindow({

Anda mungkin juga menyukai