Anda di halaman 1dari 21

Praktik SIP

Acara 9
Menggunakan MySQL dan PHP dengan Google Maps

Latihan ini memperlihatkan cara menampilkan informasi dari database MySQL di peta
Google menggunakan Google Maps JavaScript API. Latihan ini sesuai untuk orang yang
sudah memiliki pengetahuan menengah tentang MySQL, PHP, dan XML.
Peta di Latihan ini menampilkan dua jenis marker untuk membedakan antara lokasi
restoran dengan bar. Sebuah database dalam MySQL menyimpan informasi tentang
lokasi marker individual seperti tipe tempat (apakah berupa restoran atau bar), nama,
alamat, dan koordinat geografisnya. Peta mengambil informasi ini dari database, melalui
file XML yang berfungsi sebagai perantara antara database dengan peta. Anda bisa
menggunakan pernyataan PHP untuk mengekspor informasi marker dari database ke file
XML.
Klik marker pada peta di bawah ini untuk menampilkan jendela info dengan nama dan
alamat lokasi. Marker memiliki label 'R' atau 'B' dan menampilkan lokasi restoran dan bar.
Contoh berikut menampilkan keseluruhan kode yang Anda perlukan untuk membuat peta
ini.
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.x
ml', function(data) {
var xml = data.responseXML;
var markers =
xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
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'));
var text = document.createElement('text');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
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() {}
<div id="map"></div>
/* 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;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQo
CvLwzdM6M8s5qk&callback=initMap">
</script>

Arahkan ke atas kanan blok kode untuk menyalin kode atau membukanya dalam
JSFiddle.
<!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>

<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/map
markers2.xml', function(data) {
var xml = data.responseXML;
var markers =
xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
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'));

var text = document.createElement('text');


text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
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>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key= YOUR_API_KEY &callbac

k=initMap">
</script>
</body>
</html>

Memulai
Pasang, siapkan, dan konfigurasi server MySQL dengan PHP di komputer Anda.

Membuat tabel di MySQL


Buat sebuah tabel di MySQL yang berisi atribut marker pada peta,
seperti id, name, address, lat, lng, dan type marker.
Atribut id berfungsi sebagai kunci utama dan atribut type membedakan restoran
dengan bar.
Untuk meminimalkan ruang penyimpanan untuk tabel, Anda bisa menetapkan
atribut lat dan lng agar berupa float ukuran (10,6). Ini memungkinkan bidang untuk
menyimpan 6 digit setelah desimal, ditambah maksimum 4 digit sebelum desimal.
Anda bisa berinteraksi dengan database MySQL melalui antarmuka phpMyAmin.
Tangkapan layar di bawah ini menampilkan persiapan tabel di phpMyAdmin.
Anda juga bisa menggunakan perintah SQL untuk membuat tabel, seperti dalam
pernyataan SQL di bawah ini.
CREATE TABLE `markers` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`name` VARCHAR( 60 ) NOT NULL ,
`address` VARCHAR( 80 ) NOT NULL ,
`lat` FLOAT( 10, 6 ) NOT NULL ,
`lng` FLOAT( 10, 6 ) NOT NULL ,
`type` VARCHAR( 30 ) NOT NULL
) ENGINE = MYISAM ;

Mengisi tabel
Anda bisa mengimpor data marker ke dalam database SQL menggunakan fungsionalitas
'Import' di antarmuka phpMyAdmin yang memungkinkan Anda mengimpor data dalam
beragam format.

Di bawah ini adalah data marker untuk peta di Latihan ini, dalam format .csv. (simpan
dalam excel dengan ekstensi .csv)

Love.Fish,"580 Darling Street, Rozelle, NSW",-


33.861034,151.171936,restaurant
Young Henrys,"76 Wilford Street, Newtown, NSW",-33.898113,151.174469,bar
Hunter Gatherer,"Greenwood Plaza, 36 Blue St, North Sydney NSW ",-
33.840282,151.207474,bar
The Potting Shed,"7A, 2 Huntley Street, Alexandria, NSW",-
33.910751,151.194168,bar
Nomad,"16 Foster Street, Surry Hills, NSW",-33.879917,151.210449,bar
Three Blue Ducks,"43 Macpherson Street, Bronte, NSW",-
33.906357,151.263763,restaurant
Single Origin Roasters,"60-64 Reservoir Street, Surry Hills, NSW",-
33.881123,151.209656,restaurant
Red Lantern,"60 Riley Street, Darlinghurst, NSW",-
33.874737,151.215530,restaurant

Anda juga bisa menggunakan perintah SQL di bawah ini untuk mengimpor data marker
ke dalam tabel SQL.

INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES


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

Mengeluarkan data sebagai XML menggunakan PHP


Pada tahap ini, Anda seharusnya memiliki tabel yang bernama markers yang berisi data
marker peta. Bagian ini menampilkan cara mengekspor data tabel dari database SQL ke
dalam format XML, menggunakan pernyataan PHP. Peta bisa menggunakan file XML
untuk mengambil data marker melalui panggilan JavaScript asinkron.

Menggunakan file XML sebagai perantara database dengan peta Google Anda
memungkinkan pemuatan laman awal yang lebih cepat dan aplikasi peta yang lebih
fleksibel. Ini membuat debugging lebih mudah karena Anda bisa memverifikasi keluaran
XML dari database dan parsing JavaScript XML secara independen. Anda juga bisa
menjalankan peta seluruhnya hanya berdasarkan file XML statis dan tidak menggunakan
database MySQL.
Jika Anda belum pernah menggunakan PHP untuk terhubung ke database MySQL,
kunjungi php.net dan baca tentang mysql_connect, mysql_select_db, my_sql_query,
dan mysql_error.
Anda bisa menggunakan mana pun dari ketiga teknik yang berbeda di bawah ini untuk
mengeluarkan data tabel SQL sebagai XML dengan PHP.

 Menggunakan fungsi XML DOM PHP untuk mengeluarkan XML


 Menggunakan echo PHP untuk mengeluarkan XML
 Menggunakan fungsi DOM PHP untuk mengeluarkan XML

Saat menggunakan browser publik untuk mengakses database menggunakan file PHP,
penting untuk memastikan kredensial database Anda aman. Anda bisa melakukannya
dengan menempatkan informasi koneksi database Anda di file PHP terpisah dari kode
PHP utama. File yang berisi kredensial Anda harus tampak seperti yang di bawah ini,
tetapi berisi informasi database Anda sendiri.
<?php
$username="username";
$password="password";
$database="username-databaseName";
?>

Menggunakan fungsi XML DOM PHP untuk mengeluarkan XML

Fungsi XML DOM PHP akan mengelola detail kecil, seperti meloloskan entitas khusus di
XML, dan memudahkan pembuatan XML dengan struktur yang lebih kompleks. Anda
bisa menggunakan fungsi XML DOM untuk membuat simpul XML, menambah simpul
turunan, dan membuat keluaran dokumen XML ke layar. Untuk mengetahui apakah PHP
server Anda telah mengaktifkan fungsionalitas XML DOM, periksa konfigurasi atau coba
mulai domxml_new_doc().

Di bawah ini adalah file PHP yang dihubungkan ke database MySQL dan mengeluarkan
XML ke browser.

<?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;

?>

Dalam file di atas, kode PHP melakukan inisialisasi dokumen XML baru terlebih dulu dan
membuat simpul induk "marker". Simpul ini kemudian terhubung ke database,
mengeksekusi kueri SELECT * (pilih semua) pada tabel marker dan melakukan iterasi
pada hasilnya. Untuk setiap baris dalam tabel (setiap lokasi), kode membuat simpul XML
baru dengan atribut baris sebagai atribut XML dan menambahkannya ke simpul induk.
Bagian terakhir kode kemudian mengeluarkan XML ke layar browser.

Catatan: Jika database Anda berisi karakter internasional, atau Anda perlu memaksakan
keluaran UTF-8, Anda bisa menggunakan utf8_encode pada keluaran data.

Menggunakan echo PHP untuk mengeluarkan XML


Jika tidak memiliki akses ke fungsi dom_xml PHP, Anda bisa membuat keluaran XML
dengan fungsi echo. Gunakan fungsi helper (misalnya parseToXML) saat menggunakan
fungsi echo saja untuk mengenkode beberapa entitas khusus (<,>,",') dengan benar agar
ramah XML.
Di bawah ini adalah file PHP yang dihubungkan ke database MySQL dan mengeluarkan
XML ke browser.

<?php
require("phpsqlajax_dbinfo.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 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");

// 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 'name="' . parseToXML($row['name']) . '" ';
echo 'address="' . parseToXML($row['address']) . '" ';
echo 'lat="' . $row['lat'] . '" ';
echo 'lng="' . $row['lng'] . '" ';
echo 'type="' . $row['type'] . '" ';
echo '/>';
}

// End XML file


echo '</markers>';

?>
Kode di atas menghubungkan database dan mengeksekusi kueri SELECT * (pilih semua)
pada tabel marker. Kode kemudian menjalankan echo simpul markers induk dan
melakukan iterasi pada hasil kueri. Kode kemudian menjalankan echo simpul XML untuk
marker di setiap baris tabel (untuk setiap lokasi). Ini mengirimkan bidang nama dan
alamat melalui fungsi parseToXML terlebih dulu, dalam hal terdapat entitas khusus di
dalamnya. Skrip diakhiri dengan menjalankan echo yang mengeluarkan
tag markers penutup.

Catatan: Anda bisa menggunakan utf8_encode pada keluaran data XML jika database
Anda berisi karakter internasional, atau jika Anda ingin memaksakan keluaran UTF-8.

Menggunakan fungsi DOM PHP untuk mengeluarkan XML


Di bawah ini adalah file PHP yang dihubungkan ke database MySQL dan mengeluarkan
XML ke browser.
<?php

require("phpsqlajax_dbinfo.php");

// Start XML file, create parent node

$dom = new DOMDocument("1.0");


$node = $dom->createElement("markers");
$parnode = $dom->appendChild($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 = $dom->createElement("marker");
$newnode = $parnode->appendChild($node);
$newnode->setAttribute("name",$row['name']);
$newnode->setAttribute("address", $row['address']);
$newnode->setAttribute("lat", $row['lat']);
$newnode->setAttribute("lng", $row['lng']);
$newnode->setAttribute("type", $row['type']);
}

echo $dom->saveXML();

?>
Kode di atas melakukan inisialisasi dokumen XML baru dan membuat simpul induk
"marker". Simpul ini kemudian terhubung ke database, mengeksekusi kueri SELECT
* (pilih semua) pada tabel marker dan melakukan iterasi pada hasilnya. Kode kemudian
membuat simpul XML untuk setiap baris dalam tabel (untuk setiap lokasi), dengan atribut
baris sebagai atribut XML dan menambahkannya ke simpul induk. Kode kemudian
mengeluarkan XML ke layar browser.
Catatan: Jika database Anda berisi karakter internasional, atau Anda perlu memaksakan
keluaran UTF-8, Anda bisa menggunakan utf8_encode pada keluaran data.

Memeriksa apakah keluaran XML berfungsi.


Untuk mengkonfirmasi apakah skrip PHP menghasilkan XML yang valid, panggil file
skrip PHP yang Anda buat dari browser untuk melihat keluaran XML seperti berikut.

<markers>
<marker name="Love.Fish" address="580 Darling Street, Rozelle, NSW" lat="-
33.861034" lng="151.171936" type="restaurant"/>
<marker name="Young Henrys" address="76 Wilford Street, Newtown, NSW"
lat="-33.898113" lng="151.174469" type="bar"/>
<marker name="Hunter Gatherer" address="Greenwood Plaza, 36 Blue St, North
Sydney NSW" lat="-33.840282" lng="151.207474" type="bar"/>
<marker name="The Potting Shed" address="7A, 2 Huntley Street, Alexandria,
NSW" lat="-33.910751" lng="151.194168" type="bar"/>

<marker name="Nomad" address="16 Foster Street, Surry Hills, NSW" lat="-


33.879917" lng="151.210449" type="bar"/>
<marker name="Three Blue Ducks" address="43 Macpherson Street, Bronte,
NSW" lat="-33.906357" lng="151.263763" type="restaurant"/>
<marker name="Single Origin Roasters" address="60-64 Reservoir Street,
Surry Hills, NSW" lat="-33.881123" lng="151.209656" type="restaurant"/>
<marker name="Red Lantern" address="60 Riley Street, Darlinghurst, NSW"
lat="-33.874737" lng="151.215530" type="restaurant"/>
</markers>

Jika browser Anda tidak menampilkan data marker dari database Anda sebagai keluaran
XML, coba jalankan debug dengan menghilangkan baris di file yang menyetel header ke
tipe materi text/xml. Baris ini bisa menyebabkan browser Anda mencoba mem-parse
XML dan menyulitkan Anda melihat pesan debug.
Membuat peta
Bagian ini menampilkan cara mengembangkan contoh peta di Latihan ini menggunakan
JavaScript dan file XML keluaran.
.
Buat sebuah file baru dalam editor teks dan simpan sebagai index.html. Bacalah
bagian-bagian berikut untuk memahami kode yang bisa Anda tambahkan ke file ini.

Memuat file XML


Untuk memuat file XML ke dalam laman, Anda bisa memanfaatkan
objek XMLHttpRequest yang disediakan oleh browser. Objek ini memungkinkan Anda
mengambil file yang berada di domain yang sama dengan laman web yang meminta, dan
merupakan dasar pemrograman "AJAX".

Definisikan fungsi Anda sendiri untuk memuat file dan memanggil downloadUrl().
Fungsi mengambil dua parameter:
1. url menetapkan jalur ke file XML atau ke skrip PHP Anda yang membuat file, tergantung
pada apakah Anda ingin memperbarui file XML secara dinamis saat database berubah.
Peta di Latihan ini memanggil file XML statis untuk data marker.
Ini biasanya cara yang paling mudah untuk menempatkan file XML ini di dalam direktori
yang sama dengan file HTML sehingga Anda bisa mengacu padanya menurut nama file.
2. callback menunjukkan fungsi yang dipanggil skrip saat XML kembali ke JavaScript.
Kode di bawah ini menampilkan deklarasi fungsi.
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);
}
Catatan: Karena XMLHttpRequest asinkron, fungsi callback memulai
fungsi downloadURL berdasarkan ukuran file XML. Semakin besar file XML Anda,
semakin lama waktu yang dibutuhkan. Untuk alasan ini, sebaiknya jangan letakkan kode
apa pun setelah downloadUrl yang bergantung pada marker di dalam fungsi callback.
Sebagai gantinya, kode tersebut bisa dimasukkan di dalam fungsi callback.
Setelah memiliki fungsi yang sudah didefinisikan, Anda bisa memanggilnya dari kode,
dengan meneruskan nama file PHP dan fungsi callback Anda. Peta di Latihan ini
memanggil file XML statis untuk data marker, seperti dalam kode di bawah.

downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.x
ml', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
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'));

var text = document.createElement('text');


text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});

Membuat marker khusus


Kode berikut menampilkan cara menambahkan label khusus untuk marker Anda
dengan membuat larik terkait terlebih dulu. Ini mengaitkan label Anda dengan marker
string type: restaurant atau bar. Ini memudahkan referensi label saat Anda membuat
marker dari file XML.
var customLabel = {
restaurant: {
label: 'R'
},
bar: {
label: 'B'
}
};

Membuat marker dan jendela info


Saat membuat marker, Anda bisa mengambil label marker yang sesuai dengan
menggunakan key sebagai kunci untuk larik customLabel yang terkait. Teruskan
properti .label sebagai opsi konstruktor google.maps.Marker.
Berikutnya, buat HTML yang ingin Anda tampilkan di jendela info dengan
menggabungkan nama, alamat, dan tag HTML untuk menekankan nama.
Jika Anda menyimpan keterangan yang berformat HTML di database, Anda mungkin
harus menangani konversi entitas HTML dan terikat pada keluaran HTML tersebut.
Dengan menunggu sampai Anda telah mengambil setiap atribut secara terpisah di
JavaScript, Anda bebas bermain dengan HTML di sisi klien dan cepat mempratinjau
format baru.
Setelah membuat string HTML, kode di bawah menambahkan listener kejadian ke
marker yang menampilkan jendela info saat diklik.
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});

Menggabungkan semuanya
Buka file index.html di browser. Saat laman dimuat, fungsi initMap mempersiapkan
peta, kemudian memanggil fungsi downloadUrl. Fungsi ini menjalankan iterasi pada
semua elemen marker dan mengambil atribut nama, alamat, tipe, dan latLng untuk
setiap elemen marker.
Kode kemudian membuat marker, menambahkan marker pada peta, dan
menggabungkan jendela info ke setiap marker untuk menampilkan keterangan saat
diklik.

Informasi selengkapnya
Jika Anda ingin membuat plot marker pada peta menggunakan data lokasi Anda
sendiri, Anda bisa menggunakan layanan geocoding batch untuk mengonversi alamat
menjadi garis lintang dan garis bujur untuk marker Anda.

Anda mungkin juga menyukai