Displaying Markers on Maps Manually Using HTML Script

WEB GIS (MARKER)
Oleh Sustin Farlinda,S.Kom,MT

• Menampilkan Marker pada Peta Secara
Manual pada script HTML
• Jalan kan di browser dengan catatan data
dicopy di xampp dalam ht docs
<!DOCTYPE html>
<html> <head> <meta name="viewport" content="initial-scale=1.0, user-
scalable=no"> <meta charset="utf-8">
<title>Simple markers</title> <style>
html, body, #map-canvas {
height: 100%; margin: 0px; padding: 0px }
</style> <script
src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></
script> <script>
function initialize() {
var myLatlng = new google.maps.LatLng(-7.7145, 110.3418);
var mapOptions = { zoom: 6, center: myLatlng }
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions); //WAJIB
var marker = new google.maps.Marker({
position: myLatlng, map: map, title: 'Hello Yogya!‘ }); }
google.maps.event.addDomListener(window, 'load', initialize);
</script> </head> <body> <div id="map-canvas"></div> </body>
</html>
<!DOCTYPE html>
<html> <head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
height: 100%;
margin: 0px;
padding: 0px }
</style> <script
src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
mapOptions);
var markers = new google.maps.Markers({
position: myLatlng, map: map,
title: 'Hello Yogya!'
}); }
</script> </head> <body>
<div id="map-canvas"></div>
</body>
</html>
• Marker dengan Informasi Jika Di Klik
<!DOCTYPE html>
<html>
<head>
<title>Info windows</title>
<style>
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
var jember = new google.maps.LatLng(-8.1768099,113.6909704);
var mapOptions = {
zoom: 8,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

//untuk info yogja
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Yogyakarta</h1>'+
'<div id="bodyContent">'+
'<p><b>Yogyakarta</b>, Atau yang lebih dikenal sebagai <b>Daerah Istimewa
Yogyakarta</b>, adalah ' +
'sebuah kota sekaligus provinsi dengan kebudayaannya yang masih kental '+
'dan juga merupakan salah satu tempat wisata terbaik di Indonesia '+
'<img src="yogya.jpg">'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
position: myLatlng,
map: map,
title: 'Yogyakarta'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
//untuk info jember
var contentString1 = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">J E M B E R</h1>'+
'<div id="bodyContent">'+
'<p><b>JEMBER</b>, Atau yang lebih dikenal sebagai <b>KOTA TAPE</b>, adalah ' +
'sebuah kota yang cukup Indah dengan Pantai Watu Ulonya dan Puncak Rembangan '+
'<img src=“jember.jpg">'+
'</div>'+
'</div>';
var infowindow1 = new google.maps.InfoWindow({
content: contentString1
});
var marker1 = new google.maps.Marker({
position: jember,
map: map,
title: 'Jember'
});
google.maps.event.addListener(marker1, 'click', function() {
infowindow1.open(map,marker1);
});
}
</script>
</head>
<body>
</body>
</html>
Silahkan dicoba saat Praktikum
1. Buat program pada notepad/notepad++
untuk menampilkan minimal 2 marker pada
map dari google (masing2 mahasiswa dengan
kota yg berbeda) simpan dengan nama prak
14b
2. Tambahkan agar Marker bias di Klik dan
menampikan deskripsi) simpan dengan nama
prak 14b
Tugas…
• Buat program pada notepad/notepad++ untuk
menampilkan marker pada map dari google
dengan cara menginputkan Longitude dan
Latitude dan dapat menambahkan marker
dengan pengulangan (Kelompok maks 10
mahasiswa )
Entry Data Long/Lat
Longitude :
Latitude :
Ingin Tambah Marker lagi ? Y/T
• XAMPP  PHPMYADMIN
Buat program pada notepad/notepad++ untuk
menampilkan marker pada map dari google
<!DOCTYPE html>
<html> <head>
<title>Simple markers</title>
<style>
height: 100%;
margin: 0px;
padding: 0px }
</style> <script
src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
mapOptions);
var markers = new google.maps.Markers({
position: myLatlng, map: map,
title: 'Hello Yogya!'
}); }
</script> </head> <body>
</body>
</html>
2. Buatlah satu database klik new pada Database
3. Untuk membuat tabel dengan nama
“markers”, ketik code dibawah ini
CREATE TABLE `markers` (

ìd` INT NOT NULL AUTO_INCREMENT PRIMARY KEY
,
`name` VARCHAR( 60 ) NOT NULL ,
àddress` VARCHAR( 80 ) NOT NULL ,
`lat` FLOAT( 10, 6 ) NOT NULL ,
`lng` FLOAT( 10, 6 ) NOT NULL ,
`type` VARCHAR( 30 ) NOT NULL
) ENGINE = MYISAM ;
4. Klik Kirim
5. Maka akan terbentuk tabel markers seperti
yang dibawah ini
6. Selanjutnya adalah memasukan entitas
tabel dengan susunan script sql seperti
dibawah ini. Buatlah sebanyak yang anda mau.
INSERT INTO `markers` (`name`, àddress`, `lat`,

`lng`, `type`) VALUES
('Rumah Sakit Sehat', 'Yogyakarta', '-7.608941',
'110.340145', 'A');
7. Sehingga akan terbentuk beberapa
titik seperti berikut ini
8. Cek keberadaan data pada tabel dengan
cara klik nama tabelnya, sehingga akan
keluar tampilan sebagai berikut
• Selanjutnya adalah melakukan konfigurasi untuk
menghubungkan antara file
phpsqlajax_genxml.php dengan phpsqlajax.html.
Konfigurasi ini cukup dilakukan dengan
memasukan nama pengguna, password, dan
nama database yang tadi telah dibuat.(ini
penting)
<?php
$username="username";
$password="password";
$database="username-databaseName";
?>
10. Setelah melakukan konfigurasi, masukan file
phpsqlajax_genxml.php ke dalam folder
yang sama dengan phpsqlajax_dbinfo.php.
Script pada file ini berguna untuk
menerjemahkan file sql menjadi format XML,
karena dalam kasus ini google maps bisa
membaca file berformat XML untuk nantinya
diiemplementasikan dalam bentuk titik –
titik marker.
<?php
require("phpsqlajax_dbinfo.php");
// Start XML file, create parent node
$doc = domxml_new_doc("1.0");
$node = $doc->create_element("markers");
$parnode = $doc->append_child($node);
// Opens a connection to a MySQL server
$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");
// Iterate through the rows, adding XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
// ADD TO XML DOCUMENT NODE
$node = $doc->create_element("marker");
$newnode = $parnode->append_child($node);
$newnode->set_attribute("name", $row['name']);
$newnode->set_attribute("address", $row['address']);
$newnode->set_attribute("lat", $row['lat']);
$newnode->set_attribute("lng", $row['lng']);
$newnode->set_attribute("type", $row['type']);
}
$xmlfile = $doc->dump_mem();
echo $xmlfile;
?>
11. Penting disini untuk memperhatikan script
“markers” yang merupakan nama tabel yang
telah dibuat, bila nama tabel diubah, maka
nama tabel sekaligus nama kolom dan banyak
kolom yang dibuat harus diubah juga
/ 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");
// Iterate through the rows, adding XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
// ADD TO XML DOCUMENT NODE
$node = $doc->create_element("marker");
$newnode = $parnode->append_child($node);
$newnode->set_attribute("name", $row['name']);
$newnode->set_attribute("address", $row['address']);
$newnode->set_attribute("lat", $row['lat']);
$newnode->set_attribute("lng", $row['lng']);
$newnode->set_attribute("type", $row['type']);
}
12. Validasi XML yang telah terbentuk pada
file phpsqlajax_genxml.php, bukalah file
tersebut pada localhost, pastikan terbentuk
tampilan seperti dibawah ini.
13. Apabila telah terbentuk tampilan seperti
diatas, maka dapat dinyatakan bahwa mysql
telah terkoneksi dengan baik. Selanjutnya
adalah pembuatan peta dengan marker
berdasarkan data yang di input dari tabel.
Marker dibuat dengan melakukan entri script
berbasis array yang didasarkan pada urutan id
dari tabel.
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); }
downloadUrl("phpsqlajax_genxml.php",
function(data){
var xml = data.responseXML;
var markers =
xml.documentElement.getElementsByTagName(
"marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
map: map,
position: point,
icon: icon.icon
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
14. Icon marker dapat dicustom dngn
cara memasukan link external
berformat PNG
var customIcons = {
A: {
icon:
'http://labs.google.com/ridefinder/images/mm_20_blue.
png'
},
B: {
icon:
'http://labs.google.com/ridefinder/images/mm_20_red.p
ng'
}
};
15. Penulisan script infowindow
dilakukan satu kali saja dengan peman-
faatan array pada pembuatan marker
function bindInfoWindow(marker, map,

infoWindow, html) {
google.maps.event.addListener(marker, 'click',
function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
16. Seluruh script yang dibutuhkan
untuk halaman html (phpsqlajax.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>PHP/MySQL & Google Maps Example</title>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
A: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
},
B: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(-7.6145, 101.3418),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
map: map,
position: point,
icon: icon.icon
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
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>
</head>
<body onload="load()">
<div id="map" style="width: 100%; height: 100%"></div>
</body>
</html>

Displaying Markers on Maps Manually Using HTML Script

Încărcat de

Informații document

Descriere originală:

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Displaying Markers on Maps Manually Using HTML Script

Încărcat de

Drepturi de autor:

Formate disponibile

WEB GIS (MARKER)

Oleh Sustin Farlinda,S.Kom,MT

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

CREATE TABLE `markers` (

INSERT INTO `markers` (`name`, `address`, `lat`,

function bindInfoWindow(marker, map,

S-ar putea să vă placă și