Panduan Google Map API-3-Guntara PDF

STMIK AKAKOM - Yogyakarta
Php/MySQL untuk Google Map

Membuat area dengan poligon DINAMIS (koordinat
disimpan di DATABASE)
1(satu) Polygon
Buat garis /poligon untuk mengahsilkan koordinat titik sudut
1. Ketik url : https://mapsengine.google.com
2. Bila belum masuk ke akun google, masukkan akun Google, akan muncul display sbb
(agar yang nampak daerah yang diharapkan, search : nama daerah - min.
kecamatan)
3. Klik Buat Peta Baru
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
a. Garis, billa klik terakhir TIDAK SAMA dengan
posisi awal garis
b. Poligon bila posisi akhir klik SAMA dengan titik awal garis
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
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 :
ada file .kml diatas, kemudian Ctrl-C

2. Blok bagian yang diberi latar kuning p
3. Dengan phpMyAdmin buka Tabel diatas, dan klik Insert, sehingga menjadi sbb
4. kmd klik GO, maka koordinat akan tersimpan di tabel
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
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>';
?>
3. Buat script untuk menampilkan polygon (misal : buat_polygon_dr_database.php)


<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"></scri
pt>
<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
//======== 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

zoom: 13,
});
} //---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

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"></scri
pt>
<script type="text/javascript">
function load() {
var peta = new
zoom: 13,
});
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

var peta = new

zoom: 13,
});
} //---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>
2. Hasil dari script sbb(akan terlihat jendela informasi sesaui posisi cursor)
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 : membuat multiple polygon

Panduan Google Map API-3-Guntara PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Panduan Google Map API-3-Guntara PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

STMIK AKAKOM - Yogyakarta

Php/MySQL untuk Google Map

Buat garis /poligon untuk mengahsilkan koordinat titik sudut

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

4. Klik ​Create ​ pada My Custom maps, akan muncul

5. ikon ​Draw Line ​untuk menggambar garis atau

8. Untuk mengakhiri klik ​mouse 2x

Ekspor file Banguntapan.kml

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

Copy koordinat ke tabel (sementara pakai cara manual)

1. Buat tabel misal sbb :

​ ada file .kml diatas, kemudian Ctrl-C

4. kmd klik ​GO​, maka koordinat akan tersimpan di tabel

Buat script php untuk membetuk xml dari database

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

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

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

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

Hasil xml (dihasilkan oleh pembangkit_xml_polygon.php)

<titik bujur=" 110.4261589050293" lintang="-7.8181467721454165"

var peta = new

var infoWindow = new google.maps.InfoWindow;

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

var lintasan=new google.maps.Polygon({

}); //end download funstion

var peta = new

function downloadUrl(url, callback) {

jaluk .onreadystatechange = function() {

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

4. Jalankan ​buat_polygon_dr_database.php​, hasilnya adalah

Membuat info WIndow pada polygon

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

var munculInfoPolygon = new google.maps.InfoWindow;

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

var lintasan=new google.maps.Polygon({

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

//MATIKAN info window polygon====

}); //end download funstion

var peta = new

function downloadUrl(url, callback) {

jaluk .onreadystatechange = function() {

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

3. nempel KML di API :

See next : ​membuat multiple polygon

Anda mungkin juga menyukai

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

4. Klik Create pada My Custom maps, akan muncul

5. ikon Draw Line untuk menggambar garis atau

8. Untuk mengakhiri klik mouse 2x

ada file .kml diatas, kemudian Ctrl-C

4. kmd klik GO, maka koordinat akan tersimpan di tabel

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

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

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

4. Jalankan buat_polygon_dr_database.php, hasilnya adalah

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

See next : membuat multiple polygon