Tutorial Google Map Api Menggunakan Php Mysql Dengan Google Maps

Kali ini saya tuliskan minus bagamana mewujudkan kar google yang terkoneksi dengan database.  Tutorial ini saya tulis untuk kamu yang sudah familiar dengan bahasa pemprograman PHP/My SQL , dan khususnya yang mamiliki keinginan cak bagi sparing bagaimana menggunakan Google Maps dengan sebuah database MySQL. Setelah tanggulang tutorial ini, dia akan mempunyai sebuah Google Map nan berbasiskan database berpokok lokasi-lokasi markernya dan tentunya dapat kamu kembangkan lebih jauh lagi sebagaimana menambahkan halaman user atau admin melengkapi dengan username dan password membuat sebuah situs komunitas sederhana yang dapat mengemukakan dimana saja rumah setiap user/penggunanya (nan ditampilkan dalam bentuk peta) itu semua bukan hal nan sulit tentunya, yang terdepan logika dan ide kalian 😀 , tapi dalam tutorial ini saya akan membuat yang minimum bawah lalu. Peta yang akan saya buat berikut adalah peta kota Yogyakarta dan akan saya bedakan dalam dua tipe marker yakni marker bagi lokasi wisata dan museum. setiap macam marker akan saya bedakan iconnya. Dalam Peta Sebuah jendela info dengan nama dan bahan dari lokasi akan ditampilkan diatas marker ketika marker tsb di klik. Dan nanti kesannya akan seperti gambar berikut..

Berikut adalah 4 tahap dalam latihan ini :

1. Membuat table database

2. Mengisi data/record ke dalam database

3. Menmpilkan data XML dengan PHP

4. Takhlik Peta


1. Membuat sebuah table database

Database, mutakadim tahukan apa itu database, database berisi data/record dari suatu web, semua web dinamis pasti memilki database, facebook, yahoo, twitter, dll mempunyai database, bisa kamu bayangkan facebook memiliki database yang weduk jutaan bahkan milyaran data dari setiap penggunanya mulai sejak seluruh manjapada bgitu pun dengan twitter google+ dll. Saya anggap disini anda sudah mengarifi (tentunya) bagaimana cara membuat sebuah database. Oke buat database dengan nama maps, kemudian buat diagram dengan merek marker buat 6 buah field kerumahtanggaan diagram tersebut nan terdiri dari id, etiket, alamat, lat, lng, varietas , script SQL nya seperti berikut (adv amat kopas aja script berikut tabel sekaligus jadi)..

CREATE TABLE `markers` (
`id` INT Titinada NULL AUTO_INCREMENT PRIMARY KEY ,
`nama` VARCHAR( 60 ) Titinada NULL ,
`incaran` VARCHAR( 80 ) Not NULL ,
`lat` FLOAT( 10, 6 ) Titinada NULL ,
`lng` FLOAT( 10, 6 ) Not NULL ,
`keberagaman` VARCHAR( 30 ) NOT NULL
) ENGINE = MYISAM ;











Struktur databasenya akan nampak seperti susuk berikut…






Saya jelaskan fiel-field diatas :

Id        >>  berisi numeric bagi identitas unik dari setiap lokasi

Bahan >> berilmu korban lokasi

Lat       >> latitude lokasi

Lng      >> longitude lokasi

Tipe     >> variasi lokasi (pelancongan / museum)


2. Mengisi data/record ke internal database

Kemudia isi table marker dengan data (scriptnya)  sama dengan berikut  :


INSERT INTO `markers` (`id`, `nama`, `bulan-bulanan`, `lat`, `lng`, `tipe`) VALUES

(1, ‘Museum Kubu Vredeburg’, ‘Jl. Jend. A. Yani No.6 , Yogyakarta’, -7.800330, 110.365967, ‘museum’),

(2, ‘Museum Ilmu hayat UGM’, ‘Jl. Raja Agung No. 22, Yogyakarta.’, -7.801969, 110.374374, ‘museum’),

(3, ‘Museum Affandi’, ‘Jl. Laksda Adisutjipto 167 Yogyakarta’, -7.783037, 110.396164, ‘museum’),

(4, ‘Museum Wayang Kekayon’, ‘Jl. Raya Yogya-Wonosari Km. 7, Kec. Banguntapan, Bantul’, -7.814852, 110.413033, ‘museum’),

(5, ‘Gembira Loka’, ‘Jl. Kebun Raya no. 2 Yogyakarta.’, -7.803342, -110.397629, ‘wisata’),

(6, ‘Tugu Yogyakarta’, ‘Perempatan Jl. Tuanku Perdana’, -7.782958, 110.367043, ‘tamasya’),

(7, ‘Monumen Jogja Lagi’, ‘Jl. Kurung Utara, Jongkang, Sariharjo, Ngaglik, Sleman, YK’, -7.749448, 110.369568, ‘wisata’),

(8, ‘Kraton Yogyakarta’, ‘Tanah lapang paksina, yogyakarta’, -7.805708, 110.364113, ‘wisata’),

(9, ‘Malioboro’, ‘Jl. Malioboro, Yogyakarta’, -7.793238, 110.365723, ‘wisata’);

Database beserta table dan data-datanya telah dibuat 😀 ..


3. Membuat balut XML dengan PHP

Pertama kita bikin dahulu file php agar web kita besok boleh terhubung dengan database. Script phpnya sebagai halnya berikut :

$server = “localhost”;

$username = “root”;

$password = “”;

$database = “maps”;

// Korespondensi dan memintal database di server

mysql_connect($server,$username,$password) or die(“Perikatan gagal”);

mysql_select_db($database) or die(“Database lain bisa dibuka”);?>

simpan script diatas dengan nama

gayutan.php


















Menggunakan Echo PHP untuk output XML

Dan berikut adalah script untuk menampilkan berkas xml dengan echo php :






<?php

require(“koneksi.php”);

function parseToXML($htmlStr)


{


$xmlStr=str_replace(‘<‘,’&lt;’,$htmlStr);


$xmlStr=str_replace(‘>’,’&gt;’,$xmlStr);


$xmlStr=str_replace(‘”‘,’&quot;’,$xmlStr);


$xmlStr=str_replace(“‘”,’&#39;’,$xmlStr);


$xmlStr=str_replace(“&”,’&amp;’,$xmlStr);


return $xmlStr;


}

// Opens a connection to a MySQL peladen

$connection=mysql_connect (localhost, $username, $password);

if (!$connection) {

  die(‘Not connected : ‘ . mysql_error());

}

// Set the active MySQL database

$db_selected = mysql_select_db($database, $connection);

if (!$db_selected) {

  die (‘Can\’t use db : ‘ . mysql_error());

}

// Select all the rows in the markers table

$query = “SELECT * FROM markers WHERE 1”;

$result = mysql_query($query);

if (!$result) {

  die(‘Invalid query: ‘ . mysql_error());

}

header(“Content-type: text/xml”);

// Start XML file, echo parent node

echo ‘<markers>’;

// Iterate through the rows, printing XML nodes for each

while ($row = @mysql_fetch_assoc($result)){

  // ADD TO XML DOCUMENT NODE

  echo ‘<marker ‘;

  echo ‘etiket=”‘ . parseToXML($row[‘cap’]) . ‘” ‘;

  echo ‘incaran=”‘ . parseToXML($row[‘alamat’]) . ‘” ‘;

  echo ‘lat=”‘ . $row[‘lat’] . ‘” ‘;

  echo ‘lng=”‘ . $row[‘lng’] . ‘” ‘;

  echo ‘variasi=”‘ . $row[‘tipe’] . ‘” ‘;

  echo ‘/>’;

}

// End XML file

echo ‘</markers>’;

?>




















Simpan script diatas internal rang file php dengan nama

phpsqlajax_genxml.php

OK sekarang kita cek apakah berkas diatas sudah bepergian semestinya sonder terserah error sedikitpun.. langsung aja bentang file phpsqlajax_genxml.php dengan browsermu (localhost jangan pangling).

Kalo di browser muncul data-datanya seperti mana gambar berikut berarti data dalam bentuk XML sukses dibuat..

Gambarnya sbb :

4. Membuat Denah

Ini adalah tahap bungsu setelah tahap-tahap sebelumnya semua sukses dijalankan. Langsung saja.. simak baik-baik, pelajari dan prakteka :p ..

Untuk membuat petanya Script lengkapnya seperti berikut :

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

  <head>

    <meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>

    <title>Blognetizen : Google Maps PHP/MySQL Les </title>

<script src=”http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAA8G9ZUehlmgHFYSk0eHkvMxSMGSzrQzuxP9i0yI8OwKXwu_vyNhQuc40vTW0co5ModYSrK6lCkwof0Q” type=”text/javascript”></script>

    <script type=”text/javascript”>

    //<![CDATA[

    var iconBlue = new GIcon();


    iconBlue.image = ‘http://labs.google.com/ridefinder/images/mm_20_blue.png’;

    iconBlue.shadow = ‘http://labs.google.com/ridefinder/images/mm_20_shadow.png’;

    iconBlue.iconSize = new GSize(12, 20);

    iconBlue.shadowSize = new GSize(22, 20);

    iconBlue.iconAnchor = new GPoint(6, 20);

    iconBlue.infoWindowAnchor = new GPoint(5, 1);

    var iconRed = new GIcon();


    iconRed.image = ‘http://labs.google.com/ridefinder/images/mm_20_red.png’;

    iconRed.shadow = ‘http://labs.google.com/ridefinder/images/mm_20_shadow.png’;

    iconRed.iconSize = new GSize(12, 20);

    iconRed.shadowSize = new GSize(22, 20);

    iconRed.iconAnchor = new GPoint(6, 20);

    iconRed.infoWindowAnchor = new GPoint(5, 1);

    var customIcons = [];

    customIcons[“wisata”] = iconBlue;

    customIcons[“museum”] = iconRed;

    function load() {

      if (GBrowserIsCompatible()) {

        var map = new GMap2(document.getElementById(“map”));

        map.addControl(new GSmallMapControl());

        map.addControl(new GMapTypeControl());

        map.setCenter(new GLatLng(-7.805708, 110.364113), 13);

        GDownloadUrl(“phpsqlajax_genxml.php”, function(data) {

          var xml = GXml.parse(data);

          var markers = xml.documentElement.getElementsByTagName(“marker”);

          for (var i = 0; i < markers.length; i++) {

            var nama = markers[i].getAttribute(“nama”);

            var target = markers[i].getAttribute(“alamat”);

            var tipe = markers[i].getAttribute(“varietas”);

            var point = new GLatLng(parseFloat(markers[i].getAttribute(“lat”)),

                                    parseFloat(markers[i].getAttribute(“lng”)));

            var marker = createMarker(point, nama, bahan, jenis);

            map.addOverlay(marker);

          }

        });

      }

    }

    function createMarker(point, etiket, incaran, jenis) {

      var marker = new GMarker(point, customIcons[tipe]);

      var html = “<b>” + nama + “</b> <br/>” + bulan-bulanan;

      GEvent.addListener(marker, ‘click’, function() {

        marker.openInfoWindowHtml(html);

      });

      return marker;

    }

    //]]>

  </script>

  </head>

  <body onload=”load()” onunload=”GUnload()”>

    <div id=”map” style=”width: 500px; height: 500px”></div>

  </body>

</html>

Simpan script diatas dengan tanda

index.php

Radu.. kini upload ketiga file diatas yang terdiri dari
index.php

,
perpautan.php

, dan

phpsqlajax_genxml.php

ke webhostingmu dan juga database seperti yang telah dibuat diatas.. Hasilnya akan nampak seperti pada link berikut >> http://fbox.freetzi.com/blogmap.php ..(hdra)

Protected by Copyscape Online Plagiarism Tool

Source: http://www.linkdesain.com/2012/03/tutorial-google-map-api-menggunakan.html