Mengganti Icon Marker di Google Maps API - Mari Belajar Coding

Rabu, 01 Mei 2019

Mengganti Icon Marker di Google Maps API


Mengganti Icon Marker di Google Maps API

Selamat datang kembali di blog Mari belajar coding. Setelah postingan kemarin kita belajar menampilkan peta google maps menggunakan PHP dan database Mysql, pada tutorial kali ini kita akan belajar bagaimana cara mengganti icon marker di google maps api menggunakan PHP dan database Mysql. Dengan mengganti icon marker, kita dapat mengubah setiap icon  marker pada titik koordinat tertentu sesuai keinginan kita.

Mengganti Icon Marker di Google Maps API

1. Pastikan teman-teman sudah generate api untuk mengakes google maps menggunakan layanan api. Jika belum generate api, silahkan baca tutorialnya disini.

2. Download plugin Map Icons.

3. Buat folder maps-marker di directory xampp/htdocs. Kemudian extraks plugin map icon di dalam folder maps-marker.

4. buat file bernama latihan1.html di dalam directory xampp/htdocs/maps-marker.
<!DOCTYPE html>
<html>
 <meta charset="utf-8">
 <title>maribelajarcoding.com</title>
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no">

 <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false"></script>
 
 <link rel="stylesheet" type="text/css" href="map-icons-master/dist/css/map-icons.css">
 <script type="text/javascript" src="map-icons-master/dist/js/map-icons.js"></script> 
 <style>
  html,
  body,
  #map-canvas {
   margin: 0 auto 0 auto;
   height: 90%;
   width: 80%;
  }
  .map-icon-label .map-icon {
   font-size: 12px;
   color: #FFFFFF;
   text-align: center;
   white-space: nowrap;
  }
 </style>
</head>
<body>
 <h2 align="center">Wisata Semarang</h2>
    <div id="map-canvas"></div>
    <div align="center">
      <a href="https://www.maribelajarcoding.com" target="_blank">maribelajarcoding.com</a>
    </div>
 <script type="text/javascript">
  function initialise() {
   var mapCanvas = document.getElementById('map-canvas');   
   // Center maps
   var center = new google.maps.LatLng(-7.0016372,110.4428114);

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

   var marker1 = new mapIcons.Marker({
    map: map,
    position: new google.maps.LatLng(-6.9839838, 110.4097825),
    icon: {
     path: mapIcons.shapes.MAP_PIN,
     fillColor: '#ba0000',
     fillOpacity: 1,
     strokeColor: '',
     strokeWeight: 0,
     scale: 0.8

    },
    map_icon_label: '<span class="map-icon map-icon-museum"></span>'
   });
   
   var marker2 = new mapIcons.Marker({
    map: map,
    position: new google.maps.LatLng(-6.9836792,110.443832),
    icon: {
     path: mapIcons.shapes.MAP_PIN,
     fillColor: '#1998F7',
     fillOpacity: 1,
     strokeColor: '',
     strokeWeight: 0,
     scale: 0.8
    },
    map_icon_label: '<span class="map-icon map-icon-mosque"></span>'
   });
   
   var marker4 = new mapIcons.Marker({
    map: map,
    position: new google.maps.LatLng(-6.9682652, 110.4243436),
    icon: {
     path: mapIcons.shapes.MAP_PIN,
     fillColor: '#6331AE',
     fillOpacity: 1,
     strokeColor: '',
     strokeWeight: 0,
     scale: 0.8
    },
    map_icon_label: '<span class="map-icon map-icon-city-hall"></span>'
   });
  };

  google.maps.event.addDomListener(window, 'load', initialise);
 </script>
</body>
</html>

Keterangan:
Ganti YOUR_API_KEY dengan api yang telah di generate sebelumnya.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false"></script>
Untuk mengubah ukuran icon kamu bisa mengganti dengan mengubah css pada .map-icon-label .map-icon 
.map-icon-label .map-icon {
 font-size: 12px;
 color: #FFFFFF;
 text-align: center;
 white-space: nowrap;
}


Baca Juga Mengganti Icon Marker Google Maps API dengan Gambar 

Karena pada contoh menggunakan wilayah Kota Semarang, kamu bisa mengubah center maps sesuai dengan koordinat yang kamu inginkan.
var mapCanvas = document.getElementById('map-canvas');   
// Center maps
var center = new google.maps.LatLng(-7.0016372,110.4428114);

// Map Options  
var mapOptions = {
 zoom: 12,
 center: center
};

Kode dibawah ini berfungsi untuk membuat marker dan menampilkan icon maps didalamnya. 
var marker1 = new mapIcons.Marker({
 map: map,
 position: new google.maps.LatLng(-6.9839838, 110.4097825),
 icon: {
  path: mapIcons.shapes.MAP_PIN,
  fillColor: '#ba0000',
  fillOpacity: 1,
  strokeColor: '',
  strokeWeight: 0,
  scale: 0.8

 },
 map_icon_label: '<span class="map-icon map-icon-museum"></span>'
});

Position merupakan koordinat marker yang akan di tampilkan.
path merupakan bentuk dari marker. Untuk mengubah bentuk marker bisa di ganti dengan memilih kode berikut ini.
path: mapIcons.shapes.MAP_PIN
path: mapIcons.shapes.ROUTE
path: mapIcons.shapes.SQUARE_ROUNDED
path: mapIcons.shapes.SQUARE
path: mapIcons.shapes.SQUARE_PIN
path: mapIcons.shapes.SHIELD
fillColor, memberi warna pada marker.
scale, mengubah ukuran marker.
map_icon_label, menampilkan icon menggunakan class pada tags span. Untuk mengubah icon, bisa mengganti class pada tags span. Jenis-jenis icon bisa dilihat di dokumentasi Maps Icons.
map_icon_label: '<span class="map-icon map-icon-museum"></span>'

Cara Mengganti Icon Marker di Google Maps API


5. Untuk menampilkan marker dari database cara nya mudah, buat database terlebih dahulu.

CREATE DATABASE wisata;
USE wisata; 
 
CREATE TABLE `pariwisata` (
`id_pariwisata` int(11) NOT NULL AUTO_INCREMENT,
`nama_pariwisata` varchar(255) DEFAULT NULL,
`alamat` varchar(255) DEFAULT NULL,
`lat` varchar(255) DEFAULT NULL,
`long` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id_pariwisata`)
);


Cara Mengganti Icon Marker di Google Maps API

6. Insert data kedalam tabel wisata.
INSERT INTO `pariwisata` VALUES (1, 'Lawang Sewu', 'Jl. Pemuda, Sekayu, Semarang Tengah, Kota Semarang, Jawa Tengah 50132', '-6.9839838', '110.4097825', 'gedung');
INSERT INTO `pariwisata` VALUES (2, 'Masjid Agung Jawa Tengah', 'Jl. Gajah Raya, Sambirejo, Gayamsari, Kota Semarang, Jawa Tengah 50166', '-6.9836792', '110.443832', 'masjid');
INSERT INTO `pariwisata` VALUES (3, 'Kota Lama Semarang', 'Bandarharjo, North Semarang, Semarang City, Central Java 50175', '-6.9682652', '110.4243436', 'gedung');

7. Buat file koneksi.php di dalam directory xampp/htdocs/maps-marker.
<?php
mysql_connect("localhost","root","");
mysql_select_db("wisata");
?>

8. Buat file data.php untuk menampilkan data dari database berupa file JSON. 
<?php
 header('Content-Type: application/json; charset=utf8');
 //panggil koneksi.php
 include("koneksi.php");

 $sql="SELECT * FROM pariwisata";
 $query=mysql_query($sql) or die(mysql_error());

 $array=array();
 while($data=mysql_fetch_assoc($query)) $array[]=$data; 
 
 echo json_encode($array);
?>
Cara Mengganti Icon Marker di Google Maps API


9. Buat file latihan2.php

<!DOCTYPE html>
<html>
  <head>
    <title>maribelajarcoding.com</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>
    <link rel="stylesheet" type="text/css" href="map-icons-master/dist/css/map-icons.css">
    <script type="text/javascript" src="map-icons-master/dist/js/map-icons.js"></script>  
    <style>
       #map-canvas {
        height: 80%;
        width: 80%;
         margin: 0 auto 0 auto;
      }
      .map-icon-label .map-icon {
          font-size: 12px;
          color: #FFFFFF;
          text-align: center;
          white-space: nowrap;
        }
      html, body {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <h2 align="center">Wisata Semarang</h2>
    <div id="map-canvas"></div>
    <div align="center">
      <a href="https://www.maribelajarcoding.com" target="_blank">maribelajarcoding.com</a>
    </div>
     <script>
        var customLabel = {
          masjid: {
            label: '<span class="map-icon map-icon-mosque"></span>'
          },
          gedung: {
            label: '<span class="map-icon map-icon-museum"></span>'
          }
        };

        var customIcon = {
          masjid: {
              path: mapIcons.shapes.MAP_PIN,
              fillColor: '#ba0000',
              fillOpacity: 1,
              strokeColor: '',
              strokeWeight: 0,
              scale: 0.8
          },
          gedung: {
              path: mapIcons.shapes.MAP_PIN,
              fillColor: '#1998F7',
              fillOpacity: 1,
              strokeColor: '',
              strokeWeight: 0,
              scale: 0.8
             
          }
        };

        function initMap() {
        var map = new google.maps.Map(document.getElementById('map-canvas'), {
          center: new google.maps.LatLng(-7.0016372,110.4428114),
          zoom: 12
        });
        var infoWindow = new google.maps.InfoWindow;

          downloadUrl('http://localhost/maps-marker/data.php', function(data) {

            var markers=JSON.parse(data.responseText);

            markers.forEach(function(element) {          
                var id_pariwisata = element.id_pariwisata;
                var nama_pariwisata = element.nama_pariwisata;
                var alamat = element.alamat;
                var point = new google.maps.LatLng(
                    parseFloat(element.lat),
                    parseFloat(element.long));

                var infowincontent = document.createElement('div');
                var strong = document.createElement('strong');
                strong.textContent = nama_pariwisata
                infowincontent.appendChild(strong);
                infowincontent.appendChild(document.createElement('br'));

                var text = document.createElement('text');
                text.textContent = alamat
                infowincontent.appendChild(text);

                var type=element.tipe;

                var icon_label = customLabel[type] || {};

                var icon= customIcon[type] || {};
                var marker = new mapIcons.Marker({
                  map: map,
                  position: point,
                  icon: icon,
                  map_icon_label: icon_label.label 
                });
                marker.addListener('click', function() {
                  infoWindow.setContent(infowincontent);
                  infoWindow.open(map, marker);
                });
            });
            
          });
        }
      function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;

        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
          }
        };

        request.open('GET', url, true);
        request.send(null);
      }

      function doNothing() {}
    </script>

  </body>
</html>

Jalankan file latihan1.php dan latihan2.php menggunakan browser, pastikan services apache dan mysql dalam keadaan start.


Cara Mengganti Icon Marker di Google Maps API

Source code:
maps-marker.rar 


Related search:
Mengganti icon marker di Google Maps API
Mengubah marker di Google Maps API

Related Posts

Load comments