Cara Mengganti Icon Marker Google Maps dengan Gambar Lain

Cara Mengganti Icon Marker Google Maps dengan Gambar Lain - Hallo sahabat Teman Koding, Pada Artikel yang anda baca kali ini dengan judul Cara Mengganti Icon Marker Google Maps dengan Gambar Lain, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel PHP, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Mengganti Icon Marker Google Maps dengan Gambar Lain
link : Cara Mengganti Icon Marker Google Maps dengan Gambar Lain

Baca juga


Cara Mengganti Icon Marker Google Maps dengan Gambar Lain

 kali ini kami dapat studi mengganti icon marker bersama gambar yang udah kami siapkan terlebih dahulu. Penggunaan plugin maps icon memang lebih efektif karena tidak mesti buat persiapan gambar untuk mengganti icon marker, namun pemakaian gambar termasuk lebih mampu di mengatur sesuai kebutuhan. Kita termasuk mampu mendesain sendiri gambar atau icon apa yang dapat di mengfungsikan sebagai marker maps.  


Untuk mengganti icon marker dengan gambar sebenarnya cuma tingkatkan variabel icon. Lihat baris yang diberi highlight. Teman-teman dapat 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 buat persiapan database nya khususnya dahulu. Buat database db_maps, selanjutnya bikin tabel Tempat untuk menyimpan information area dan koordinat lokasi. Buat satu tabel ulang untuk menyimpan information Tipe tempat. Tipe area ini yang dapat pilih icon apa yang dapat 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>temankoding.site</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.temankoding.site" target="_blank">temankoding.site</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



Demikianlah Artikel Cara Mengganti Icon Marker Google Maps dengan Gambar Lain

Sekianlah artikel Cara Mengganti Icon Marker Google Maps dengan Gambar Lain kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Mengganti Icon Marker Google Maps dengan Gambar Lain dengan alamat link http://www.temankoding.site/2021/03/cara-mengganti-icon-marker-google-maps.html

Tidak ada komentar untuk "Cara Mengganti Icon Marker Google Maps dengan Gambar Lain"