Cannot load Google map with php-mySQL query

php_newbie05 · July 22, 2013

Hi all.

I'm working on a website where the end user enters an ID number, the form is DataEntry2.php. When they click the submit button it goes to a php file that will go to the LookupResults.php file where it pulls the latitude and longitude for the ID entered in DataEntry2.php.

The LookupResults.php file also references a javascript file which brings in the Google Maps view of the latitude and longitude.

But it's not working, it brings in the Latitude and Longitude values from the mySQL database, but the Google Map appears with a question mark.

I think the issue is that it is not reading the values in the text boxes. But when I hard code a latitude and longitude (i.e. 30, -55) then it works. Maybe it's about timing, since I'm doing it all at the same time? I don't know.

Below is the code for each one. What am I doing wrong? Thank you in advance.

DataEntry2.php (where the end user enters the ID to look up and presses the Submit button)

<?php 
session_start(); 
//echo "You are logged in as: ".$_SESSION['myusername'];
if(!$_SESSION['loggedin']){
 header("Location: main.html");  
}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<link href="iphone-icon1.png" rel="apple-touch-icon">
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>Lookup Form</title>
</head>
<body>
<form action="LookupResults.php" method="post">

<br>
<br>
<b>Lookup Form</b><br>
<br>
<br>
<br>
ID: <input name="ID"><br>
<br>
<br>
<input type="submit">
</form>
</body></html>

map.js (brings in the Google Maps):

google.maps.visualRefresh = true;
(function() {
	window.onload = function() {

		var mapDiv = document.getElementById('map');

		var mapLat = document.getElementById('Lat');
		var mapLong = document.getElementById('Long');
		
		var latlng = new google.maps.LatLng(mapLat, mapLong);


		var options = {
			center: latlng,
			zoom: 20,
			mapTypeId: google.maps.MapTypeId.SATELLITE,
			mapTypeControl: true,
			backgroundColor: '#fff',
			mapTypeControlOptions: {
				style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
			},

			scaleControl: true
		};

		var map = new google.maps.Map(mapDiv, options);

		// Adding a marker to the map
		var marker = new google.maps.Marker({
		position: new google.maps.LatLng(mapLat, mapLong),
		map: map,
		});
	}
})();

LookupResults.php (Displays the ID, latitude, longitude and the Google map):

<?php 
session_start(); 
//echo "You are logged in as: ".$_SESSION['myusername'];
if(!$_SESSION['loggedin']){
 header("Location: main.html");  
}
$host="####"; // Host name 
$username="####"; // Mysql username 
$password="####"; // Mysql password 
$db_name="####"; // Database name 
$tbl_name="myTable"; // Table name 
// Connect to server and select database. 
mysql_connect("$host", "$username", "$password")or die("cannot connect"); 
mysql_select_db("$db_name")or die("cannot select DB"); 
$ID=$_POST['ID'];
$sql= "Select ID,Latitude,Longitude  from myTable Where ID = $ID";
$result = mysql_query($sql);

$row=mysql_fetch_array($result);
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<link href="iphone-icon1.png" rel="apple-touch-icon">
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>Lookup Form</title>
		<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
<form>
<br>
<br>
<b>Lookup Form</b><br>
<br>
<br>
<br>
  ID: <input type="text"  input name = "ID" input id = "ID" value="<?php echo $row[ID]?>"/> </br><br>
  Lat: <input type="text" input name = "Lat" input id = "Lat" value="<?php echo $row[Latitude]?>"/> </br><br>
  Long: <input type="text" input name = "Long" input id = "Long" value="<?php echo $row[Longitude]?>"/> </br>
  					<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript" src="js/map.js"></script> 
<div id="details">
		<div id="map"></div>
</form>
</body></html>

kicken · July 22, 2013

		var mapLat = document.getElementById('Lat');
		var mapLong = document.getElementById('Long');
		
		var latlng = new google.maps.LatLng(mapLat, mapLong);

mapLat and mapLong reference the elements there, not the values contained within them. You need to add .value to that to get the value of those elements

var mapLat = document.getElementById('Lat').value;

php_newbie05 · July 22, 2013

Thank you that was it! I've been looking at this code ALL day.

Sign In

Cannot load Google map with php-mySQL query

Recommended Posts

php_newbie05

Link to comment

Share on other sites

kicken

Link to comment

Share on other sites

php_newbie05

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information