Friday, 22 July 2016

Friday, 8 January 2016

Multiple Location On A Single Map Using Php Mysql

                2 comments   



connection.php
<?php
$servername = "localhost";
$username = "root";
$password = "";
$databaseName = "multi_loaction";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $databaseName);
// Check connection
if (!$conn)
{
    die("Connection failed: " . mysqli_connect_error());
}
?>
index.php
<?php require('connection.php'); ?>
<!DOCTYPE html>
<html>
<head>
  <title>Multi Location</title>
  <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
  <script type="text/javascript">
  function initialize()
  {
     var locations =
     [
       <?php
       $counter=1;
       $result=mysqli_query($conn,"SELECT * FROM location");
       while($row=mysqli_fetch_array($result))
       {
       ?>
          ['<?php echo $row['address']; ?>', <?php echo $row['lattitude']; ?>,
            <?php echo $row['longitude']; ?>, <?php echo $counter++; ?>
          ],
       <?php
        }
       ?>
     ];
     var map = new google.maps.Map(document.getElementById('map_canvas'),
     {
        zoom: 10,
        center: new google.maps.LatLng(28.635308, 77.22496),
        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>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:100%;height:570px;"></div>
</body>
</html>

 Download working example here. In this example you can add location in database by address or by latitude, longitude. click If you select add location by address then its converted address corresponding latitude and longitude or if you select add location by latitude and longitude then its converted corresponding address and saved into database table.




Popular Posts

All Labels

Online User's

Total Pageviews

Translate