Insert points on a map with an array that passes in the database

Question

Insert points on a map with an array that passes in the database

Navigation

#1 by (2 votes)
#2 by (1 votes)

4

I'm creating a site where I need a map, and users fill out forms with latitude and longitude to create a point on that map. Everything is stored in the database but I needed the point name, latitude, and longitude to be passed in an array first. That is, data stored in a database but always running in the array. My code is as follows:

<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");?>

php javascript html google-maps

asked by anonymous 20.01.2017 / 18:18

2 answers

1

You can do this from the client side, dynamically add a zone to your map, by default you already have a zone in the input ready to test, not far from the locations you already have there (PS: Always nice to see someone from Portugal here, welcome):

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><scriptsrc="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>

20.01.2017 / 19:27

How to import data from the clibboard to a data-frame in R How to model product categories?

score 2 · Accepted Answer

You have to create an ajax function that queries the database.

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));
    }
}

You have to create a PHP page for you to select and send this data.

I gave the name localizacoes.php in the method parameter open() . But you can choose another name for your page.

Then you just query and return array . But the data is inside another 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;

It's just an idea, something might go wrong.