Multiple markers on Google Maps using JavaScript, PHP and SQL

Question

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>

EZMapdesign · Accepted Answer · 2018-12-20 07:46:42Z

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!

answered Dec 20, 2018 at 7:46

EZMapdesign

8994 silver badges10 bronze badges

Add a comment |

geocodezip · Accepted Answer · 2021-01-24 04:12:11Z

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.

<body id="map"> is incorrect. The element with id="map" must be an HTML <div>:

<div id="map"></div>

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>

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>

Stack Exchange Network

Multiple markers on Google Maps using JavaScript, PHP and SQL

2 Answers 2

Your Answer

Hot Network Questions

Multiple markers on Google Maps using JavaScript, PHP and SQL

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions