Php 如何使用sql数据库将google地图信息面板添加到此代码中_Php_Mysql_Google Maps_Google Maps Api 3

Php 如何使用sql数据库将google地图信息面板添加到此代码中

php mysql google-maps google-maps-api-3

Php 如何使用sql数据库将google地图信息面板添加到此代码中,php,mysql,google-maps,google-maps-api-3,Php,Mysql,Google Maps,Google Maps Api 3,伙计们，我不知道如何在代码中为数据库中的每个点向我的标记添加信息面板。信息面板基本上可以有一个随机的字符串，我只是不知道如何正确地实现它。我对使用谷歌地图API还不熟悉，只是想不通，任何帮助都会被接受。 ` include 'connect.php'; $apikey = "AIzaSyAobypY52GXhqSDIMPhfoojHIe7lAKJnl8"; $id = $_GET['id'];

伙计们，我不知道如何在代码中为数据库中的每个点向我的标记添加信息面板。信息面板基本上可以有一个随机的字符串，我只是不知道如何正确地实现它。我对使用谷歌地图API还不熟悉，只是想不通，任何帮助都会被接受。 `

          include 'connect.php';

          $apikey = "AIzaSyAobypY52GXhqSDIMPhfoojHIe7lAKJnl8";
          $id = $_GET['id'];

          $lat = 0;
          $long = 0;
          $zoom = 8;

          $findmap = "SELECT centerLat, centerLong, zoom FROM maps WHERE ID = $id";

          if(!$result = $con->query($findmap)){
             die('There was an error running the query [' . $con->error . ']');
          } else {
            $row = $result->fetch_assoc();
            $lat = $row['centerLat'];
            $long = $row['centerLong'];
            $zoom = $row['zoom'];
          }   

        ?><!DOCTYPE html>
        <html>
          <head>
            <meta name="viewport"
                content="initial-scale=1.0, user-scalable=no" />
            <style type="text/css">
              html { height: 100% }
              body { height: 100%; margin: 0; padding: 0 }
              #map-canvas { height: 100% }
            </style>
            <script type="text/javascript"
              src="https://maps.googleapis.com/maps/api/js?key=
                  <?php echo $apikey; ?>&sensor=false">
            </script>
            <script type="text/javascript">
              function initialize() {

                var mapOptions = {
                  center: new google.maps.LatLng(<?php echo $lat.', '.$long; ?>),
                  zoom: <?php echo $zoom; ?>
                };
                var map = new google.maps.Map(document.getElementById("map-canvas"),
                    mapOptions);
                    var markers = [];
                    var infoWindows = [];
        <?php
          $getpoints = "SELECT pointLat, pointLong, pointText 
              FROM mappoints WHERE mapID = $id";    

          if(!$result = $con->query($getpoints)){
            die('There was an error running the query 
                [' . $con->error . ']');
          } else {
            while ($row = $result->fetch_assoc()) {
              echo '  var myLatlng1 = new google.maps.LatLng('.
                  $row[pointLat].', '.$row[pointLong].');
        var infowindow = new google.maps.InfoWindow({
                  content:"'.$row[pointText].'"
                });

          var marker1 = new google.maps.Marker({ 
            position: myLatlng1, 
            map: map, 
            title:"'.$row[pointText].'"
          });



          ';

            }
          }
        ?>
markers.push(marker1);
infoWindows.push(new google.maps.InfoWindow);

var i;
for(i = 0; i < markers.length; i++) {
    infowindow[i].setContent("content for infowindow");
    infowindow[i].open(map, markers[i]);
}
              }
              google.maps.event.addDomListener(window, 'load', initialize);
            </script>
          </head>
          <body>
            <a href="Addtree.php">Add A tree</a>


            <div id="map-canvas"/>

          </body>
        </html>

嗯。你可以试试这样的。这将加载多个信息窗口，应该可以帮助您开始

var map;
var markers = [];
var infoWindows = [];

/* Your map and marker creation code */

markers.push(marker1);
infoWindows.push(new google.maps.InfoWindow);

var i;
for(i = 0; i < markers.length; i++) {
    infowindow[i].setContent("content for infowindow");
    infowindow[i].open(map, markers[i]);
}

使用下面的代码

你是说信息窗口？你的页面是否显示多个标记，每个标记都需要一个信息窗口？@mishka是的，它将显示多个标记，每个标记都需要一个信息窗口我会混淆你的$apikey@Ethanbakter你试过我的建议了吗？我刚刚尝试添加它，它不再显示地图，所以我猜是有错误，或者我把它放错了位置。我已经用更改更新了上面的代码。地图现在加载，但没有信息窗口。@Ethanbakter现在检查。我推了infoWindows.pushnew google.maps.InfoWindow；向上的另外，请分享你的新代码。如果可能的话，在页面呈现页面源代码后粘贴HTML源代码。代码已经更新，因此您可以查看我是否将其放在正确的位置，或者是否将其放在错误的位置。谢谢您以前的代码基本上完全符合我的要求，因此我让它工作。

<?php
include 'connect.php';

$apikey = "*************************";
$id = $_GET['id'];

$lat = 0;
$long = 0;
$zoom = 8;

$findmap = "SELECT centerLat, centerLong, zoom FROM maps WHERE ID = $id";

if(!$result = $con->query($findmap)){
  die('There was an error running the query [' . $con->error . ']');
} else {
  $row = $result->fetch_assoc();
  $lat = $row['centerLat'];
  $long = $row['centerLong'];
  $zoom = $row['zoom'];
}   

?>
        <!DOCTYPE html>
        <html>
          <head>
            <meta name="viewport"
                content="initial-scale=1.0, user-scalable=no" />
            <style type="text/css">
              html { height: 100% }
              body { height: 100%; margin: 0; padding: 0 }
              #map-canvas { height: 100% }
            </style>
            <script type="text/javascript"
              src="https://maps.googleapis.com/maps/api/js?key=
                  <?php echo $apikey; ?>&sensor=false">
            </script>
            <script type="text/javascript">
              var markers = [];
              var infoWindows = [];
              var map;

              function initialize() {

                var mapOptions = {
                  center: new google.maps.LatLng(<?php echo $lat.', '.$long; ?>),
                  zoom: <?php echo $zoom; ?>
                };
                map = new google.maps.Map(document.getElementById("map-canvas"),
                    mapOptions);

        <?php
          $getpoints = "SELECT pointLat, pointLong, pointText 
              FROM mappoints WHERE mapID = $id";    

          if(!$result = $con->query($getpoints)){
            die('There was an error running the query 
                [' . $con->error . ']');
          } else {
            while ($row = $result->fetch_assoc()) {
        ?>
          var myLatlng1 = new google.maps.LatLng(<?php echo $row['pointLat'] ?>, <?php echo $row['pointLong'] ?>);
          var infowindow = new google.maps.InfoWindow;

          var marker1 = new google.maps.Marker({ 
            position: myLatlng1, 
            map: map, 
            title: "<?php echo $row['pointText']; ?>",
          });

          markers.push(marker1);
          infoWindows.push(infowindow);
      <?php
            }
          }
      ?>

var i;
for(i = 0; i < markers.length; i++) {
    infowindow[i].setContent(markers[i].getTitle());
    infowindow[i].open(map, markers[i]);
}
              }
              google.maps.event.addDomListener(window, 'load', initialize);
            </script>
          </head>
          <body>
            <a href="Addtree.php">Add A tree</a>


            <div id="map-canvas"/>

          </body>
        </html>