Вставить точки на карту с массивом, который проходит в базе данных

Я пытаюсь создать сайт, на котором нужна карта, и пользователи заполняют формы с широты и долготы для создания точки в этом же карту. Все сохраняется в базе данных, но мне нужно, что имя точки, широта и долгота пройти, прежде чем в массиве. Или есть данные, сохраненные в базе данных, но всегда вращаться в массив. Мой код выглядит следующим образом:

<html>
<?php include("header.php");?>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Google Maps </title>
 <script src="http://maps.google.com/maps/api/js?key=AIzaSyDTXwZGf67oO-63Ci_OfR7CzB7Wm003Gow&sensor=false"
            type="text/javascript"></script>
</head>
<body>
<div class="content">

<h1><b>Roteiro Definido</b></h1>
<hr/>
<div style="float: left;">
<h2><b>Indicações</b></h2>
  <dl>
    <dt><b>Nome do Local</b></dt>
    <dd>-------------</dd>

    <dt><b>Tipo de Local</b></dt>
    <dd>-------------</dd>

    <dt><b>Moradado Local</b></dt>
    <dd>---------------</dd>

    <dt><b>Código Postal e Localidade</b></dt>
    <dd>--------------------------</dd>
  </dl></div>



    <div id="map" style="width: 500px; height: 400px; float: right;"></div>

    <script type="text/javascript">
        var locations = [

          ['Parque estacionamento', 41.69114219999999, -8.828242600000067, 3],
          ['Praia do Norte', 41.696997, -8.850979000000052, 2],
          ['Navio Gil Eanes', 41.69009, -8.830255999999963, 1]
        ];

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            center: new google.maps.LatLng(41.694808, -8.830981),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var infowindow = new google.maps.InfoWindow();

        var marker, i;

        for (i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map
            });

            google.maps.event.addListener(marker, 'click', (function (marker, i) {
                return function () {
                    infowindow.setContent(locations[i][0]);
                    infowindow.open(map, marker);
                }
            })(marker, i));
        }
    </script>
</body>
</html>
 </div>
<?php include("footer.php");?>
Author: Guilherme Nascimento, 2017-01-20
Source

2 answers

Вы должны создать функцию ajax, которая делает запрос в базе данных.

var request = new XMLHttpRequest();
request.open('GET', '/localizacoes.php', true);

request.onload = function(){
  if (request.status >= 200 && request.status < 400) {
    var data = request.responseText;

    criarMapa(data);
  } 
  else{
    console.log('Deu erro!');
  }
};

request.onerror = function() {
  console.log('Deu erro!');
};

request.send();

function criarMapa(locations){

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(41.694808, -8.830981),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
        });

        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }
}

Нужно создать страницу PHP, чтобы выбрать и отправить эти данные.

Я дал имя localizacoes.php в параметр метода open(). Но вы можете выбрать другое имя для вашей страницы.

Следовательно, вы просто делает запрос и возвращает array. Но данные находятся в другой - array.

$query   = "SELECT nome, latitude, longitude FROM pontos";
$execute = mysqli_query($conn, $query);
$result  = mysqli_fetch_array($execute);

$arrMaps [];

foreach($result as $key => $item){
    $arrMaps($arrMaps, [$item->nome, $item->latitude, $item->longitude, $key]);
}

return $arrMaps;

- Это просто идея, может быть, что что-то пойдет не так.

 2
Author: Diego Souza, 2017-01-20 18:00:20

Вы Можете сделать так со стороны клиента, динамическое добавление зоны в свою карту, по умолчанию там уже есть зоны input готов проверить, не далеко от мест, которые уже там ты (ПС: Всегда приятно видеть кого-то, Португалии, здесь приветствуется):

var locations = [
      ['Parque estacionamento', 41.69114219999999, -8.828242600000067],
      ['Praia do Norte', 41.696997, -8.850979000000052],
      ['Navio Gil Eanes', 41.69009, -8.830255999999963]
    ];

function init_map(locations) {

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(41.611751, -8.785640),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
        });

        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }
  }

init_map(locations);

$('#add').on('click', function() {
  var zona = $('#zona').val();
  var newCoords = $('#coords').val().split(',');
  newCoords.unshift(zona);
  locations.push(newCoords);
  init_map(locations);
  // aqui colocas o teu ajax e envias para o servidor as novas coordenadas e zona: newCoords
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.google.com/maps/api/js?&sensor=false"
        type="text/javascript"></script>

Nome da Zona<input type="text" id="zona">
<br>
Coord<input id="coords" placeholder="41.682451, -8.794165" value="41.682451, -8.794165" type="text" id="coords">
<button id="add">Add<button>
<div id="map" style="width: 500px; height: 400px; float: right;"></div>
 1
Author: Miguel, 2017-02-01 13:57:23