Displaying markers on google map from mysql
I have lng / lat values stored in mysql and trying to display them on google map ...
<?php
require ('db_info.php');
$connection = mysql_connect($server, $username, $password);
$db_selected = mysql_select_db($database, $connection);
?>
<html lang="en">
{% include 'components/head.html' %}
<body>
<div id = "wrapper">
{% include 'components/nav-account.html' %}
<div id = "page-wrapper">
{% include 'components/alerts.html' %}
<div class = "container">
<style type = "text/css">
html, body, #map-canvas{ height:100%;
margin:0;
padding:0;
}
</style>
<script type = "text/javascript"
src = "https://maps.googleapis.com/maps/api/js?
key=AIzaSyB76xBqfQdgOLV77VK3JZ09vWwk8brkMFs">
</script>
<script type="text/javascript">
function addMarker(lat, lng){
var pt = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: pt,
map: map
});
}
function initialize() {
var mapOptions = {
center: {lat: 54.872128, lng: -6.284874},
zoom: 15
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
<?php
$query = mysql_query("select * from tester") or die(mysql_error());
while($row = mysql_fetch_array($query)){
$lat = $row['lat'];
$lng = $row['lng'];
echo ("addMarker($lat, $lng)");
}
?>
</script>
<div id="map-canvas" style="height:600px; width:600px;
margin-top:100px; margin-bottom: 100px;
">
</div>
</div>
{% include 'components/footer.html' %}
</div>
</div>
</body>
</html>
Currently the map is not displayed at all, but that was before I tried to get information from the database. Any help would be greatly appreciated!
+3
source to share
1 answer
You need to move the call to addMarker inside the initialization function. There is no map before the initialization call, so there is no way to add a marker.
I have not tested your code for syntax. you also need a javascript global variable called map ... var map = null; This should be outside of the initialization call, then cut the var map inside and use map = instead
<?php
require ('db_info.php');
$connection = mysql_connect($server, $username, $password);
$db_selected = mysql_select_db($database, $connection);
?>
<html lang="en">
{% include 'components/head.html' %}
<body>
<div id = "wrapper">
{% include 'components/nav-account.html' %}
<div id = "page-wrapper">
{% include 'components/alerts.html' %}
<div class = "container">
<style type = "text/css">
html, body, #map-canvas{ height:100%;
margin:0;
padding:0;
}
</style>
<script type = "text/javascript"
src = "https://maps.googleapis.com/maps/api/js?
key=AIzaSyB76xBqfQdgOLV77VK3JZ09vWwk8brkMFs">
</script>
<script type="text/javascript">
var map = null;
function addMarker(lat, lng){
var pt = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: pt,
map: map
});
}
function initialize() {
var mapOptions = {
center: {lat: 54.872128, lng: -6.284874},
zoom: 15
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
<?php
$query = mysql_query("select * from tester") or die(mysql_error());
while($row = mysql_fetch_array($query)){
$lat = $row['lat'];
$lng = $row['lng'];
echo "addMarker($lat, $lng);";
}
?>
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas" style="height:600px; width:600px;
margin-top:100px; margin-bottom: 100px;
">
</div>
</div>
{% include 'components/footer.html' %}
</div>
</div>
</body>
0
source to share