Problem inserting the data array for google maps bookmarks

1

I have a table html that is created with a php calling the database

Example:

<table>
<tr>
<th>id</th>
<th>Name</th>
</tr>
<?php
$query = "select id, name from pizza";
$result = $conn->query($query)
while ($row = $result->fetch_assoc()) {
echo "<tr><td>" . $row['id'] . "</td>";
echo "<td>" . $row['Name'] . "</td>";
echo " <td><button id='button' onclick='SomeFunction()'> View stores </button></td></tr>";
}
?>
</table>

<!-- here is the map -->
<div id="map" class="mapcss">
<script type="text/javascript" src="func.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?
key=xxxxxxxxxxxxx&callback=myMap"></script>
</div>

and I have the function to create the map in a .js

    function myMap() {
var center = new google.maps.LatLng(-33.4545832, -70.6541925);
map = new google.maps.Map(document.getElementById('map'), {
    center: center,
    zoom: 12
});
}

Also a function to add the markers, my problem is how to fill this array to place the markers on the map

function SomeFunction() {

    var locations = [  
           *Data from db here*
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      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));
     }
    }
    
asked by Santiago Center 24.06.2017 в 21:23
source

1 answer

1

One way to pass the data is to create an array in PHP when traversing the data:

$markers = array ();
while($row=$result->fetch_assoc()) {

  $marker = array();
  $marker["lat"] = $row["lat"];
  $marker["lon"] = $row["lon"];
  $markers[] = $marker;

  echo ... //lo que quieras mostrar
}

The array $markers will accumulate the markers. In javascript you pass the value of this array to the location.

var locations = <? = $markers; ?>;

As your function loads the map in the onclick, it will use the markers you have in the array.

Another way to do it if you have different data on several buttons, which I think may be your case, is passing the data on the onclick of the button, since the array is overwritten in this case:

Within while :

 $s_markers = implode(",",$markers);
  ...onclick="SomeFunction('<?php echo $s_markers;?>');"...

And in javascript :

function SomeFunctin(a){
  var locations = a.split(',');
 ...
}

I hope this answers your question Santiago.

In the link that I passed to you in the comments there is another way to do it with the bookmarks in XML format created in PHP, but it does not contain the onclick part.

    
answered by 25.06.2017 в 10:17