Fancybox and Ajax

Question

Good afternoon guys. I’m having trouble with the Fancybox here and I wanted to see if anyone has managed to do it.

I have a PHP script that takes 3 POST variables (latitude, longitude and accuracy) to generate a map with Google Maps. I need this script to be called via Ajax inside a fancybox when clicking on a link on the page.

The link is:

<a href="#" class="geoBoxLink" id="geoBox" data-lat="<?php echo $row['lat']; ?>" data-lon="<?php echo $row['lon']; ?>" data-radius="<?php echo $row['precisao']; ?>">Ver GeoLocalização</a>

lat and Lon are obvious and the date-Radius is the precision (radius).

My script is wrong, but I want a function that’s kind of like this:

<script>
$(function() {
$("#geoBox").click(function(event) {
    var latitude = $("#geoBox").data("lat");
    var longitude = $("#geoBox").data("lon");
    var radius = $("#geoBox").data("radius");
    $.ajax({
        type: "POST",
        cache: false,
        url: "../lib/maps.php",
        data: {latitude:latitude,longitude:longitude,radius:radius},
        success: function(data){
                    $.fancybox(data, {
                                    width: 800,
                                    height: 600
                                    });
         }
    });
});
});
</script>

The problem is that the fancybox does not accept me to pass the parameter this way Function(data, options).

How could I get around this problem?

Thank you.

EDIT:

Content from maps.php:

<?php
require_once("lib.php");
if(Auth() == false) {
    http_response_code(403);
    header("HTTP/1.0 403 Forbidden");
    exit;
}
if(isset($_POST['latitude']) && isset($_POST['longitude']) && isset($_POST['radius'])) {
?>
<style type="text/css">
  html, body { height: 100%; margin: 0; padding: 0; }
  #map { height: 100%; }
</style>

<div id="map"></div>
<script type="text/javascript">

var latitude = <?php echo $_POST['latitude']; ?>;
var longitude = <?php echo $_POST['longitude']; ?>;
var radius = <?php echo $_POST['radius']; ?>;

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: latitude, lng: -52.000000},
  zoom: 18
  });

var marker = new google.maps.Marker({
    position: {lat: latitude, lng: longitude},
    animation: google.maps.Animation.DROP,
    map: map,
    title: 'Seu endereço!'});

marker.addListener('click', function() {
    infowindow.open(map, marker);
});

var cityCircle = new google.maps.Circle({
  strokeColor: '#3399FF',
  strokeOpacity: 0.5,
  strokeWeight: 1,
  fillColor: '#3399FF',
  fillOpacity: 0.35,
  map: map,
  center: {lat: latitude, lng: longitude},
  radius: radius
});

var infowindow = new google.maps.InfoWindow({
    content: "Seu endere&ccedil;o.<br>Precis&atilde;o de 100m.<br>Adquirido via GPS."
});
}

</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXX&callback=initMap">
</script>
<?php
} else {
    http_response_code(400);
    header("HTTP/1.0 400 Bad Request");
}
?>

Note: The Google Maps Key API has been hidden for security.