Buscar latitude e longitude no mysql e colocar no java script

Alo galera tdo bem? Peço uma ajuda. sou iniciante

Estou tentando colocar coordenadas vindas da minha base de dados para um java script que encontrei na internet.

Esse java script vai levar coordenadas em um fichiero JSON e tudo funcoina bem. queria adaptar esse codigo para funcionar com minha base de dados ai vai o codigo.

INDEX.PHP

Google Maps API v3: Criando um mapa personalizado
<body>

 <div id='mapa' style='height: 500px; width: 700px'>
    </div>

   <script type='text/javascript' src='resources/js/jquery/jquery-3.2.1.min.js'></script>
   
    <!-- Maps API Javascript -->
    <script src='http://maps.googleapis.com/maps/api/js?key=Minha_chaves_do_google&amp;sensor=true'></script>


    <!-- Arquivo de inicialização do mapa -->
    <script type="text/javascript" src="resources/js/mapa.js"></script>
</body>

Data.PHP

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
    <?php require("conexao.php"); 
	
           $result = mysqli_query($conn, "SELECT id, latitude, longitude, descricao FROM local where id =1 " );
           $to_encode = array();
        while($row = mysqli_fetch_assoc($result)) {
           $to_encode[] = $row;
    }

         echo json_encode($to_encode);
	
	?>
    <body>
   </body>
</html>

Mapa.JS

var map;
var idInfoBoxAberto;
var infoBox = [];
var markers = [];
 
function initialize() {
    var latlng = new google.maps.LatLng(-25.893308, 32.600725);
 
    var options = {
        zoom: 5,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
 
    map = new google.maps.Map(document.getElementById("mapa"), options);
}
 
initialize();



function carregarPontos() {
 
    $.getJSON('data.php', function(pontos) {
 
		
		
        $.each(pontos, function(index, ponto) {
 
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(ponto.longitude, ponto.latitude),
                title: "Meu ponto personalizado! :-D",
                map: map
            });
			
		});

	});
}
 
carregarPontos();