Problem with the google map Markers
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 + "<开发者_StackOverflow社区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>
<!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>';
?>
I have done something that's almost identical to what you are trying to achieve. My solution works perfectly, but I have done it in a completely different way.
I have all my latitude and longitute stored next to placenames etc. in my database as you have, but this is how I process them:
selectPlaces.php
<?php
include 'data.php';
mysql_connect($host, $user, $pass) or die ("Wrong Information");
mysql_select_db($db) or die("Wrong Database");
$result = mysql_query("SELECT * FROM reseller_addresses") or die ("Broken Query");
$letter = 'A';
while($row = mysql_fetch_array($result)){
$placeName = stripslashes($row['b_name']);
$placeCode = stripslashes($row['b_code']);
$placeTown = stripslashes($row['b_town']);
$places .= "<strong>$letter:</strong> $placeName, $placeTown, $placeCode<br>";
$placeLatLng = stripslashes($row['latlng']);
$hidden .= "$placeLatLng<br>";
$letter++;
}
mysql_close();
?>
index.html
<?php
include 'private/selectPlaces.php'
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<link rel="stylesheet" type="text/css" href="hallets-style.css" />
<script type="text/javascript">
function initialize() {
var cent = new google.maps.LatLng(51.673606, -3.11542);
var myOptions = {
zoom: 10,
center: cent,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var locations = document.getElementById("hidden").innerHTML.toLowerCase();
var spLocations = locations.split("<br>");
var spLength = (spLocations.length)-1;
var letter = "A";
for(var i=0; i<spLength; i++){
var formLocations = spLocations[i].split(",");
var image = "http://www.google.com/intl/en_ALL/mapfiles/marker_black"+letter+".png";
var myLatLng = new google.maps.LatLng(formLocations[0], formLocations[1]);
var marker = new google.maps.Marker({
position: myLatLng,
icon: image,
map: map
});
letter = String.fromCharCode(letter.charCodeAt() + 1);
}
}
</script>
</head>
</head>
<body onload="initialize()">
<div id="wrapper">
<div id="left">
<div id="map_canvas"></div>
</div>
<div id="right">
<div id="menu">
<div
<div id="content"><?php echo $places; ?>
</div>
</div>
</div>
<div id="hidden" style="display:none"><?php echo $hidden; ?></div>
</body>
</html>
What's happening here is I'm just outputting all my co-ordinates and places to a hidden div on my page, which is then read by javascript via getElementById. It's easy to pass the variables over to google marker code then.
Hopefully this helps you Cheers, Dan
加载中,请稍侯......
精彩评论