CODEWITHSUNDEEP
phpjavascriptgoogle-mapswamp
user1844654
user1844654

Reputation: 133

Google map is not displayed using php

I have a php code which gets location information from database (test) and table name manu which is created using the phpmyadmin in wamp and display those locations on map using markers. Location details in the sense latitude and longitude value.

UPDATED

<?
$dbname            ='test'; //Name of the database
$dbuser            =''; //Username for the db
$dbpass            =''; //Password for the db
$dbserver          ='localhost'; //Name of the mysql server

$dbcnx = mysql_connect ("$dbserver", "$dbuser", "$dbpass");
mysql_select_db("$dbname") or die(mysql_error());
 ?>


 <html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 <style type="text/css">
  body { font: normal 10pt Helvetica, Arial; }
 #map { width: 350px; height: 300px; border: 0px; padding: 0px; }
 </style>
 <script src="http://maps.google.com/maps/api/js?v=3&sensor=false"        type="text/javascript" ></script>
 <script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript">

  var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
  new google.maps.Size(32, 32), new google.maps.Point(0, 0),
  new google.maps.Point(16, 32));
  var center = null;
  var map = null;
  var currentPopup;
  var bounds = new google.maps.LatLngBounds();
  function addMarker(lat, lng, info) {
  var pt = new google.maps.LatLng(lat, lng);
  bounds.extend(pt);
  var marker = new google.maps.Marker({
  position: pt,
  icon: icon,
  map: map
  });
  var popup = new google.maps.InfoWindow({
  content: info,
  maxWidth: 300
  });

   google.maps.event.addListener(marker, "click", function() {
 if (currentPopup != null) {
   currentPopup.close();
  currentPopup = null;
  }
   popup.open(map, marker);
  currentPopup = popup;
 });
 google.maps.event.addListener(popup, "closeclick", function() {
 map.panTo(center);
  currentPopup = null;
 });
 }
 function initMap() {
 map = new google.maps.Map(document.getElementById("map"), {
 center: new google.maps.LatLng(0, 0),
  zoom: 14,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  mapTypeControl: false,
  mapTypeControlOptions: {
  style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
  },
  navigationControl: true,
  navigationControlOptions: {
  style: google.maps.NavigationControlStyle.SMALL
  }
   });


 $.getJSON('googlescript.php', function(items)
 {
 for (var i = 0; i < items.length; i++) 
 {
 (function(item) 
 {
 addMarker(item.lat, item.long, item.name + ' ' + item.desc);
 })(items[i]);
 }

 });


 center = bounds.getCenter();
  map.fitBounds(bounds);
 }

  </script>
  </head>
  <body onload="initMap()" style="margin:0px; border:0px; padding:0px;">
   <div id="map"></div>
  </body>
   </html>

googlescript.php file code :

   <?php

   $dbname            ='test'; //Name of the database
   $dbuser            =''; //Username for the db
   $dbpass            =''; //Password for the db
   $dbserver          ='localhost'; //Name of the mysql server
   $tbl_name          ='manu';

   $dbcnx = mysql_connect ("$dbserver", "$dbuser", "$dbpass");
   mysql_select_db("$dbname") or die(mysql_error());

   $query = mysql_query("SELECT * FROM manu")or die(mysql_error());

   header('Content-Type: application/json');

   $rows = array();
   while ($row = mysql_fetch_array($query))
   {
    $rows[] = $row;
   }
  echo json_encode($rows);
  exit;
   ?>

Upvotes: 3

Views: 2988

Answers (1)

Dipesh Parmar
Dipesh Parmar

Reputation: 27364

Html Page

body onload="initMap()" //you forget to close it.

div id="map"

Made below change in html file. 

script src="http://maps.google.com/maps/api/js?v=3&sensor=false"    type="text/javascript"
script type="text/javascript" src="js/jquery.js"
script type="text/javascript">
    var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
    new google.maps.Size(32, 32), new google.maps.Point(0, 0),
    new google.maps.Point(16, 32));
    var center = null;
    var map = null;
    var currentPopup;
    var bounds = new google.maps.LatLngBounds();
    function addMarker(lat, lng, info)
    {
        var pt = new google.maps.LatLng(lat, lng);
        bounds.extend(pt);
        var marker = new google.maps.Marker(
        {
            position: pt,
            icon: icon,
            map: map
        });
        var popup = new google.maps.InfoWindow(
        {
            content: info,
            maxWidth: 300
        });



    google.maps.event.addListener(marker, "click", function()
    {
        if (currentPopup != null)
        {
            currentPopup.close();
            currentPopup = null;
        }
        popup.open(map, marker);
        currentPopup = popup;
    });
    google.maps.event.addListener(popup, "closeclick", function()
    {
        map.panTo(center);
        currentPopup = null;
    });
}




function initMap()
{
    map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(0, 0),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false,
        mapTypeControlOptions:
        {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
        },
        navigationControl: true,
        navigationControlOptions:
        {
        style: google.maps.NavigationControlStyle.SMALL
        }
    });



// getjson code goes here which is as below because i was unable to format it here so i wrote it downward.

center = bounds.getCenter();
map.fitBounds(bounds);




}
/script>

$.getJSON('googlescript.php', function(items)
{
for (var i = 0; i < items.length; i++)
{
(function(item)
{
addMarker(item.lat, item.long, item.name + ' ' + item.desc);
})(items[i]);
}

});

I have used $.getJSON('googlescript.php', so you need to create a googlescript.php file and paste below code in it. 

$query = mysql_query("SELECT * FROM manu")or die(mysql_error());

header('Content-Type: application/json');

$rows = array();
while ($row = mysql_fetch_array($query))
{
    $rows[] = $row;
}
echo json_encode($rows);
exit;

?>

Now check it in action and I'm sure you will get result that you wanted. Do not forget to change jquery path and change database connection setting and please place jquery path proper.

Upvotes: 4

Related Questions