Link to home
Start Free TrialLog in
Avatar of syedasimmeesaq
syedasimmeesaqFlag for United States of America

asked on

Google map shows blank page

I went through numerous tutorials over last few days and I registered my site and got API but I am getting a blank page no matter what tutorial I try. However if I just try first example (very basic one from google) that works fine. Which means my API is good. please find my code below.

Thanks in advance
<html>
<head>
<title>Who locations in London</title>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&source=uds-msw&key=MY API KEY"
    type="text/javascript"></script>
</head>
<body>
<p><strong>Who-locations in London</strong></p>
<div id="map" style="width: 800px; height: 600px"></div> 
<script type="text/javascript">
//<![CDATA[
 
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.setCenter(new GLatLng(51.512161, -0.14110), 11, G_NORMAL_MAP);
 
// Creates a marker whose info window displays the given number
function createMarker(point, number)
{
var marker = new GMarker(point);
// Show this markers index in the info window when it is clicked
var html = number;
GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html);});
return marker;
};
 
<?php
$link = mysql_connect("localhost", "user", "pass") or die("Could not connect: " . mysql_error());
mysql_selectdb("[db_googlemap]",$link) or die ("Can\'t use dbmapserver : " . mysql_error());
 
$result = mysql_query("SELECT * FROM markers",$link);
if (!$result)
{
echo "no results ";
}
while($row = mysql_fetch_array($result))
{
echo "var point = new GLatLng(" . $row['lat'] . "," . $row['lon'] . ");\n";
echo "var marker = createMarker(point, '" . addslashes($row['address']) . "');\n";
echo "map.addOverlay(marker);\n";
echo "\n";
}
 
mysql_close($link);
?>
 
//]]>
</script>
 
</body>
</html>

Open in new window

Avatar of david-navertech
david-navertech
Flag of United Kingdom of Great Britain and Northern Ireland image

This is may be a long shot, as I have limited knowledge of the Google Maps API.  I had had a similar problem recently which was due to the <body> onload event being missed out.

I noticed your code example doesn't have the Javascript in the <head> section.  Never seen it done this way, but you could try the amended code below and see if it makes any difference.
<html>
<head>
<title>Who locations in London</title>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&source=uds-msw&key=MY API KEY"
    type="text/javascript"></script>
 
<script type="text/javascript">
//<![CDATA[
     function load() {
      if (GBrowserIsCompatible()) {
 
	var map = new GMap2(document.getElementById("map"));
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
	map.addControl(new GScaleControl());
	map.setCenter(new GLatLng(51.512161, -0.14110), 11, G_NORMAL_MAP);
 
	// Creates a marker whose info window displays the given number
	function createMarker(point, number)
	{
	var marker = new GMarker(point);
	// Show this markers index in the info window when it is clicked
	var html = number;
	GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html);});
	return marker;
	};
 
	<?php
	$link = mysql_connect("localhost", "user", "pass") or die("Could not connect: " . mysql_error());
	mysql_selectdb("[db_googlemap]",$link) or die ("Can\'t use dbmapserver : " . mysql_error());
 
	$result = mysql_query("SELECT * FROM markers",$link);
	if (!$result)
	{
	echo "no results ";
	}
	while($row = mysql_fetch_array($result))
	{
	echo "var point = new GLatLng(" . $row['lat'] . "," . $row['lon'] . ");\n";
	echo "var marker = createMarker(point, '" . addslashes($row['address']) . "');\n";
	echo "map.addOverlay(marker);\n";
	echo "\n";
	}
 
	mysql_close($link);
	?>
 
       }
     }
 
//]]>
</script>
 
</head>
<body onload="load()" onunload="GUnload()">
<p><strong>Who-locations in London</strong></p>
<div id="map" style="width: 800px; height: 600px"></div>  
</body>
</html>

Open in new window

Avatar of syedasimmeesaq

ASKER

Thank you for your response. but it didn't work.
ASKER CERTIFIED SOLUTION
Avatar of syedasimmeesaq
syedasimmeesaq
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
why would this not work in query

$result = mysql_query("SELECT * FROM locations where city=London",$link);