gmap tourism

<?php
/********************************
FILENAME : gmap.tourism.php
PURPOSE  : plot various marker on map
CREATE BY: CAHYA DSN
CREATE ON: 2014-07-27
*********************************

CREATE DATABASE IF NOT EXISTS `gmap`;
USE gmap;

DROP TABLE IF EXISTS `kategori`;
CREATE TABLE `kategori` (
  `id` tinyint UNSIGNED NOT NULL AUTO_INCREMENT,
  `nama` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM;

INSERT INTO `kategori`(`nama`)
VALUES ('wisata'),('restoran');

DROP TABLE IF EXISTS `lokasi`;
CREATE TABLE `lokasi` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `kategori_id` tinyint UNSIGNED NOT NULL,
  `nama` varchar(255) DEFAULT NULL,
  `lat` FLOAT,
  `lng` FLOAT,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM;

INSERT INTO `lokasi`(`kategori_id`,`nama`,`lat`,`lng`)
VALUES
(1,'wisata1',40.756054,-73.986951),
(2,'restoran1',47.620973,-102.347276),
(1,'wisata2',37.775206,-122.419209);
*/
?>
<!doctype html>
<html>
  <head>
    <title>GMap Tourism</title>
    <script type="text/javascript"   src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type='text/javascript' language='javascript'>
(function() {
// Creating an array that will contain all of our 'lokasi' icons
   var lokasiIcons = [];
   lokasiIcons['restoran'] = new google.maps.MarkerImage(
     'http://mapicons.nicolasmollet.com/wp-content/uploads/mapicons/shape-default/color-8c4eb8/shapecolor-color/shadow-1/border-dark/symbolstyle-white/symbolshadowstyle-dark/gradient-no/restaurant.png',
     new google.maps.Size(48, 48),
     null,
     new google.maps.Point(24, 24)
   );
   lokasiIcons['wisata'] = new google.maps.MarkerImage(
     'http://mapicons.nicolasmollet.com/wp-content/uploads/mapicons/shape-default/color-8c4eb8/shapecolor-color/shadow-1/border-dark/symbolstyle-white/symbolshadowstyle-dark/gradient-no/hostel_0star.png',
     new google.maps.Size(48, 48),
     null,
     new google.maps.Point(24, 24)
   );
   window.onload = function() {
   // Creating a map
     var options = {
       zoom: 3,
       center: new google.maps.LatLng(37.09, -95.71),
       mapTypeId: google.maps.MapTypeId.ROADMAP
     };
     var map = new google.maps.Map(document.getElementById('map'), options);
     // Creating a JSON object with weather data
<?php
// database configuration
$dbhost='localhost';
$dbuser='root';
$dbpass='';
$dbname='gmap';
// database connection
$db=new mysqli($dbhost,$dbuser,$dbpass,$dbname);
$sql="
SELECT a.nama, a.lat, a.lng, b.nama AS kategori
FROM lokasi a
JOIN kategori b ON b.id=a.kategori_id";
$result=$db->query($sql);
$data=array();
while($record=$result->fetch_assoc()){
  $data[]=$record;
}
echo '   var dataLokasi = '.json_encode(array('lokasi'=>$data));
?>
     // Looping through the 'lokasi' array in 'dataLokasi'
     for (var i = 0; i < dataLokasi.lokasi.length; i++) {
       // creating a variable that will hold the current 'lokasi' object
       var lokasi = dataLokasi.lokasi[i];
       // Creating marker
       var marker = new google.maps.Marker({
         position: new google.maps.LatLng(lokasi.lat, lokasi.lng),
         map: map,
         icon: lokasiIcons[lokasi.kategori]
       });
     }
   }
})();
</script>
<body>
  <div id='map' style="width:600px;height:400px;display:block"></div>
</body>
</html>