Несколько маркеров на Картах Google из базы данных MySQL не отображаются

Я пытаюсь показать несколько маркеров из mysql на googlemap.

Моя карта отображается правильно, но маркеры не отображаются.

У меня есть php-скрипт, который извлекает данные из mysql.

php:

<?php

    // Include config file

    require_once 'config.php';

    $sql = "SELECT client_address, GPS1, GPS2 FROM client";
    $stmt = $mysqli->prepare($sql);
    if($stmt->execute()){
       $result = $stmt->get_result();
   } else $stmt->close();

   foreach ($result as $key)
        $locations[]=array('client_address'=>$key['client_address'], 'GPS1'=> $key['GPS1'], 'GPS2'=> $key['GPS2']);
    $markers = json_encode( $locations );
?>

$ маркеры:

[{"client_address":"SA294","GPS1":"-34.031300","GPS2":"18.577680"},{"client_address":"SB619","GPS1":"-34.031510","GPS2":"18.575890"}]

HTML:

    <script>
            <?php
                echo "var markers=$markers;\n";
            ?>

                function initMap() {
                var latlng = new google.maps.LatLng(-34.031342, 18.577419); // default location
                var myOptions = {
                    zoom: 16,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.SATELLITE,
                    mapTypeControl: true
                };

            var map = new google.maps.Map(document.getElementById('mapall'),myOptions);
                var infowindow = new google.maps.InfoWindow(), marker, lat, lng;
                var json=JSON.parse( markers );

                for( var i in json ){

                    lat = (json[i].GPS1);
                    lng = (json[i].GPS2);
                    name = (json[i].client_address);

                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(lat,lng),
                        name:name,
                        map: map
                    }); 
                    google.maps.event.addListener( marker, 'click', function(e){
                        infowindow.setContent( this.name );
                        infowindow.open( map, this );
                    }.bind( marker ) );
                }
            }

            </script>
            <script async defer
                src="https://maps.googleapis.com/maps/api/js?key=AIzaSyANS0uqM7qedfDCzPjJ3xoB15vh2DC4Tls&callback=initMap">
             </script>

<div class="row">
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading"><b>Siqalo Active Units</b></div>
<div class="panel-body">
<div id="mapall" style="width:350px;height:350px;"></div> 
</div>
</div>    
</div>
</div>

Я основываюсь на большей части этого: Добавление нескольких маркеров на Google Maps из базы данных MySQL