Formatted: Font: (Default) Arial, Font color: Black, Not

Highlight

Formatted: Font: (Default) Arial, 30 pt, Bold

`jhjhjhjbbkml php google maps Formatted: Font: (Default) Arial, 30 pt, Bold

Formatted: Font color: Blue

Php/MySQL untuk Google Map
Membuat area dengan poligon DINAMIS (koordinat
disimpan di DATABASE)
1. 1(satu) Polygon https://mapsengine.google.com Formatted: Justified
Formatted: Font: (Default) Arial, 11 pt, Font color:
Black, Not Highlight

Buat garis /poligon untuk mengahsilkan koordinat titik sudut

1. Ketik url : https://mapsengine.google.com

Formatted: Don't add space between paragraphs of
the same style, Outline numbered + Level: 1 +
Numbering Style: 1, 2, 3, + Start at: 1 + Alignment:
Left + Aligned at: 0.25" + Indent at: 0.5"

1.
2. Bila belum masuk ke akun google, masukkan akun Google, akan muncul
display sbb (agar yang nampak daerah yang diharapkan, search : nama daerah - Formatted: Font: (Default) Arial, Font color: Black, Not
Highlight
STMIK AKAKOM - Yogyakarta

min. kecamatan)
STMIK AKAKOM - Yogyakarta

3. Klik Buat Peta Baru

3. Formatted: Don't add space between paragraphs of
the same style, Outline numbered + Level: 1 +
Numbering Style: 1, 2, 3, + Start at: 1 + Alignment:
Left + Aligned at: 0.25" + Indent at: 0.5"

4. Klik Create pada My Custom maps, akan

muncul

5. ikon Draw Line untuk menggambar garis atau

polygon
6. Tempatkan cursor di posisi awal garis/polygon
7. Klik untuk menempatkan titik sudut dan seret
ke posisi yang diharapkan kmd klik lagi, maka akan terbetuk
STMIK AKAKOM - Yogyakarta

a. Garis, billa klik terakhir TIDAK SAMA dengan posisi awal garis

b. Poligon bila posisi akhir klik SAMA dengan titik awal garis
j

8. Untuk mengakhiri klik mouse 2x

9. Simpan garis/poligon.
10. lakukan export file seperti langkah berikut

Ekspor file Banguntapan.kml

1. Klik Ikon FiIe Export KML
2. Pilih : semua peta atau bagian tertentu
STMIK AKAKOM - Yogyakarta

3. klik UNDUH/DOWLOAD, akan menghasilkan file. Banguntapan.kml (berisi poligon

banguntapan)
4. Bila dibuka pakai editor (Word, Texpad, Notepad, dll)sbb
File: Banguntapan.kml

<?xml version='1.0' encoding='UTF-8'?>

<kml xmlns='http://www.opengis.net/kml/2.2'>
<Document>
<name>Banguntapan</name>
<Placemark>
<styleUrl>#poly-000000-4-76</styleUrl>
<name>Banguntapan</name>
<description><![CDATA[asdd]]></description>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<tessellate>0</tessellate>
<coordinates>110.4261589050293,-
7.8181467721454165,0.0 110.4180908203125,-7.800629632372109,0.0
110.40761947631836,-7.818316837862061,0.0 110.39457321166992,-
7.810153605306581,0.0 110.39955139160156,-7.82835059241103,0.0
110.4012680053711,-7.856409808971952,0.0 110.45671463012695,-
7.83073144786945,0.0 110.4261589050293,-
7.8181467721454165,0.0</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Style id='poly-000000-4-76'>
<LineStyle>
<color>ff000000</color>
<width>4</width>
</LineStyle>
<PolyStyle>
<color>4C000000</color>
<fill>1</fill>
<outline>1</outline>
</PolyStyle>
</Style>
</Document>
</kml>

Copy koordinat ke tabel (sementara pakai cara manual)

1. Buat tabel misal sbb :

STMIK AKAKOM - Yogyakarta

2.

2.3. Blok bagian yang diberi latar kuning pada file .kml diatas, kemudian Ctrl-C
STMIK AKAKOM - Yogyakarta

3.4. Dengan phpMyAdmin buka Tab

el diatas, dan klik

Insert, sehingga menjadi sbb

Formatted: Indent: Left: 0.5"

4. kmd klik GO, maka koordinat akan tersimpan di tabel Formatted: Indent: Left: 0.75"

Buat script php untuk membetuk xml dari database

XML (extensible markaup language) adalah format standar berbasis HTML untuk data transport
antar platform. Dalam hal ini untuk mengirim data dari variabel PHP ke javascript yang dipakai Formatted: Font: (Default) Arial, 11 pt, Pattern: Clear
1. kmd klik GO, maka koordinat akan tersimpan di tabel
Formatted: Font: (Default) Arial, 11 pt, Pattern: Clear
STMIK AKAKOM - Yogyakarta

Buat script php untuk membetuk xml dari database

XML (extensible markaup language) adalah format standar berbasis HTML untuk data transport
Google Map API

1. Buat script untuk koneksi ke Mysql server dan database (file :koneksi.php)

<?php
mysql_connect("host","nama_user","password") or die ("Mysql
GAK KONEK");
mysql_select_db('nama_database')or die("Database gak Konek");
?>

Nama_user, password, dan nama_database , disesuaikan dengan setting yang ada

2. Buat script (misal : pembangkit_xml_polygon.php), sbb

<?php
include "koneksi.php";
$x=mysql_query("select * from daerah");
$y=mysql_fetch_array($x);
$id=$y['id'];
$kecamatan=$y['kecamatan'];
$batas=$y['koordinat'];
$urai=explode(',0.0',$batas);
$max=count($urai)-1;

//konversi ke array 2 D, menghasilkan $koor[i][j]

for($i=0;$i<$max;$i++)
{
for($j=0;$j<2;$j++)
{
$koor[$i]=explode(',',$urai[$i]);
}}
//konversi ke format XML
header("Content-type: text/xml");
echo '<daerah>';
for($i=0;$i<$max;$i++)
{
echo '<titik ';
for($j=0;$j<2;$j++)
{
if($j==1)
echo 'lintang="' .$koor[$i][$j]. '" ';
else
echo 'bujur="' . $koor[$i][$j] . '" ';
}
echo '/>';
}
echo '</daerah>';
?>
STMIK AKAKOM - Yogyakarta

3. Buat script untuk menampilkan polygon (misal : buat_polygon_dr_database.php)

<!-- Formatted: Font: 9 pt

=====================================================================Tabel dan
bentuk xml dibawah ini HANYA sekedar untuk mempermudah dalam memparing XML menjadi Formatted: Indent: Left: 0", Line spacing: Multiple
bentuk koordinat 1.15 li
---------------------------------------------------------------------
Database:googlemap
Tabel : daerah
id kecamatan koordinat
---------------------------------------------------------------------1
Banguntapan 110.4261589050293,-7.8181467721454165,0.0 110.4180...

Hasil xml (dihasilkan oleh pembangkit_xml_polygon.php)

---------------------------------------------------------------------<daerah>
<titik bujur="110.4261589050293" lintang="-7.8181467721454165" />
<titik bujur=" 110.4180908203125" lintang="-7.800629632372109" />
<titik bujur=" 110.40761947631836" lintang="-7.818316837862061" />
<titik bujur=" 110.39457321166992" lintang="-7.810153605306581" />
<titik bujur=" 110.39955139160156" lintang="-7.82835059241103" />
<titik bujur=" 110.4012680053711" lintang="-7.856409808971952" />
<titik bujur=" 110.45671463012695" lintang="-7.83073144786945" />
<titik bujur=" 110.4261589050293" lintang="-7.8181467721454165" />
</daerah>
-->
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>PHP/MySQL & Google Maps Example</title>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

function load() {

var peta = new google.maps.Map(document.getElementById("petaKu"), {

center: new google.maps.LatLng(-7.791430, 110.374502),
zoom: 13,
mapTypeId: 'roadmap'
});

var infoWindow = new google.maps.InfoWindow;

//----------------------------------------------

// Change this depending on the name of your PHP file

downloadUrl("pembangkit_xml_polygon.php", function(data) {
var xml = data.responseXML;
var ujung = xml.documentElement.getElementsByTagName("titik");
var ruteKu=new Array();
for (var i = 0; i < ujung.length; i++) {
ruteKu[i] = new google.maps.LatLng(
parseFloat(ujung[i].getAttribute("lintang")),
parseFloat(ujung[i].getAttribute("bujur")));

} //end for i
STMIK AKAKOM - Yogyakarta

//======== buat poligon dari titik-titik marker ============

var lintasan=new google.maps.Polygon({

path:ruteKu,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
lintasan.setMap(peta);
//-----------end poligon

}); //end download funstion

var peta = new google.maps.Map(document.getElementById("petaKu"), {

center: new google.maps.LatLng(-7.811430, 110.41502),
zoom: 13,
mapTypeId: 'roadmap'
});
} //---end load ----

function downloadUrl(url, callback) {

var jaluk = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;

jaluk .onreadystatechange = function() {

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

jaluk .open('GET', url, true);

jaluk .send(null);
}

function doNothing() {}

</script>

</head>

<body onload="load()">
<div id="petaKu" style="width: 800px; height: 600px"></div>
</body>
</html>

4. Jalankan buat_polygon_dr_database.php, hasilnya adalah

STMIK AKAKOM - Yogyakarta

5. Poligon diatas masih belum interaktif, bila di klik belum menunjukkan informasi apapun.
Agar poligon lebih interkatif dapat dilakukan pembuatan infoWindow seperti langkah berikut.

Membuat info WIndow pada polygon

Info Window adalah jendela bersifat pop-up yang berisi penjelasan teks tentang daerah (dengan
batasan poligon)saat cursor ada di atas poligon. jendela bis amuncul kalau mouse di klik (event:
click) maupun saat cursor diatas daerah (event : mouseover)

1. Tambhakan pada script buat_polygon_dr_database.php, sehingga sbb (tambahan

di blok kuning)

<head>
<meta name="viewport" content="initial-scale=1.0, user-
scalable=no" />
<meta http-equiv="content-type" content="text/html;
charset=UTF-8"/>
<title>PHP/MySQL & Google Maps Example</title>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false"></scr
ipt>
<script type="text/javascript">

function load() {
var peta = new
google.maps.Map(document.getElementById("petaKu"), {
center: new google.maps.LatLng(-7.811430, 110.414502),
zoom: 13,
mapTypeId: 'roadmap'
});
STMIK AKAKOM - Yogyakarta

var munculInfoPolygon = new google.maps.InfoWindow;

//----------------------------------------------

// Change this depending on the name of your PHP file

downloadUrl("pembangkit_xml_polygon.php", function(data) {
var xml = data.responseXML;
var ujung =
xml.documentElement.getElementsByTagName("titik");
var ruteKu=new Array();
for (var i = 0; i < ujung.length; i++) {
ruteKu[i] = new google.maps.LatLng(
parseFloat(ujung[i].getAttribute("lintang")),
parseFloat(ujung[i].getAttribute("bujur")));

} //end for i
//======== buat poligon dari titik-titik marker
============

var lintasan=new google.maps.Polygon({

path:ruteKu,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
lintasan.setMap(peta);
//-----------end poligon

//==============MUNCUL info window polygon====

google.maps.event.addListener(lintasan, 'mouseover',
function(event) {
var y=event.latLng.lat();
var x=event.latLng.lng();
var tulisan='lokasi :'+y+','+x;
munculInfoPolygon.setContent(tulisan);
var posisiInfo = new google.maps.LatLng(y,x);
munculInfoPolygon.setPosition(posisiInfo);
munculInfoPolygon.open(peta);
// Catatan:
bila pakai "munculInfoPolygon.open(peta,lintasan);"
//posisi infoWindow TIDAK megikuti cursor
});

//MATIKAN info window polygon====

google.maps.event.addListener(lintasan, 'mouseout', function()
{
munculInfoPolygon.close();
});
//---akhir info window

}); //end download funstion

STMIK AKAKOM - Yogyakarta

var peta = new

google.maps.Map(document.getElementById("petaKu"), {
center: new google.maps.LatLng(-7.811430, 110.41502),
zoom: 13,
mapTypeId: 'roadmap'
});
} //---end load ----
https://developers.google.com/kml/documentation/kml_tut?hl=de Formatted: Font: (Default) Arial, 11 pt

function downloadUrl(url, callback) {

var jaluk = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;

jaluk .onreadystatechange = function() {

if (jaluk .readyState == 4) {
GO jaluk .onreadystatechange = doNothing;
callback(jaluk, jaluk.status);
}
};

jaluk .open('GET', url, true);

jaluk .send(null);
}

function doNothing() {}

</script>

</head>

<body onload="load()">
<div id="petaKu" style="width: 800px; height: 600px"></div>
</body>

2. Hasil dari script sbb(akan terlihat jendela informasi sesaui posisi cursor)
STMIK AKAKOM - Yogyakarta

sumber:
1.https://developers.google.com/maps/documentation/javascript/examples/polygon-arrays
2. gunakan KML : https://developers.google.com/kml/documentation/kml_tut?hl=de

3. nempel KML di API :

https://developers.google.com/maps/documentation/javascript/examples/layer-kml

See next : memee next : buat multiple polygon Formatted: Font color: Gray-5%
Formatted: No underline