2

I am trying to query the MySQL database that has a table with firstname, longitude, latitude in it.

I want to get the longitude and latitude and display them as multiple markers with the firstname as a description.

However, when I try to load the HTML page it comes back empty. Any ideas why?

The content of my testmap.html looks as follows

<?php $z = array();
$n=0;
$link= new mysqli('localhost','root','');
    if($link->connect_error){
        die("Connection failed:" .$link->connect_error);
    }
mysqli_select_db($link,"blood_organ_donation");
echo "DB selected successfully";
$sqlperson= "SELECT firstname,latitude,longitude
                    FROM personprofile ";
$person=  mysqli_query($link,$sqlperson);       
while( $row =mysqli_fetch_array($person)){
  $y=array(); 

  $y[]=$row["fistname"];
  $y[]=$row["latitude"];
  $y[]=$row["longitude"];   
  $z[$n]=$y;
  $n++;
 }

 ?>

<html>
<head>
<script type="text/javascript">
//var locations = <?php echo json_encode($a);?>;
var locationsb = <?php echo json_encode($z);?>;
var map = new google.maps.Map(document.getElementById('map'), {
 zoom: 6,
 center: new google.maps.LatLng(22.00, 96.00),
 mapTypeId: google.maps.MapTypeId.ROADMAP
 });

 var infowindow = new google.maps.InfoWindow();
 var image = '/marker/map.png';
 // var image2 = '/marker/Map1.png';

var marker1, n;
for (n = 0; n < locationsb.length; n++) {  
marker1 = new google.maps.Marker({
position: new google.maps.LatLng(locationsb[n][1], locationsb[n][2]),
offset: '0',
icon: image2,
title: locationsb[n][4],
map: map       
});
google.maps.event.addListener(marker1, 'click', (function(marker1, n)
{
return function() {
infowindow.setContent(locationsb[n][0]);
infowindow.open(map, marker1);
}
})(marker1, n));
}

</script> 
<head>
<body id="map"> 
</body>
</html>
0

2 Answers 2

1

Just a couple of initial thoughts:

You are assigning all your markers to one single variable marker1 Initialize a JS array, then create the Google Maps Marker objects individually (preferably with a function that is going to return the marker object itself) and then add (push) this object into the JS array you created to hold the markers!

And make sure that lat and lng values are converted to float! If not, use the parseFloat function in JS!

1

You may want to look at Google's tutorial: Using MySQL and PHP with Google Maps, but if you want to fix your existing code, there are only a few errors.

  1. <body id="map"> is incorrect. The element with id="map" must be an HTML <div>:
<div id="map"></div>
  1. You are not loading the Maps JavaScript API using a script tag:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
  1. You need to include your javascript script after the <div id="map"> or use an asynchronous callback function to run your script after that API has loaded.

proof of concept fiddle

full code:

// your existing PHP...
<html>

  <head>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&v=weekly"></script>
  </head>

  <body>
    <div id="map"></div>
    <script type="text/javascript">
      var locations = <?php echo json_encode($a);?>;
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 6,
        center: new google.maps.LatLng(22.00, 96.00),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      var infowindow = new google.maps.InfoWindow();
      // var image = '/marker/map.png';
      // var image2 = '/marker/Map1.png';

      var marker1, n;
      for (n = 0; n < locationsb.length; n++) {
        marker1 = new google.maps.Marker({
          position: new google.maps.LatLng(locationsb[n][1], locationsb[n][2]),
          offset: '0',
          // icon: image2,
          title: locationsb[n][4],
          map: map
        });
        google.maps.event.addListener(marker1, 'click', (function(marker1, n) {
          return function() {
            infowindow.setContent(locationsb[n][0]);
            infowindow.open(map, marker1);
          }
        })(marker1, n));
      }

    </script>
  </body>

</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.