Menghubungkan MySQL dan PHP untuk Membuat Peta di Google Maps Terbaru

Sejak dirilis 13 tahun silam , Google Maps kian meningkatkan fungsi dan fitur yang ada sehingga sangat sesuai dengan apa yang dibutuhkan user. Bisa mencari lokasi yang diinginkan, ataupun sekedar melihat kondisi jalan yang macet atau tidak. Namun bagi seorang yang bergelut di IT fungsi diatas adalah fungsi umum. Tak jarang bahkan programmer menggunakan Google Maps dalam projeknya untuk membuat contact person ataupun sekedar memberitahu lokasi yang diinginkan. Meski tampak mudah, bagi para pemula menghubungkan MySQL dan PHP dalam membuat peta cukup sulit, hal inilah yang akan saya jelaskan pada artikel ini walaupun sudah ada tutorial di website resminya namun perubahan yang terjadi cukup cepat sehingga ada beberapa pemula yang tidak dapat mengikuti perubahan cepat tersebut. Baca Juga Using MySQL and PHP with Google Maps

Langkah Langkah Membuat Peta dengan Menghubungkan MySQL, PHP, Google Maps:

1. Membuat Database, Table dan Masukkan data

Hal yang pertama mesti dilakukan adalah membuat database, kalian bisa memberikan nama database Google Maps atau apapun. Setelah itu membuat table untuk menampung data kordinat yang akan dipanggil pada Google Maps nantinya. Untuk simple nya silakan copas query SQL dibawah ini untuk membuat table dan memasukkan data.

Membuat Table

Memasukkan Data

INSERT INTO `markers` (`id`, `name`, `address`, `lat`, `lng`, `type`) VALUES ('1', 'Love.Fish', '580 Darling Street, Rozelle, NSW', '-33.861034', '151.171936', 'restaurant');
INSERT INTO `markers` (`id`, `name`, `address`, `lat`, `lng`, `type`) VALUES ('2', 'Young Henrys', '76 Wilford Street, Newtown, NSW', '-33.898113', '151.174469', 'bar');
INSERT INTO `markers` (`id`, `name`, `address`, `lat`, `lng`, `type`) VALUES ('3', 'Hunter Gatherer', 'Greenwood Plaza, 36 Blue St, North Sydney NSW', '-33.840282', '151.207474', 'bar');
INSERT INTO `markers` (`id`, `name`, `address`, `lat`, `lng`, `type`) VALUES ('4', 'The Potting Shed', '7A, 2 Huntley Street, Alexandria, NSW', '-33.910751', '151.194168', 'bar');
INSERT INTO `markers` (`id`, `name`, `address`, `lat`, `lng`, `type`) VALUES ('5', 'Nomad', '16 Foster Street, Surry Hills, NSW', '-33.879917', '151.210449', 'bar');
INSERT INTO `markers` (`id`, `name`, `address`, `lat`, `lng`, `type`) VALUES ('6', 'Three Blue Ducks', '43 Macpherson Street, Bronte, NSW', '-33.906357', '151.263763', 'restaurant');
INSERT INTO `markers` (`id`, `name`, `address`, `lat`, `lng`, `type`) VALUES ('7', 'Single Origin Roasters', '60-64 Reservoir Street, Surry Hills, NSW', '-33.881123', '151.209656', 'restaurant');
INSERT INTO `markers` (`id`, `name`, `address`, `lat`, `lng`, `type`) VALUES ('8', 'Red Lantern', '60 Riley Street, Darlinghurst, NSW', '-33.874737', '151.215530', 'restaurant');

2. Membuat File Maps.php

Buka text editor kalian baik berupa notepad, notepad++, sublime ataupun text editor lainnya. Lalu copykan coding dibawah ini:
Maps.php

<?php
require("phpsqlajax_dbinfo.php");

function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','<',$htmlStr);
$xmlStr=str_replace('>','>',$xmlStr);
$xmlStr=str_replace('"','"',$xmlStr);
$xmlStr=str_replace("'",''',$xmlStr);
$xmlStr=str_replace("&",'&',$xmlStr);
return $xmlStr;
}

// Opens a connection to a MySQL server
$connection=mysqli_connect ('localhost', $username, $password);
if (!$connection) {
  die('Not connected : ' . mysqli_error());
}

// Set the active MySQL database
$db_selected = mysqli_select_db($database, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysqli_error());
}

// Select all the rows in the markers table
$query = "SELECT * FROM markers WHERE 1";
$result = mysqli_query($query);
if (!$result) {
  die('Invalid query: ' . mysqli_error());
}

header("Content-type: text/xml");

// Start XML file, echo parent node
echo "<?xml version='1.0' ?>";
echo '<markers>';
$ind=0;
// Iterate through the rows, printing XML nodes for each
while ($row = @mysqli_fetch_assoc($result)){
  // Add to XML document node
  echo '<marker ';
  echo 'id="' . $row['id'] . '" ';
  echo 'name="' . parseToXML($row['name']) . '" ';
  echo 'address="' . parseToXML($row['address']) . '" ';
  echo 'lat="' . $row['lat'] . '" ';
  echo 'lng="' . $row['lng'] . '" ';
  echo 'type="' . $row['type'] . '" ';
  echo '/>';
  $ind = $ind + 1;
}

// End XML file
echo '</markers>';

Pada bagian koneksi mysql, jika kalian menggunakan web service xampp biasanya cukup menggunakan username root tanpa password jadi cukup menghapus $username, $password ganti menjadi root. Lalu pada bagian set active database, ganti namadatabase dengan nama database anda sendiri. Sesudah itu sebagai catatan, bila versi PHP anda yang masih lawas biasanya akan error karena perbedaan query. Tapi jangan khawatir cukup hapus huruf i dibagian mysqli sehingga menjadi mysql maka error tersebut akan terselesaikan.

3. Membuat File Index.html

File Index ini merupakan file inti yang digunakan untuk memunculkan query yang ada pada file maps.php tadi.
index.html

<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Using MySQL and PHP with Google Maps</title>
    <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>

<html>
  <body>
    <div id="map">
</div>
<script>
      var customLabel = {
        restaurant: {
          label: 'R'
        },
        bar: {
          label: 'B'
        }
      };

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

// Change this depending on the name of your PHP or XML file
          downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var id = markerElem.getAttribute('id');
              var name = markerElem.getAttribute('name');
              var address = markerElem.getAttribute('address');
              var type = markerElem.getAttribute('type');
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lat')),
                  parseFloat(markerElem.getAttribute('lng')));

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

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 async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Setelah itu save dan buka dibrowser anda. Biasanya akan terjadi error dengan pesan Oops bla bla bla. Jangan khawatir itu artinya code anda sudah benar namun yang salah adalah karena anda belum memiliki Api Key. Silakan mendaftar untuk mendapatkan Api Key secara gratis dengan klik link ini. Jika kalian sudah mendapatkan Api Key tinggal menggantinya dengan cara searching di file index YOUR_API_KEY lalu hapus dan pastekan Api Key yang telah didapat tadi. Satu lagi, bila kalian ingin mengganti nama file php tadi atau nama file php anda tidak sama dengan di tutorial ini masih bisa dihubungkan dengan mengganti nama file yang terdapat pada function downloadUrl. Itu saja tutorial singkat mengenai bagaimana menghubungkan MySQL , PHP dan Google Maps untuk membuat peta lengkap dengan Marker atau tandanya. Bila ada yang error bisa berkomentar.