Menunjukkan Lokasi Map dari data MySQL

BY IN Google Map, PHP, Tips & Trik 6 COMMENTS

Kali ini kita akan mencoba menunjukkan beberapa lokasi dimana data latitude dan longitudenya kita ambil dari MySQL Database. Untuk kebutuhan ini, tentu saja kita akan menggunakan PHP untuk mengambil data2 dari database, kemudian data2 ini kita convert menjadi JSON, yang selanjutnya dibaca oleh AJAX. Pertama2 kita akan menggunakan iframe untuk menampilkan mapnya

<iframe width=”540″ height=”377″ frameborder=”0″ scrolling=”no” marginheight=”0″ marginwidth=”0″ src=”map.php?search=<?php echo $search?>”></iframe>

Dalam file map.php, kita ketikkan kode program berikut ini:

<html>
<head>
<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”></script>
<script type=”text/javascript” src=”scripts/jquery-1.4.3.min.js” ></script>
<script type=”text/javascript”>

var map;
var i;
var url;
var marker_icon= ‘home.png’;

function map_initialize(){
var start_position = new google.maps.LatLng(lat, lon);
var mapoption = {
zoom: 4,
center: start_position,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById(“map_canvas”),mapoption);
getData();
}

function putMarker(location){
tanda = new google.maps.Marker({
position: location,
map: map,
icon: marker_icon
});
}

function getData(){
url = “getdata.php?search=<?php echo $_GET[‘search’]?>”;
$.ajax({
url: url,
dataType: ‘json’,
cache: false,
success:
function(result){

for(i=0;i<result.position.length;i++)
{
var point = new google.maps.LatLng(
parseFloat(result.position[i].lat),
parseFloat(result.position[i].lon));
putMarker(point);
}
}
});
}

</script>

</head>
<body onload=”map_initialize()”>
<center>

<table border=0 width=600>
<tr><td>
<div id=”map_canvas” style=”width:540px; height:377px”></div>
</td>
</tr>
</table>
</body>
</html>

Penjelasan:

Saat dijalankan pertama kali, dia akan memanggil fungsi map_initialize untuk menginisialisasi peta dengan lokasi yang sudah dideklarasikan sebelumnya.
Kemudian akan dipanggil fungsi AJAX getData, dengan mengirimkan parameter tertentu yang bisa dibaca di file getdata.php nya nanti, dimana file ini akan mengirimkan nilai balik ke file map.php berupa nilai2 latitude dan longitude dalam format JSON.
Parameter JSON ini berbentuk array yang dapat kita baca dengan looping di dalam fungsi AJAX yang sama, untuk memanggil fungsi putMarker, yaitu fungsi yang digunakan untuk meletakkan marker di atas peta Google Map.

Berikut ini adalah isi dari file getdata.php

<?php

$result=mysql_query($sql);

$loopCount = 1;

$json = ‘{ ‘
. ‘”position” : [‘;

// build json string
while ($row = mysql_fetch_array($result)) {
$json .= ‘{ ‘
. ‘”lat” : “‘ . $row[‘lat’] . ‘”, ‘
. ‘”lon” : “‘ . $row[‘lon’] . ‘” ‘
. ‘}’;

// add comma if
if ($loopCount < $record_per_page) {
$json .= ‘, ‘;
$loopCount++;
}
}

$json .= ‘] ‘
. ‘}’;

echo $json;
?>

Selamat mencoba.




6 Comments

  1. iwan |

    mohon bimbinganx… kok gak bisa muncul petax iyaa.. pada udah saya kasih

    function map_initialize(){
    var start_position = new google.maps.LatLng(lat, lng);
    var sidoarjo = new google.maps.LatLng(-7.45205,112.718825);
    var mapoption = {
    zoom: 14,
    center: start_position,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    • contactwahyu |

      ini maksudnya cuman mau nampilin satu area aja yah? kalo tutorial saya itu untuk bisa ngambil dari database pake JSON