Mari Belajar Coding: maps - Tutorial Pemrograman Web dan Mobile
Tampilkan postingan dengan label maps. Tampilkan semua postingan
Tampilkan postingan dengan label maps. Tampilkan semua postingan

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

23 Agustus 2019

Mengubah Alamat Menjadi Koordinat (Lat, Lng) dengan Geocoding Google Maps API

Mengubah Alamat Menjadi Koordinat dengan Geocoding Google Maps API

Selamat datang kembali di blog Mari belajar coding. Jika pada tutorial sebelumnya kita belajar membuat Direction Map dengan Google Maps API, pada tutorial kali ini kita akan belajar mengubah alamat, nama jalan atau nama tempat menjadi titik koordinat latitude dan longitude atau sebaliknya, mengubah titik koordinat latitude longitude menjadi nama alamat. Google Maps API menyediakan layanan Geocoding API untuk mengonversi alamat menjadi titik koordinat. 

Mengubah Alamat Menjadi Koordinat dengan Geocoding Google Maps API
Mengubah Alamat Menjadi Koordinat dengan Geocoding Google Maps API

Pertama-tama kita buat api google maps nya terlebih dahulu. Silahkan kunjungi google cloud console, buat projek baru kemudian aktifkan service Maps JavaScript API dan Geocoding API
Mengubah Alamat Menjadi Koordinat dengan Geocoding Google Maps API

Buat kunci api untuk mengakses fitur Google maps api.
Mengubah Alamat Menjadi Koordinat dengan Geocoding Google Maps API

Setelah kunci api dibuat, kita coba apakah request data json dari google maps berfungsi atau tidak. Silahkan salin url dibawah ini kemudian ganti your_api_key dengan api teman-teman yang didapat dari google cloud console. Jalankan melalui browser.
Get data berdasarkan nama alamat, nama jalan atau nama tempat.
https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=YOUR_API_KEY

Get data berdasarkan lat, lng.
https://maps.googleapis.com/maps/api/geocode/json?latlng=40.714224,-73.961452&key=YOUR_API_KEY


Tampilan data json seperti gambar dibawah ini.
Mengubah Alamat Menjadi Koordinat dengan Geocoding Google Maps API

Panggil google maps api dengan menambahkan kode dibawah ini di dalam tag head. Ganti your_api_key dengan api teman-teman.
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" type="text/javascript"></script>

Buat form input nama tempat.
<!-- Form pencarian -->
<form class="form-horizontal" id="formCariTempat" method="POST" autocomplete="off">
  <div class="form-group">
    <label class="control-label col-sm-3" >Cari Tempat:</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="tempat" name="tempat">
    </div>
  </div>          
  <div class="form-group"> 
    <div class="col-sm-offset-3 col-sm-9">
      <button type="submit" class="btn btn-default">Cari</button>
    </div>
  </div>
</form>
<!-- tempat meletakan keterangan alamat dan lat, lng -->
<div id="panelContent"></div>

Buat fungsi dengan javascript untuk menangani proses submit form.
<script type="text/javascript">
  $(document).ready(function() { 
    $("#formCariTempat").submit(function(e) {
        e.preventDefault();
        //ambil value dari form
        var namatempat=$("#tempat").val();

        if (namatempat!="") {
           //replace semua spasi menjadi tanda plus (+)
            namatempat=namatempat.replace(/ /g, "+");
           //api google maps
            var url="https://maps.googleapis.com/maps/api/geocode/json?address="+namatempat+"&key=YOUR_API_KEY";

            document.getElementById("panelContent").innerHTML="";

            //ambil data dari json
            $.getJSON(url, function(result){ 

                //menampilkan peta
                var map;          
                var infowindow = new google.maps.InfoWindow({ });   
                map = new google.maps.Map(document.getElementById('map'), {                
                  zoom: 15,  
                  center: {lat: result.results[0].geometry.location.lat, lng: result.results[0].geometry.location.lng},              
                });

                //looping data json
                $.each(result.results, function(i){  
                //menampilkan data keterangan alamat, lat, long                  
                document.getElementById("panelContent").innerHTML +="<b>Alamat :</b>"+ result.results[i].formatted_address + "<br><b>Lat :</b>"+ result.results[i].geometry.location.lat + "<br><b>Long :</b>"+ result.results[i].geometry.location.lng + "<br><br>";

                //set marker
                var marker = new google.maps.Marker({
                    position: {lat: result.results[i].geometry.location.lat, lng: result.results[i].geometry.location.lng},
                    title:result.results[i].formatted_address
                });

                //menampilkan popup keterangan di saat marker di click
                google.maps.event.addListener(marker, 'click', function () {
                        infowindow.setContent(result.results[i].formatted_address);
                        infowindow.open(map, marker);
                });
                 // To add the marker to the map, call setMap();
                marker.setMap(map);

               });

             });   


        }else{
          alert("Nama tempat tidak boleh kosong!");
        } 
       
    });
});

</script>

Kode lengkap seperti dibawah ini. Ganti your_api_key pada baris yang diberi highlight kemudian simpan file.
<!DOCTYPE html>
<html>
<head>
  <title>maribelajarcoding.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" type="text/javascript"></script>
</head>

<body >
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">Maribelajarcoding.com</a>
      </div>      
    </div>
  </nav>
  <div class="container">
    <div class="row">
      <div class="col-md-5">
      <!-- Form pencarian -->
      <form class="form-horizontal" id="formCariTempat" method="POST" autocomplete="off">
        <div class="form-group">
          <label class="control-label col-sm-3" >Cari Tempat:</label>
          <div class="col-sm-9">
            <input type="text" class="form-control" id="tempat" name="tempat">
          </div>
        </div>          
        <div class="form-group"> 
          <div class="col-sm-offset-3 col-sm-9">
            <button type="submit" class="btn btn-default">Cari</button>
          </div>
        </div>
      </form>
      <!-- tempat meletakan keterangan alamat dan lat, lng -->
      <div id="panelContent"></div>

      </div>
      <div class="col-md-7">
        <div id="map" style="height: 500px;"></div>
      </div>
    </div>
  </div>
     
 <script type="text/javascript">
  $(document).ready(function() { 
    $("#formCariTempat").submit(function(e) {
        e.preventDefault();
        //ambil value dari form
        var namatempat=$("#tempat").val();

        if (namatempat!="") {
           //replace semua spasi menjadi tanda plus (+)
            namatempat=namatempat.replace(/ /g, "+");
           //api google maps
            var url="https://maps.googleapis.com/maps/api/geocode/json?address="+namatempat+"&key=YOUR_API_KEY";

            document.getElementById("panelContent").innerHTML="";

            //ambil data dari json
            $.getJSON(url, function(result){ 

                //menampilkan peta
                var map;          
                var infowindow = new google.maps.InfoWindow({ });   
                map = new google.maps.Map(document.getElementById('map'), {                
                  zoom: 15,  
                  center: {lat: result.results[0].geometry.location.lat, lng: result.results[0].geometry.location.lng},              
                });

                //looping data json
                $.each(result.results, function(i){  
                //menampilkan data keterangan alamat, lat, long                  
                document.getElementById("panelContent").innerHTML +="<b>Alamat :</b>"+ result.results[i].formatted_address + "<br><b>Lat :</b>"+ result.results[i].geometry.location.lat + "<br><b>Long :</b>"+ result.results[i].geometry.location.lng + "<br><br>";

                //set marker
                var marker = new google.maps.Marker({
                    position: {lat: result.results[i].geometry.location.lat, lng: result.results[i].geometry.location.lng},
                    title:result.results[i].formatted_address
                });

                //menampilkan popup keterangan di saat marker di click
                google.maps.event.addListener(marker, 'click', function () {
                        infowindow.setContent(result.results[i].formatted_address);
                        infowindow.open(map, marker);
                });
                 // To add the marker to the map, call setMap();
                marker.setMap(map);

               });

             });   

        }else{
          alert("Nama tempat tidak boleh kosong!");
        } 
       
    });
});
   
</script>
</body>
</html>

Tutorial mengubah alamat menjadi koordinat dengan Geocoding Google Maps API telah selesai. Sekian, semoga bermanfaat.



Related Search:
Mengubah Latitude Longitude Menjadi Alamat
Mengubah Alamat Menjadi Koordinat
Tutorial Geocoding Google Maps

22 Agustus 2019

Membuat Direction Map dengan Google Maps API

Membuat Direction Map dengan Google Maps API

Selamat datang di blog Mari belajar coding. Pada tutorial kali ini kita akan belajar menampilkan rute Google maps menggunakan Direction API. Google maps menyediakan fitur Direction API untuk membuat sebuah rute atau petunjuk arah dari satu titik tempat koordinat ke titik tempat lainnya.

Membuat Direction Map dengan Google Maps API
Membuat Direction Map dengan Google Maps API

Pertama-tama kita buat api google maps nya terlebih dahulu. Silahkan kunjungi google cloud console, buat projek baru kemudian aktifkan service Maps JavaScript API dan Directions API
Membuat Direction Map dengan Google Maps API

Buat kunci api untuk mengakses fitur Google maps api.
Membuat Direction Map dengan Google Maps API

Setelah kuci api selesai di buat, kita akan memulai membuat kode program. Panggil api google maps dengan menambahkan kode berikut ini di dalam tag head. Ganti API_KEY_KAMU dengan api yang di dapat dari google cloud console.
<script src="//maps.googleapis.com/maps/api/js?key=API_KEY_KAMU"
    type="text/javascript"></script>

Buat form untuk input tempat asal dan tujuan.
<form class="form-horizontal" id="formRute" autocomplete="off">
  <div class="form-group">
    <label class="control-label col-sm-2" >Asal:</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="asal" name="asal">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" >Tujuan:</label>
    <div class="col-sm-10"> 
      <input type="text" class="form-control" id="tujuan" name="tujuan">
    </div>
  </div>         
  <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Rute</button>
    </div>
  </div>
</form>

<!-- tempat meletakan panel keterangan -->
<div id="panel"></div>

Buat tempat untuk menampilkan peta.
<div id="map" style="height: 500px;"></div>

Buat fungsi dengan javascript untuk menangani proses submit data dari form. 
<script type="text/javascript">
   $(document).ready(function() { 

    $("#formRute").submit(function(e) {

        e.preventDefault();
        //ambil value dari form input asal
        var asal=$("#asal").val();
        //ambil value dari form input tujuan
        var tujuan=$("#tujuan").val();
         //cek apakah asal dan tujuan kosong
         if (asal=="") {
          alert("Tempat asal tidak boleh kosong!");
         }else if (tujuan=="") {
          alert("Tempat tujuan tidak boleh kosong!");
         }else{

            var directionsService = new google.maps.DirectionsService();
            var directionsDisplay = new google.maps.DirectionsRenderer();
            var mapOptions = {
              zoom:12,
            }

            var map = new google.maps.Map(document.getElementById('map'), mapOptions);              
            directionsDisplay.setMap(map);
            directionsDisplay.setPanel(document.getElementById('panel'));

            var start = asal;
            var end = tujuan;
            var request = {
              origin: start,
              destination: end,
              travelMode: 'DRIVING'
            };
            directionsService.route(request, function(result, status) {
              if (status == 'OK') {
                directionsDisplay.setDirections(result);
              }
            });

         }

      });

   });

</script>

Kode lengkap membuat direction map dengan Google Maps API seperti dibawah ini. Ganti API_KEY_KAMU dengan api key yang didapat dari google cloud console.
<!DOCTYPE html>
<html>
<head>
  <title>maribelajarcoding.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <script src="//maps.googleapis.com/maps/api/js?key=API_KEY_KAMU"
    type="text/javascript"></script>
</head>

<body>
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">Maribelajarcoding.com</a>
      </div>      
    </div>
  </nav>
  <div class="container">
    <div class="row">
      <div class="col-md-4">
       
        <form class="form-horizontal" id="formRute" autocomplete="off">
          <div class="form-group">
            <label class="control-label col-sm-2" >Asal:</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="asal" name="asal">
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-sm-2" >Tujuan:</label>
            <div class="col-sm-10"> 
              <input type="text" class="form-control" id="tujuan" name="tujuan">
            </div>
          </div>         
          <div class="form-group"> 
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-default">Rute</button>
            </div>
          </div>
        </form>
        
        <!-- tempat meletakan panel keterangan -->
        <div id="panel"></div>

      </div>

      <div class="col-md-8">
        <div id="map" style="height: 500px;"></div>
      </div>
    </div>
  </div>
     
 <script type="text/javascript">
   $(document).ready(function() { 

    $("#formRute").submit(function(e) {

        e.preventDefault();
        //ambil value dari form input asal
        var asal=$("#asal").val();
        //ambil value dari form input tujuan
        var tujuan=$("#tujuan").val();
         //cek apakah asal dan tujuan kosong
         if (asal=="") {
          alert("Tempat asal tidak boleh kosong!");
         }else if (tujuan=="") {
          alert("Tempat tujuan tidak boleh kosong!");
         }else{

            var directionsService = new google.maps.DirectionsService();
            var directionsDisplay = new google.maps.DirectionsRenderer();
            var mapOptions = {
              zoom:12,
            }

            var map = new google.maps.Map(document.getElementById('map'), mapOptions);              
            directionsDisplay.setMap(map);
            directionsDisplay.setPanel(document.getElementById('panel'));

            var start = asal;
            var end = tujuan;
            var request = {
              origin: start,
              destination: end,
              travelMode: 'DRIVING'
            };
            directionsService.route(request, function(result, status) {
              if (status == 'OK') {
                directionsDisplay.setDirections(result);
              }
            });

         }

      });

   });

</script>
</body>
</html>

Tutorial membuat direction map dengan Google Maps API telah selesai. Sekian, semoga bermanfaat.



Related Search:
Membuat Direction Map dengan Google Maps API
Membuat Direction Map dengan PHP
Membuat Rute dengan Google Maps

01 Mei 2019

Alternatif Selain Menggunakan Google Maps API


Alternatif Selain Menggunakan Google Maps API

Selamat datang di blog Mari belajar coding. Saat kita ingin membuat sebuah sistem informasi yang memerlukan maps biasanya kita menggunakan layanan milik google maps api sebagai library javascript untuk menampilkan peta lokasi. Mulai tanggal 16 Juli 2018 Google maps tidak lagi gratis, kamu harus mengaitkan kartu kredit/debit yang dapat menerima tagihan jika situs kamu memiliki permintaan yang melebihi kredit $200 yang google berikan setiap bulan secara gratis. Untuk informasi lebih lanjut, silahkan baca di sini cloud.google.com/maps-platform/pricing/ . 

Namun apa saja selain Google maps api yang bisa kita pergunakan sebagai peta digital gratisan?

Leaflet 
Alternatif Selain Menggunakan Google Maps API

Leaflet adalah library JavaScript open-source untuk peta interaktif. Dengan berat hanya sekitar 38 KB per JS, Leaflet memiliki semua fitur pemetaan yang paling dibutuhkan oleh pengembang. Leaflet bekerja secara efisien di semua platform desktop maupun mobile seluler, dapat diperluas dengan banyak plugin, memiliki API yang mudah digunakan, dan memiliki dokumentasi yang lengkap serta kode sumber yang mudah dibaca.

Memulai bekerja dengan leafletjs

1. Download library leafletjs .
2. Buat folder bernama maps di dalam directory xampp/htdocs.
3. Ektraks library leafletjs kemudian pindahkan ke directory xampp/htdocs/maps
4. Buat halaman html di dalam directory xampp/htdocs/maps . 
5. Include css dan js leafletjs di dalam tags <head>.
<link rel="stylesheet" href="leaflet/leaflet.css" />
<script src="leaflet/leaflet.js"></script>
6. Mengatur css untuk lebar dan tinggi maps.
<style type="text/css">
 #mapid {
  margin: 0 auto 0 auto;
  height: 90%;
  width: 80%;
 }
 html, body {
        height: 100%;
      }
</style>
7. Buat elemen div dengan id tertentu di mana kamu ingin menampilkan maps.
<div id="mapid" ></div>
8. Setting Map Options, leaflet menyediakan beberapa opsi seperti Control options, Interaction Options, Map State Options, Animation Options dan sebagainya.
var mapOptions = {
   center: [-6.9905755,110.4227698],
   zoom: 13
}
9. Buat Map objek menggunakan class map leaflet api. 
var map = new L.map('mapid', mapOptions);
10. Buat Map layer.
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
map.addLayer(layer);
Ada beberapa layer yang dapat kamu gunakan.

//Mapnik
http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png

//Black And White
http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png

//DE
http://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/ {y}.png

//France 
http://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png

//Hot 
http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png

//BZH 
http://tile.openstreetmap.bzh/br/{z}/{x}/{y}.png

11. Buat Marker.

var marker = L.marker([-6.990325715679011,110.42296171188356]).addTo(map);
marker.bindPopup('<b>Lapangan "Pancasila" Simpang Lima</b><br>Jl. Simpang Lima, Pleburan, Semarang Sel., Kota Semarang, Jawa Tengah 50241.');

12. Contoh:
<!DOCTYPE html>
<html>
<head>
 <title>maribelajarcoding.com</title>
 <link rel="stylesheet" href="leaflet/leaflet.css" />
 <script src="leaflet/leaflet.js"></script>
<style type="text/css">
 #mapid {
  margin: 0 auto 0 auto;
  height: 90%;
  width: 80%;
 }
 html, body {
        height: 100%;
      }
</style>

</head>
<body>
<div id="mapid" ></div>
<div align="center">
 <h2><a href="https://maribelajarcoding.com" target="_blank">maribelajarcoding.com</a></h2>
</div>
<script type="text/javascript">
  var mapOptions = {
     center: [-6.9905755,110.4227698],
     zoom: 13
  }

  var map = new L.map('mapid', mapOptions);

  var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
  map.addLayer(layer);

  var marker = L.marker([-6.990325715679011,110.42296171188356]).addTo(map);
  marker.bindPopup('<b>Lapangan "Pancasila" Simpang Lima</b><br>Jl. Simpang Lima, Pleburan, Semarang Sel., Kota Semarang, Jawa Tengah 50241.');

 </script>
</body>
</html>
13. Jalankan file menggunakan browser. Tampilan halaman akan seperti ini.

Alternatif Selain Menggunakan Google Maps API
14. Untuk mengetahui latitude dan longitude saat peta di  klik. 
map.on('click', function (e) {
    alert("Lat, Lon : " + e.latlng.lat + ", " + e.latlng.lng);
});


Source code:
maps-leaflet.rar 


Related search:
Alternatif Selain Menggunakan Google Maps API

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
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

29 April 2019

Menampilkan Peta Google Maps Api Menggunakan PHP dan Database Mysql


Menampilkan Peta Google Maps Api Menggunakan PHP dan Database Mysql

Selamat datang kembali di blog mari belajar coding. Pada tutorial kali ini kita akan belajar menampilkan peta google maps api menggunakan PHP dan database Mysql. Bagi teman-teman yang yang sedang belajar untuk membuat sebuah sistem informasi berbasis web dengan menampilkan peta di dalam sistemnya tutorial ini mungkin dapat membantu. Apa itu Google Maps? Google maps merupakan layanan berbasis web yang menyediakan informasi terperinci tentang wilayah geografis dan situs di seluruh dunia. Selain peta jalan konvensional, Google Maps menawarkan pemandangan udara dan satelit di banyak tempat.

Menampilkan Peta Google Maps Api Menggunakan PHP dan Database Mysql 
Menampilkan Peta Google Maps Api Menggunakan PHP dan Database Mysql

1. Buka dashboard google developer console kamu .  console.developers.google.com .

2. Buat sebuah project baru untuk mendapatkan api google maps. 

Menampilkan Peta Google Maps Api Menggunakan PHP dan Database Mysql

3. Aktifkan API dan layanan Maps JavaScript API.
Menampilkan Peta Google Maps Api Menggunakan PHP dan Database Mysql

4. Setting Kredential untuk generate API.
Menampilkan Peta Google Maps Api Menggunakan PHP dan Database Mysql

5. Setelah selesai membuat API untuk Google maps, selanjutnya kita akan membuat sebuah database untuk menyimpan data yang nantinya akan di tampilkan di peta google maps. Buat database bernama wisata dengan satu tabel pariwisata
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`)
);

Menampilkan Peta Google Maps Api Menggunakan PHP dan Database Mysql

6. Insert data kedalam tabel pariwisata.
INSERT INTO `pariwisata` VALUES ('1', 'Lawang Sewu', 'Jl. Pemuda, Sekayu, Semarang Tengah, Kota Semarang, Jawa Tengah 50132', '-6.9839838', '110.4097825');
INSERT INTO `pariwisata` VALUES ('2', 'Kuil Sam Poo Kong', 'Jl. Simongan No.129, Bongsari, Semarang Bar., Kota Semarang, Jawa Tengah 50148', '-6.9959811', '110.3961827');
INSERT INTO `pariwisata` VALUES ('3', 'Masjid Agung Jawa Tengah', 'Jl. Gajah Raya, Sambirejo, Gayamsari, Kota Semarang, Jawa Tengah 50166', '-6.9836792', '110.443832');
INSERT INTO `pariwisata` VALUES ('4', 'Brown Canyon Semarang', 'Rowosari, Tembalang, Semarang City, Central Java 50279', '-7.0565487', '110.4839172');
INSERT INTO `pariwisata` VALUES ('5', 'Gereja Dome Blenduk', 'Jl. Letjen Suprapto No.32, Tj. Mas, Semarang Utara, Kota Semarang, Jawa Tengah 50174', '-6.9681578', '110.4252718');
INSERT INTO `pariwisata` VALUES ('6', 'Kota Lama Semarang', 'Bandarharjo, North Semarang, Semarang City, Central Java 50175', '-6.9682652', '110.4243436');
INSERT INTO `pariwisata` VALUES ('7', 'Tugu Muda', 'Jl. Yudistira No.5, Pendrikan Kidul, Semarang Tengah, Kota Semarang, Jawa Tengah 50131', '-6.9843228', '110.4071145');
INSERT INTO `pariwisata` VALUES ('8', 'Kampung Pelangi', 'Jl. DR. Sutomo No.89, Randusari, Semarang Sel., Kota Semarang, Jawa Tengah 50244', '-6.9888768', '110.4061895');
INSERT INTO `pariwisata` VALUES ('9', 'Taman Indonesia Kaya', 'Jl. Menteri Supeno, Mugassari, Semarang Sel., Kota Semarang, Jawa Tengah 50249', '-6.9924063', '110.4178206');
INSERT INTO `pariwisata` VALUES ('10', 'Grand Maerakaca Kota Semarang', 'Tawangsari, West Semarang, Semarang City, Central Java 50144', '-6.9823905', '110.3949371');

7. Buat folder bernama maps di dalam directory xampp/htdocs

8. Buat file bernama koneksi.php di dalam di directory xampp/htdocs/maps. untuk menghubungkan dengan database.
<?php
mysql_connect("localhost","root","");
mysql_select_db("wisata");
?>

9. Ada beberapa cara untuk mengakses data dari database yang akan ditampilkan kedalam peta google maps, kita bisa menggunakan format XML, JSON atau langsung memanggil data menggunakan PHP didalam script Javascript.
Contoh jika data berupa XML. 

10. Buat satu file bernama data-xml.php di dalam directory xampp/htdoc/maps.
<?php
header('Content-type: text/xml');
header('Pragma: public');
header('Cache-control: private');

include("koneksi.php");

echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
echo "<markers>";
$sql="select * from pariwisata";
$query=mysql_query($sql) or die(mysql_error());
while ($data=mysql_fetch_array($query)) {
 echo "<marker id_pariwisata='".$data['id_pariwisata']."' nama_pariwisata='".$data['nama_pariwisata']."'  alamat='".$data['alamat']."' lat='".$data['lat']."' long='".$data['long']."'/>";
}
echo "</markers>";

Menampilkan Peta Google Maps Api Menggunakan PHP dan Database Mysql

11. Buat satu file bernama latihan1.php untuk menampilkan data XML kedalam peta google maps.
<!DOCTYPE html>
<html>
  <head>
    <title>maribelajarcoding.com</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>      
      #map {
        height: 80%;
        width: 80%;
         margin: 0 auto 0 auto;
      }
      html, body {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <h2 align="center">Wisata Semarang</h2>
    <div id="map"></div>
    <div align="center">
      <a href="https://www.maribelajarcoding.com" target="_blank">maribelajarcoding.com</a>
    </div>
     <script>
        function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-7.0016372,110.4428114),
          zoom: 12
        });
        var infoWindow = new google.maps.InfoWindow;

          downloadUrl('http://localhost/blog/maps/data-xml.php', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');

            Array.prototype.forEach.call(markers, function(markerElem) {
              var id_pariwisata = markerElem.getAttribute('id_pariwisata');
              var nama_pariwisata = markerElem.getAttribute('nama_pariwisata');
              var alamat = markerElem.getAttribute('alamat');
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lat')),
                  parseFloat(markerElem.getAttribute('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 marker = new google.maps.Marker({
                map: map,
                position: point
              });
              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>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>
  </body>
</html>

Keterangan:
Ganti YOUR_API_KEY dengan api kamu pada baris terakhir.
Karena pada contoh kita membuat sebuah sistem informasi pariwisata di Kota Semarang, kamu bisa mengganti center maps dengan mengubah lat, long pada variabel center. Lihat baris yang diberi highlight.
    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng(-7.0016372,110.4428114),
        zoom: 12
     });


Kode dibawah ini merupakan fungsi untuk memanggil data-xml.php menggunakan vanila javascript.
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);
      }
markerElem.getAttribute merupakan atribute data xml. 
Kode dibawah ini berguna untuk menampilkan marker.
var marker = new google.maps.Marker({
   map: map,
   position: point
});

Kode dibawah ini berguna untuk menampilkan  konten data jika marker di klik.
marker.addListener('click', function() {
  infoWindow.setContent(infowincontent);
  infoWindow.open(map, marker);
});

Kamu juga bisa menampilkan gambar pada konten data dengan menambahkan document.createElement("IMG");

Contoh jika data berupa JSON.
12. Buat file data-json.php di directory xampp/htdocs/maps .
<?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);
?>

13. Buat file latihan2.php di directory xampp/htdocs/maps.

<!DOCTYPE html>
<html>
  <head>
    <title>maribelajarcoding.com</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
       #map {
        height: 80%;
        width: 80%;
         margin: 0 auto 0 auto;
      }
      html, body {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <h2 align="center">Wisata Semarang</h2>
    <div id="map"></div>
    <div align="center">
      <a href="https://www.maribelajarcoding.com" target="_blank">maribelajarcoding.com</a>
    </div>
     <script>

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

          downloadUrl('http://localhost/blog/maps/data-json.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 marker = new google.maps.Marker({
                  map: map,
                  position: point
                });
                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>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>
  </body>
</html>

Jalankan file latihan1.php dan latihan2.php menggunakan browser, pastikan services apache dan mysql dalam keadaan start.
Menampilkan Peta Google Maps Api Menggunakan PHP dan Database Mysql

Baca juga: Mengganti Icon Marker Google Maps API dengan Gambar

Source code:
 maps.rar


Related search:
Menampilkan Peta Google Maps Api dengan PHP dan Mysql
Menampilkan Peta Google Maps Api di website