Google Map multiple position from Mysqli

เมษายน 08, 2561
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>Google Maps Multiple Markers</title>
  <script src="http://maps.google.com/maps/api/js?sensor=false"
          type="text/javascript"></script>
</head>
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

<script type="text/javascript">
<?php
$objConnect = mysqli_connect("localhost","root","password","test") or die("Error Connect to Database");

  $strSQL = "SELECT * FROM test ";
  $strSQL .="ORDER BY id asc";
  $objQuery  = mysqli_query($objConnect,$strSQL);
  $Num_Rows = mysqli_num_rows($objQuery);
 
     echo "var locations = [";
     while($objResult = mysqli_fetch_array($objQuery))
     {
        echo "['".$objResult['name'] . "'";
        echo  ",".$objResult['mapx']. "";
        echo  ",".$objResult['mapy']. "";
        echo  ",". $objResult['mapz']. "],";

       }
echo "];";
    ?>
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: new google.maps.LatLng(13.7352535,100.4592324),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var infowindow = new google.maps.InfoWindow();

  var marker, i;

  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));
  }
</script>
</body>
</html>



CREATE TABLE `test` (
  `id` int(100) NOT NULL,
  `name` char(100) NOT NULL,
  `mapx` char(100) NOT NULL,
  `mapy` char(100) NOT NULL,
  `mapz` char(100) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

INSERT INTO `test` (`id`, `name`, `mapx`, `mapy`, `mapz`) VALUES
(1, 'Bangkok', '13.7352535', '100.4592324', '4'),
(2, 'บางเขน', '13.8711951', '100.5660171', '12'),


แสดงความคิดเห็น

0 ความคิดเห็น