I'm facing a problem to display the random locations around the location are fetching from mysql, the method found Here. and its working prefect when i give value for lat and lng directly ,but in my code after using mysql data not able to display the random location on map ,google map displaying only the location from mysql as shown in the picture. so i wish someone can help me about my problem.
the database and data define as:
CREATE TABLE IF NOT EXISTS `map` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` text NOT NULL,
`desc` text NOT NULL,
`lat` text NOT NULL,
`lon` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;
--
-- Dumping data for table `map`
--
INSERT INTO `poi_example` (`id`, `name`, `desc`, `lat`, `lon`) VALUES
(1, '100 Club', 'Oxford Street, London W1<br/>3 Nov 2010 : Buster Shuffle<br/>', '51.514980', '-0.144328'),
(2, '93 Feet East', '150 Brick Lane, London E1 6RU<br/>7 Dec 2010 : Jenny & Johnny<br/>', '51.521710', '-0.071737'),
(3, 'Adelphi Theatre', 'The Strand, London WC2E 7NA<br/>11 Oct 2010 : Love Never Dies', '51.511010', '-0.120140'),
(4, 'Albany, The', '240 Gt. Portland Street, London W1W 5QU', '51.521620', '-0.143394'),
(5, 'Aldwych Theatre', 'Aldwych, London WC2B 4DF<br/>11 Oct 2010 : Dirty Dancing', '51.513170', '-0.117503'),
(6, 'Alexandra Palace', 'Wood Green, London N22<br/>30 Oct 2010 : Lynx All-Nighter', '51.596490', '-0.109514');
and the php file for displaying the map:
<?php
$conn = mysql_connect("localhost", "hani", "hani") or die(mysql_error());
mysql_select_db("map4") or die(mysql_error());
?>
<?php
$conn = mysql_connect("localhost", "hani", "hani") or die(mysql_error());
mysql_select_db("map4") or die(mysql_error());
?>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps</title>
<style type="text/css">
body { font: normal 10pt Helvetica, Arial; }
#map { width: 1300px; height: 600px; border: 0px; padding: 0px; }
</style>
<script src="http://maps.google.com/maps/api/js?key=key=loadMap&sensor=false" type="text/javascript"></script>
<script type="text/javascript">
//Sample code written by August Li
var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
new google.maps.Size(320, 320), new google.maps.Point(0, 0),
new google.maps.Point(16, 32));
var center = null;
var map = null;
var currentPopup;
var bounds = new google.maps.LatLngBounds();
function addMarker(lat, lng, info) {
var pt = new google.maps.LatLng(lat, lng);
bounds.extend(pt);
var marker = new google.maps.Marker({
position: pt,
icon: icon,
map: map
});
var popup = new google.maps.InfoWindow({
content: info,
maxWidth: 300
});
google.maps.event.addListener(marker, "click", function() {
if (currentPopup != null) {
currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
google.maps.event.addListener(popup, "closeclick", function() {
map.panTo(center);
currentPopup = null;
});
}
// random location method start from there
// random location method end there
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(0, 0),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN
}
});
<?php
$query = mysql_query("SELECT * FROM map")or die(mysql_error());
while($row = mysql_fetch_array($query))
{
$name = $row['name'];
$lat = $row['lat'];
$lon = $row['lon'];
$desc = $row['desc'];
echo("addMarker($lat, $lon, '<b>$name</b><br />$desc');\n");
}
?>
center = bounds.getCenter();
map.fitBounds(bounds);
}
</script>
</head>
<body onload="initMap()" style="margin:0px; border:0px; padding:0px;">
<div id="map"></div>
</body>
</html>
