3

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; ?>
Improve this question
13
  • 2
    have u check for if there is any error? use mozila addon firebug to check it. Commented Dec 5, 2012 at 9:54
  • [Wed Dec 05 15:14:39 2012] [error] [client 127.0.0.1] File does not exist: C:/wamp/www/favicon.ico [Wed Dec 05 15:29:03 2012] [error] [client 127.0.0.1] File does not exist: C:/wamp/www/favicon.ico [Wed Dec 05 15:29:03 2012] [error] [client 127.0.0.1] File does not exist: C:/wamp/www/favicon.ico This is what I am getting in apache error log Commented Dec 5, 2012 at 10:00
  • 1
    try to check in firebug..i was facing same problem before....even if there is missing any file or error in other code google map wont be load so try to find error else if no error in here.. Commented Dec 5, 2012 at 10:01
  • 1
    okay, u must have firefox mozila right.? okay now search for firebug and install it in firefox mozila..then check if there's error show in console... dont worry u will see bug icon just click it firebug window will shows up and just click on console and enable it..do it then tell us what error firebug shows.. Commented Dec 5, 2012 at 10:11
  • 1
    working on ur problem its nearly done once finish i will post it here there is minor code u will need to add...hang on for while bro. Commented Dec 5, 2012 at 10:41

1 Answer 1

Reset to default
4

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

11 Comments

Thanks let me try and will accept your answer if it works.. Thanks again
hey keep in mind about variable u have used lon where as i used long for longitude so change it in getJson accordingly.. and hey you are always welcome.
sorry for inconvenience i was unable to format GetJson code so i wrote it downside of js put getjson code by replacing comment inside initMap function...have u tried it..it will work cause i got that running with info window content.
"Change jquery path and change database connection". What does it mean ?
its means i have used jquery javascript lib to do this task...and database connection change means change localhost and root and database name and etc...have u used jquery before? are u aware of jquery? if not then try it now its very powerful js lib.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.