Membuat Custom Info pada Google Map

Pengembangan sebuah website company profile atau website yang memiliki kantor maupun toko fisik tentu sangat membutuhkan layanan API Google Map untuk menunjukkan lokasi fisik toko atau kantor yang sebenarnya pada pengunjung website. Mengapa harus memiliki fitur Map dalam bisnis yang memiliki toko atau kantor fisik? Secara tidak disadari kalian harus tahu bahwa pandangan konsumen akan berbeda antara ketika kalian menampilkan lokasi toko dengan yang tidak menampilkan lokasi toko. Tentu website yang memiliki lokasi kantor yang jelas akan memperkuat tingkat kepercayaan konsumen.

Ketika kita menggunakan API Google Map kita harus memiliki API_KEY yang bisa kalian dapatkan dengan cara yang sudah saya sampaikan pada artikel saya yang berjudul Cara Mendapatkan API_KEY Google Map.

Jika kalian sudah memilikinya bisa  langsung kita buat custom info windows pada google map dengan kode berikut.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Info windows</title>
    <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

      function initMap() {
        var dumet = {lat: -6.169063, lng: 106.784694};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: dumet
        });

        var contentString = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading">DUMET School Grogol</h1>'+
            '<div id="bodyContent">'+
            '<p><b>DUMET School</b>, Adalah tempat Kursus Terbaik yang memiliki beberapa ' +
            'cabang yang tersebar di daerah Jakarta dan Depok </p>'+
            '<p>Banyak sekali peserta kursus yang bisa membangun dan mengembangkan bisnis'+
            'yang telah ia miliki sebelumnya'+
            '</p>'+
            '<p>Attribution: DUMET School, <a href="http://www.dumetschool.com">'+
            'www.dumetschool.com</a> </p>'+
            '</div>'+
            '</div>';

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

        var marker = new google.maps.Marker({
          position: dumet,
          map: map,
          title: 'DUMET School'
        });
        marker.addListener('click', function() {
          infowindow.open(map, marker);
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

 

Baiklah teman teman kalian bisa ganti tulisan YOUR_API_KEY dengan api key milik kalian, dengan begitu semua bisa berjalan dengan baik. Demikian artikel tentang cara membuat custom info window pada google map. Semoga bermanfaat

 

1 Agustus 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat