• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1044
  • Last Modified:

Coding Google Map latitude and longitude from database

I seem to come close to resolving this, but then can't actually get to the answer. Pardon me if I have missed the solution somewhere, but I can't seem to make this work. I have an application to search restaurants, and when you click on the restaurant name, I want to display a google map and a marker and an address window.

I found code to do this - when the lat/long is hard-coded. I can't figure out how to pass the lat/long to the code from my database. I have defined a variable in my code for lat/long - but can't get the right syntax for the javascript to use it. Again, I apologize if I missed this answer somewhere. My current code is pasted below. The second DIV is a box where i want to redisplay the marker information and can successfully do that from my mysql variable that I pass to this code - but only if the javascript successfully executes (by having hard-coded info in there).
<html>
<head>
  <meta http-equiv="content-type"
 content="text/html; charset=utf-8">
  <title>Google Maps JavaScript API Example</title>
  <script
 src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAgg34O2VpxilZWuaGCTjEWRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxR7fwovhx5-93XRmTM7DLy0zsDpGw&amp;sensor=false"
 type="text/javascript"></script>
  <script type="text/javascript">
function initialize() { if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_box"));
var lat = $lat;
var lon = $lon;
 
map.setCenter(new GLatLng(41.020290, -74.204491), 15);
map.openInfoWindow(map.getCenter(),
document.createTextNode("53 Godwin Ave Midland Park"));
map.setUIToDefault();
var marker = new GMarker(new GLatLng(41.020290, -74.204491));
map.addOverlay(marker);
}
}
  </script>
 
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_box"
 style="border: 5px solid rgb(144, 144, 144); width: 400px; height: 300px;"></div>
 
<div id="address"
style="border: 5px solid rgb(144, 144, 144); width: 400px; height: 50px; background-color: #FFFFFF">
</body>
</html>

Open in new window

0
mgerney
Asked:
mgerney
  • 5
  • 2
1 Solution
 
Richard QuadlingSenior Software DeverloperCommented:
I assume you have a .php file with something like this ...
<html>
<head>
  <meta http-equiv="content-type"
 content="text/html; charset=utf-8">
  <title>Google Maps JavaScript API Example</title>
  <script
 src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAgg34O2VpxilZWuaGCTjEWRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxR7fwovhx5-93XRmTM7DLy0zsDpGw&sensor=false"
 type="text/javascript"></script>
  <script type="text/javascript">
function initialize() { if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_box"));
 
<?php
echo <<< END_JS
var lat = 41.020290;
var lon = -74.204491;
var loc = "53 Godwin Ave Midland Park"
END_JS;
?>
 
map.setCenter(new GLatLng(lat, lon), 15);
map.openInfoWindow(map.getCenter(),document.createTextNode(loc));
map.setUIToDefault();
var marker = new GMarker(new GLatLng(lat, lon));
map.addOverlay(marker);
}
}
  </script>
 
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_box"
 style="border: 5px solid rgb(144, 144, 144); width: 400px; height: 300px;"></div>
 
<div id="address"
style="border: 5px solid rgb(144, 144, 144); width: 400px; height: 50px; background-color: #FFFFFF">
</body>
</html>

Open in new window

0
 
Richard QuadlingSenior Software DeverloperCommented:
Notice that all the hard-coded elements are now supplied as soft values from PHP.

If you had something like this ...
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAgg34O2VpxilZWuaGCTjEWRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxR7fwovhx5-93XRmTM7DLy0zsDpGw&sensor=false" type="text/javascript"></script>
<script type="text/javascript">
 
var map = null;
 
function initialize()
	{
	if (GBrowserIsCompatible())
		{
		map = new GMap2(document.getElementById("map_box"));
 
<?php
$a_MapData = array
	(
	'lat' => 41.020290,
	'lon' => -74.204491,
	'loc' => "53 Godwin's \ Ave Midland Park",
	);
echo 'updateMap(' . addcslashes(json_encode($a_MapData), "'\\") . ');';
?>
		}
	}
 
function updateMap(o_Data)
	{
	map.setCenter(new GLatLng(o_Data.lat, o_Data.lon), 15);
	map.openInfoWindow(map.getCenter(),document.createTextNode(o_Data.loc));
	map.setUIToDefault();
	map.addOverlay(new GMarker(new GLatLng(o_Data.lat, o_Data.lon)));
	}
</script>
 
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_box" style="border: 5px solid rgb(144, 144, 144); width: 400px; height: 300px;"></div>
<div id="address" style="border: 5px solid rgb(144, 144, 144); width: 400px; height: 50px; background-color: #FFFFFF">
</body>
</html>

Open in new window

0
 
Richard QuadlingSenior Software DeverloperCommented:
Oops Posted early.

If you have something like the above, then you could use AJAX to callback to the server to get the new coords ...

<?php
$a_MapData = array
      (
      'lat' => 41.020290,
      'lon' => -74.204491,
      'loc' => "53 Godwin's \ Ave Midland Park",
      );
header('application/javascript');
echo 'updateMap(' . addcslashes(json_encode($a_MapData), "'\\") . ');';
?>

I use prototype which automatically handles the calling of the JS function returned.

All nice and smooth.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
mgerneyAuthor Commented:
I am coding this as a "custom code" inside another program. I get the php variable by passing it from a previous "data" page. I'm not putting actual numbers in my php - its coming from the database:
<?php
$lat = qsrequest("Lat");
$lon = qsrequest("Lon");
$Address = qsrequest("Address");
?>
I can print these variables and verify what they contain the correct lat/long/and address associated with the result of a search of restaurants.

I thought I could just then pass them to the js like:

map.setCenter(new GLatLng(lat, lon), 15);

but that doesn't work. So in your example:

$a_MapData = array
        (
        'lat' => 41.020290,
        'lon' => -74.204491,
        'loc' => "53 Godwin's \ Ave Midland Park",
        );
echo 'updateMap(' . addcslashes(json_encode($a_MapData), "'\\") . ');';
?>
can I substitute $lat, $lon, and $loc for the actual numbers and then do the rest of the function? - I'm having a syntax problem, I think.

Hope I'm explaining this correctly.


0
 
Richard QuadlingSenior Software DeverloperCommented:
Try ...

$a_MapData = array
        (
        'lat' => $lat,
        'lon' => $lon,
        'loc' => $Address,
        );
echo 'updateMap(' . addcslashes(json_encode($a_MapData), "'\\") . ');';

0
 
mgerneyAuthor Commented:
Thanks so much! It took a little bit of fiddling around with how I accessed the php variables from my data page - but once I got that right, your code worked perfectly.
0
 
Richard QuadlingSenior Software DeverloperCommented:
Glad to have helped.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now