How to pass 2D array values from MySQL DB to Google Maps API for GeoCoder processing by address name?

B

Berkutman2020-02-24 00:26:30

PHP

Berkutman, 2020-02-24 00:26:30

There is a database where values are stored in the form_city and form_name columns
form_city - city
form_name - School name It is
necessary to transfer these values from the database to the js array for geocoder processing

At the moment, a statically written array (Everything works with it)

var address = new Array (
    'Москва, Московский государственный университет имени М.В.Ломоносова',
    'Санкт-Петербург, Санкт-Петербургский государственный университет'
  );

Having created a two-dimensional array in php, I tried to transfer it to an array in JS

<?php
$result = db_query("SELECT value FROM webform WHERE name = 'form_name' UNION ALL SELECT value FROM webform WHERE name = 'form_city'")->fetchAllAssoc('value');
$json = json_encode($result);
?>

var address = new Array ('<?php echo $json;?>');

In response from geocoder, I get ZERO_RESULTS for the place of markers on the map.

Apparently, I'm not correctly compiling the array.

All code

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf8" />
<title>Жопа</title>
    <style>
      #map {
        height: 600px;
      }
    </style>
  </head>
<body>
<div id="map"></div>
<?php
$result = db_query("SELECT value FROM webform WHERE name = 'form_name' UNION ALL SELECT value FROM webform WHERE name = 'form_city'")->fetchAllAssoc('value');
$json = json_encode($result);
?>
    <script>
      var geocoder;
      var map;
    
var address = new Array ('<?php echo $json;?>');
    
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(61.52401, 105.31875600000001),
    zoom: 3
        });
        geocoder = new google.maps.Geocoder();
    address.forEach(n => codeAddress(n, geocoder, map));

      }
    
    


function codeAddress(address, geocoder, map) {
  geocoder.geocode({ address }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location,
  title: address
      });
    var infowindow = new google.maps.InfoWindow({
    content: address
  });
  
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
    } 
  else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}   
</script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=API-KEY&callback=initMap">
    </script>
  </body>
</html>

PS Maybe someone will come in handy, I also added conditions for processing statuses:

else if (status === 'OVER_QUERY_LIMIT') {
          setTimeout(() => {
            codeAddress(address, geocoder, map);
          }, 1);
        }
      else if (status === 'ZERO_RESULTS') {
    console.log('STATUS ZERO BLABLABLA');
        }

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

N

nokimaro, 2020-02-24
@Berkutman

<div id="map"></div>
<?php
$arr = [];
$result = db_query("SELECT sid, name, value FROM webform WHERE name IN('form_name', 'form_city')");
foreach ($result as $record)
{
    $arr[$record->sid][$record->name] = $record->value;
}

$adresses = [];
foreach($arr as $row)
{
    $adresses[] = "{$row['form_city']}, {$row['form_name']}";
}

$js_str_address_arr = json_encode(array_values($adresses));
?>
    <script>
      var geocoder;
      var map;

var address = <?php echo $js_str_address_arr;?>;

      function initMap() {