Cara menampilkan google map pada website

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.
Google Map Pada Website
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.
Google Map Pada Website
sekarang kita liat koordinat monas dengan klik kanan seperti gambar di atas.
Google Map Pada Website

klik angka-angka itu, sampai kolom seachnya terganti menjadi angka-angka seperti dibawah ini.
Google Map Pada Website

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:
Google Map Pada Website

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.
Google Map Pada Website

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:

Artikel Terkait

16 komentar

wah, informasinya cukup mencerahkan bro terutama bagi yg masih awam..

Komentar ini telah dihapus oleh pengarang.

Ternyata bw sangat bernanfaat. Saya jadi dapat info berharga ini.

hihi kalau serius bw yang pasti dapat info lebih gan

wah tutorialnya lengkap sekali gan

mantap gan blog nya tutor nya keren :D

google map ini sangat berfungsi buat olshop, tapi buat blog macam ane punya kayaknya kurang berguna deh gan, tapi yah lumayan deh ilmunya, sapatau kedepannya ane bisa buka olshop wkwk


kunjungi juga : Gudang Ilmu Bimbingan Konseling


EmoticonEmoticon