Menampilkan Marker pada Peta dari Database MySQL

Kali ini saya ingin berbagi bagaimana menampilkan marker, serta marker cluster pada peta berdasarkan data koordinat yang ada pada database.

Database yang akan kita gunakan adalah MySQL.

yak langsung saja.

Pertama buatlah sebuah database dengan nama rumah makan dan tabel rm seperti ini,

1

Setelah itu kita coba isi beberapa data berikut.

INSERT INTO `rumah_makan` (`id`, `nama`, `lat`, `lng`)
VALUES
(NULL, ‘Rumah Makan pindang Sofyan titin’, ‘-2.978359’, ‘104.7377505’), (NULL, ‘RM Sederhana’,  ‘-2.981686’, ‘104.7543123’), (NULL, ‘Martabak HAR Harbess’,  ‘-2.9803842’, ‘104.7546556’), (NULL, ‘RM Pagi Sore’,  ‘-2.9781878’, ‘104.7541675’), (NULL, ‘RM Putri Minang’,  ‘-2.9299863’, ‘104.7120108’);

2.JPG

Selanjutnya buat file map.php, lalu salin kode berikut;

Menampilkan marker berdasarkan database

window.onload=initMap;

var nama = [

<?php
$jum = mysql_query(“SELECT COUNT(id) AS bid FROM rm”);
$data2 = mysql_fetch_array($jum);
$query = mysql_query(“select * from rm”);
$a=0;
while ($data = mysql_fetch_array($query))
{
$a+=1;
if($data2==$a)
echo (“‘”.$data[‘nama’].”‘”);
else
echo (“‘”.$data[‘nama’].”‘,”);
}
?>

];

function initMap() {

var map = new google.maps.Map(document.getElementById(‘map’), {
zoom: 10,
center: {lat: -2.9549663, lng: 104.6929235}
});
var infoWindow = new google.maps.InfoWindow;
//fungsi untuk menunjukkan lokasi kita
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};

infoWindow.setPosition(pos);
infoWindow.setContent(‘Lokasi anda sekarang.’);
infoWindow.open(map);
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn’t support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}

var markers = locations.map(function(location, i) {
var aa = new google.maps.Marker({
position: location
});
google.maps.event.addListener(aa, ‘click’, function() {
infoWindow.setContent(‘Nama Rumah makan ‘+nama[i]+”);
infoWindow.open(map, aa);
});
return aa;
});

// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: ‘https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m&#8217;});
}
var locations = [

<?php
$jum = mysql_query(“SELECT COUNT(id) AS bid FROM rm”);
$data2 = mysql_fetch_array($jum);
$query = mysql_query(“select * from rm”);
$a=0;
while ($data = mysql_fetch_array($query))
{
$a+=1;
$lat = $data[‘lat’];
$lon = $data[‘lng’];
if($data2==$a)
echo (“{lat: “.$lat.”, lng: “.$lon.”}”);
else
echo (“{lat: “.$lat.”, lng: “.$lon.”},”);
}
?>

];

Berikut adalah hasilnya.

hasil

Selamat mencoba dan semoga bermanfaat 😀

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s