Selamat malam semua, pada malam ini saya akan share tentang cara menambahkan map pada website kalian. Ini berguna untuk menampilkan lokasi kalian, misalkan kalian mau menentukan lokasi COD untuk OLSHOP, lokasi toko atau lokasi kalian pribadi.
Kita hanya menggunakan file html biasa yang didalamnya akan berisi javascript. Sebelum lanjut, dibawah ini saya buat lokasi kampus saya.
Yang akan kita lakukan adalah konfigurasi lokasi default dan besar zoom diawal. Itu saja gampang kok, silakan kalian ikuti step-stepnya:
1# Silakan kalian copas atau ketik ulang source code dibawah ini:
<!DOCTYPE html>
<html>
<head>
<title>GOOGLE MAPS</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<style type="text/css">
#map{
width: 750px;
height: 300px;
}
</style>
</head>
<body>
<div class="row" style="margin-top: 100px;">
<div class="col s6 offset-s2">
<div class="card">
<div class="card-image" id="map">
</div>
</div>
</div>
</div>
<script>
function myMap() {
var mapCanvas = document.getElementById("map");
var mapOptions = {
center: new google.maps.LatLng(-8.799077, 115.161562),//mengatur posisi awal pada map, silakan sesuaikan masing-masing
zoom: 20 //mengatur zoom saat pertama map di load
}
var map = new google.maps.Map(mapCanvas, mapOptions);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>
</body>
</html>
2# Sekarang kita cari latitude longitude lokasi yang akan kita tentukan, caranya silakan kalian buka google maps di browser. Pada tutorial ini saya akan menampilkan monas.
sekarang kita liat koordinat monas dengan klik kanan seperti gambar di atas.
klik angka-angka itu, sampai kolom seachnya terganti menjadi angka-angka seperti dibawah ini.
3# Copy pastekan pada code dibagian center: new google.maps.LatLng(-8.799077, 115.161562),
ganti angkanya dengan angka yang tadi kita cari yaitu posisi monas. Tampilan monas pada map yang ada di map yang kita buat seperti di bawah ini:
4# Dari gambar di atas, zoomnya terlalu besar sekarang kita atur zoomnya pada bagian code zoom: 20 . ganti 20 sesuai dengan selera kalian yang penting posisinya jelas. Pada tutorial ini saya ganti dengan 16 maka tampilannya seperti dibawah ini.
Ok, sekian tutorialnya semoga bermanfaat buat kalian semua. Mungkin untuk blog yang memakai blogspot sudah tersedia pluginnya. Tetapi jika kalian ingin menambahkan manual bisa kalian pakai cara di atas.
Ala Bisa Karena Biasa
Baca artikel lainnya:
