Как я могу установить точки на картах Google, используя php и местоположения из базы данных?

0

У меня есть база данных и таблица с именами маркеров. В этой таблице указаны координаты конкретных местоположений, которые я хочу отметить на карте, используя карты Google. Я могу установить карту на своем веб-сайте, но когда я пытаюсь использовать php для отметки местоположений, я получаю эту ошибку "Uncaught TypeError: Не удается прочитать свойство" offsetWidth "из null".

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>X</title>

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/estilos.css" rel="stylesheet">

    <style type="text/css">
            #map {
                width:  100%;
                height: 700px;
            }
        </style>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyASm3CwaK9qtcZEWYa-iQwHaGi3gcosAJc&sensor=false"></script>
        <script type="text/javascript">

         $(document).ready(function(){
            google.maps.event.addDomListener(window, 'load', init);


                 function init() {
                     var mapOptions = {                                    
                    zoom: 15,
                    center: new google.maps.LatLng(40.2118735,-8.4240415,16);
                    styles: [   {featureType:"administrative",elementType:"all",stylers:[{visibility:"on"},{saturation:-100},{lightness:20}]},  {featureType:"road",elementType:"all",stylers:[{visibility:"on"},{saturation:-100},{lightness:40}]},    {featureType:"water",elementType:"all",stylers:[{visibility:"on"},{saturation:-10},{lightness:30}]},    {featureType:"landscape.man_made",elementType:"all",stylers:[{visibility:"simplified"},{saturation:-60},{lightness:10}]},   {featureType:"landscape.natural",elementType:"all",stylers:[{visibility:"simplified"},{saturation:-60},{lightness:60}]},    {featureType:"poi",elementType:"all",stylers:[{visibility:"off"},{saturation:-100},{lightness:60}]},    {featureType:"transit",elementType:"all",stylers:[{visibility:"off"},{saturation:-100},{lightness:60}]}]
                };

                var mapElement = document.getElementById('map');

                var map = new google.maps.Map(mapElement, mapOptions);   
                 }
                });


        </script>

  </head>
<?php
    include ('headbar.php');
    require ('conexao.php');
    $getpoints = mysql_query("SELECT * FROM markers");
    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[lat].', '.$row[lng].'); 
                var marker1 = new google.maps.Marker({ position: myLatlng1, map: map, title:"'.$row[name].'"});';
    }
  }
?>
    <body>
    <div class="container-fluid">
      <div id="map"></div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Я не могу понять, в чем проблема, и я был бы признателен за помощь в этом.

Теги:
google-maps

1 ответ

0
Лучший ответ

Сначала сохраните значения PHP в массиве javascript

В верхней части страницы:

require ('conexao.php');
$points = array();
$result = mysql_query("SELECT * FROM markers");

if(!$result){
     die('There was an error running the query [' . $con->error . ']');
} else {
    while ($row = mysql_fetch_assoc($result)) {
        $points[] = array('lat' => $row['lat'], 'lng' => $row['lng'], 'name' => $row['name']);
    }
}


<script type="text/javascript">
     var points = <?php echo json_encode($points); ?>;
     $(document).ready(function(){
        google.maps.event.addDomListener(window, 'load', init);

             function init() {
                 var mapOptions = {                                    
                     zoom: 15,
                     center: new google.maps.LatLng(40.2118735,-8.4240415,16),
                     styles: [  {featureType:"administrative",elementType:"all",stylers:[{visibility:"on"},{saturation:-100},{lightness:20}]},  {featureType:"road",elementType:"all",stylers:[{visibility:"on"},{saturation:-100},{lightness:40}]},    {featureType:"water",elementType:"all",stylers:[{visibility:"on"},{saturation:-10},{lightness:30}]},    {featureType:"landscape.man_made",elementType:"all",stylers:[{visibility:"simplified"},{saturation:-60},{lightness:10}]},   {featureType:"landscape.natural",elementType:"all",stylers:[{visibility:"simplified"},{saturation:-60},{lightness:60}]},    {featureType:"poi",elementType:"all",stylers:[{visibility:"off"},{saturation:-100},{lightness:60}]},    {featureType:"transit",elementType:"all",stylers:[{visibility:"off"},{saturation:-100},{lightness:60}]}]
                 };
                 var mapElement = document.getElementById('map');
                 var map = new google.maps.Map(mapElement, mapOptions);   

                  for (var i=0,l=points.length;i<l;i++) {
                      var latLng = new google.maps.LatLng(points[i].lat, points[i].lng); 
                      var marker1 = new google.maps.Marker({ position: latLng, map: map, title:points[i].name});
                  }
             }                 
      });


</script>
Поделиться
  • 0
    Я пытался использовать код, который вы мне отправляете, и он дает мне много ошибок о скобках с запятой. Например, строка "var points = <? Php echo json_encode ($ points);?>;"
  • 0
    Какую ошибку вы получаете?
Показать ещё 12 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню