I did what you advised, map is displayed correctly, but have no markers. Maybe I've made some mistakes? Code:
`
mysql_connect("xxx", "xxx", "xxx") or die("Error connecting to database: ".mysql_error());
mysql_select_db("xxx") or die(mysql_error());
$querz = "SELECT * FROM markers";
$result = mysql_query($querz)
or die("Query failed");
while ($row = mysql_fetch_array($result)) {
$lat = "$row[lat]";
$lng = "$row[lng]";
}
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="iso-8859-2">
<title>Simple icons</title>
<style>
html, body, #map-canvas {
height: 600px;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(52, 19)
}
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var image = '20_blue.png';
var myLatLng = new google.maps.LatLng(<?php print($lat); ?>,<?php print($lng); ?>);
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
/html>`
my question: is there any way to display markers from Mysql database instead of use specific lat and lng , like I did in the code above ? How ? I tried google tutorials but it had some bugs (I' ve already asked another question about it).
2 Answers 2
You need a server side language to connect to your database (in your case I advise you to use PHP which is the simplest). You will be able to select your datas from the database with PDO.
Edit:
You need to write your php loop inside your javascript code. Here you are adding only one marker to your map, the last one you selected with your query. Also make sure the table is not empty.
You can do something like that:
<script type="text/javascript">
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(52, 19)
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var image = '20_blue.png';
<?php while($row = mysql_fetch_array($result)): ?>
var myLatLng = new google.maps.LatLng(<?php echo $row['lat']; ?>, <?php echo $row['lon']; ?>);
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
<?php endwhile; ?>
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
3 Comments
call lat and long from DB and assing them to
$lat
$long
and then you can call them like
var myLatLng = new google.maps.LatLng(<?php print($lat); ?>,<?php print($long); ?>);
This is just an idea, you can turn it as per your needs.