Mengganti Icon Marker Google Maps API dengan Gambar - Mari Belajar Coding -->

Selasa, 12 November 2019

Mengganti Icon Marker Google Maps API dengan Gambar


Mengganti Icon Marker Google Maps API dengan Gambar

Selamat datang kembali di blog Mari belajar coding. Jika tutorial sebelumnya kita pernah belajar mengganti icon marker Google Maps API menggunakan plugin Maps Icon, kali ini kita akan belajar mengganti icon marker dengan gambar yang telah kita siapkan terlebih dahulu. Penggunaan plugin maps icon sebenarnya lebih efisien karena tidak perlu menyiapkan gambar untuk mengganti icon marker, tetapi penggunaan gambar juga lebih bisa di sesuaikan sesuai kebutuhan. Kita juga bisa mendesain sendiri gambar atau icon apa yang akan di gunakan sebagai marker maps. 

Untuk mengganti icon marker dengan gambar sebenarnya hanya menambah variabel icon. Lihat baris yang diberi highlight. Teman-teman bisa mengganti url atau alamat icon.

var marker = new google.maps.Marker({
    map: map,
    animation: google.maps.Animation.DROP,
    position: myLatlng,
    icon: 'https://img.icons8.com/officel/40/000000/marker.png'
});

Contoh lengkapnya seperti di bawah ini, ganti api key dengan api key teman-teman.
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
   
      function initMap() {
        var mapCanvas = document.getElementById('map');      
        // Center maps
        var myLatlng = new google.maps.LatLng(-6.9902658,110.4229144);

        // Map Options    
        var mapOptions = {
          zoom: 12,
          center: myLatlng
        };
        
        // Create the Map
        map = new google.maps.Map(mapCanvas, mapOptions);

        var marker = new google.maps.Marker({
            map: map,
            animation: google.maps.Animation.DROP,
            position: myLatlng,
            icon: 'https://img.icons8.com/officel/40/000000/marker.png'
        });

        // To add the marker to the map, call setMap();
        marker.setMap(map);
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>
  </body>
</html>

Untuk menampilkan marker dari database, kita perlu menyiapkan database nya terlebih dahulu. Buat database db_maps, selanjutnya buat tabel Tempat untuk menyimpan data tempat dan koordinat lokasi. Buat satu tabel lagi untuk menyimpan data Tipe tempat. Tipe tempat ini yang akan menentukan icon apa yang akan ditampilkan sebagai marker.
CREATE DATABASE `db_maps`;
USE `db_maps`;

CREATE TABLE `tempat` (
`Id_Tempat` int(11) PRIMARY KEY NOT NULL,
`Nama_Tempat` varchar(255),
`Alamat` varchar(255),
`Id_Tipe` int(11),
`Lat` varchar(50),
`Lng` varchar(50)
);

CREATE TABLE `tipe` (
`Id_Tipe` int(11) PRIMARY KEY NOT NULL,
`Tipe` varchar(50),
`Image_Path` varchar(255)
);

Insert data kedalam tabel tempat dan tipe.
INSERT INTO `tempat` (`Id_Tempat`, `Nama_Tempat`, `Alamat`, `Id_Tipe`, `Lat`, `Lng`) VALUES
(1, 'Paragon City Mall Semarang', 'Jl. Pemuda No.118, Sekayu, Kec. Semarang Tengah, Kota Semarang, Jawa Tengah 50132', 1, '-6.9788825', '110.4136937'),
(2, 'Achmad Yani International Airport', 'Tambakharjo, Kec. Semarang Bar., Kota Semarang, Jawa Tengah 50149', 2, '-6.9663401', '110.3728004'),
(3, 'Lawang Sewu', 'Jl. Pemuda, Sekayu, Kec. Semarang Tengah, Kota Semarang, Jawa Tengah 50132', 3, '-6.9839838', '110.4097825');


INSERT INTO `tipe` (`Id_Tipe`, `Tipe`, `Image_Path`) VALUES
(1, 'Shop', 'icon/shopping-pin.png'),
(2, 'Airport', 'icon/airport-pin.png'),
(3, 'Building', 'icon/building-pin.png');


Setelah database dibuat dan insert data kedalam tabel. Selanjutnya kita akan membuat sebuah JSON data tempat dengan PHP. data-maps.php
<?php

 header('Content-Type: application/json; charset=utf8');
 
 $con = mysqli_connect("localhost","root","","db_maps");

 //query untuk menampilkan data maps dan icon image
 $sql="SELECT
   tempat.Id_Tempat,
   tempat.Nama_Tempat,
   tempat.Alamat,
   tempat.Lat,
   tempat.Lng,
   tipe.Tipe,
   tipe.Image_Path
  FROM
   tempat
   LEFT JOIN tipe ON tempat.Id_Tipe=tipe.Id_Tipe";

 $query=mysqli_query($con, $sql);

 $array=array();
 while($data=mysqli_fetch_assoc($query)) $array[]=$data; 
 
 echo json_encode($array);
?>

Buat file latihan.php untuk menampikan maps beserta markernya.
<!DOCTYPE html>
<html>
  <head>
    <title>maribelajarcoding.com</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" ></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>  
     <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <div align="center">
      <a href="https://www.maribelajarcoding.com" target="_blank">maribelajarcoding.com</a>
    </div>
     <script>
        function initMap() {
       
        var mapCanvas = document.getElementById('map');      
        // Center maps
        var myLatlng = new google.maps.LatLng(-6.9902658,110.4229144);
        // Map Options    
        var mapOptions = {
          zoom: 12,
          center: myLatlng
        };
        
        // Create the Map
        map = new google.maps.Map(mapCanvas, mapOptions);

        var infoWindow = new google.maps.InfoWindow;

        //request data from data-maps.php
        $.getJSON( "data-maps.php", function( data ) {
          //parsing data json 
          $.each( data, function( i, item ) {

            //set point marker
            var point = new google.maps.LatLng(
                        parseFloat(item.Lat),
                        parseFloat(item.Lng));

            //create pop up info header
            var infowincontent = document.createElement('div');
            var strong = document.createElement('strong');
            strong.textContent = item.Nama_Tempat;
            infowincontent.appendChild(strong);
            
            infowincontent.appendChild(document.createElement('br'));

            //create pop up info content
            var text = document.createElement('text');
            text.textContent = item.Alamat
            infowincontent.appendChild(text);

            //marker option
            var marker = new google.maps.Marker({
                map: map,
                animation: google.maps.Animation.DROP,
                position: point,
                icon: item.Image_Path
            });

            //popup info 
            marker.addListener('click', function() {
              infoWindow.setContent(infowincontent);
              infoWindow.open(map, marker);
            });

          });
          
        });
        }
    </script>

  </body>
</html>

Ganti your api key dengan api google maps teman-teman, pastikan terkoneksi dengan internet untuk request data Google Maps.
Mengganti Icon Marker Google Maps API dengan Gambar


Source Code:
MapsIconImage.zip

Related Posts

Load comments