My google maps API code is not doing the map markers correctly. For some odd reason it will throw the map marker on there but not in the correct spot at all. Its longitude seems to be correct but the latitude doesnt seem to be there. It just seems to throw the marker on the edge of the map. Also when you click on them instead of showing the information it just Zooms too far and the map disappears. Here is what I have which I got off the google API Documentation:
Index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Page Title</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=myKey-dbBRD8yUxCv4Esyhw4vpb86bE3mijaBS3Fcz1Rq_adaGcRea0Mlr9lNqAJw"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(39.8163, -98.55762), 4);
map.setUIToDefault();
GDownloadUrl("markerData.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var Date = markers[i].getAttribute("Date");
var Time = markers[i].getAttribute("Time");
var Size = markers[i].getAttribute("Size");
var City = markers[i].getAttribute("City");
var State = markers[i].getAttribute("State");
var Population = markers[i].getAttribute("Population");
var Comments = markers[i].getAttribute("Comments");
var point = new GLatLng(parseFloat(markers[i].getAttribute("Latitude")), parseFloat(markers[i].getAttribute("Longitude")));
var marker = createMarker(point, Date, Time, Size, City, State, Population, Comments);
map.addOverlay(marker);
}
});
}
}
function createMarker(point, Date, Time, Size, City, State, Population, Comments) {
var marker = new GMarker(point);
var html = "Date:" + Date + "<br />Time:" + Time + "<br />Size:" + Size + "<br />City:" + City + "<br />State:" + State + "<br />Populaton:" + Population + "<br />Comments" + Comments ;
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 750px; height: 500px"></div>
</body>
</html>
markerData.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php
require("dbinfo.php");
function parseToXML($htmlStr){
$xmlStr=str_replace('<','<',$htmlStr);
$xmlStr=str_replace('>','>',$xmlStr);
$xmlStr=str_replace('"','"',$xmlStr);
$xmlStr=str_replace("'",''',$xmlStr);
$xmlStr=str_replace("&",'&',$xmlStr);
return $xmlStr;
}
// Opens a connection to a MySQL server
$connection=mysql_connect ("database", $username, $password);
if (!$connection) {
die('Not connected : ' . mysql_error());
}
// Set the active MySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
die ('Can\'t use db : ' . mysql_error());
}
// Select all the rows in the markers table
$query = "SELECT * FROM mapData WHERE 1";
$result = mysql_query($query);
if (!$result) {
die('Invalid query: ' . mysql_error());
}
header("Content-type: text/xml");
// Start XML file, echo parent node
echo '<markers>';
// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
// ADD TO XML DOCUMENT NODE
echo '<marker ';
echo 'Date="' . $row['Date'] . '" ';
echo 'Time="' . $row['Time'] . '" ';
echo 'Size="' . $row['Size'] . '" ';
echo 'City="' . $row['City'] . '" ';
echo 'State="' . $row['State'] . '" ';
echo 'Population="' . $row['Population'] . '" ';
echo 'Latitude="' . $row['Latitude'] . '" ';
echo 'Longitude="' . $row['longitude'] . '" ';
echo 'Comments="' . $row['Comments'] . '" ';
echo '/>';
}
// End XML file
echo '</markers>';
?>
