Google Maps API Return markers with JSON as you move the map or zoom

Question

points.php returns a Json with the map markers

[
    {
        "Id": 1,
        "Latitude": -19.212355602107472,
        "Longitude": -44.20234468749999,
        "Descricao": "Conteúdo do InfoBox 1"
    },
    {
        "Id": 2,
        "Latitude": -22.618827234831404,
        "Longitude": -42.57636812499999,
        "Descricao": "Conteúdo do InfoBox 2"
    },
    {
        "Id": 3,
        "Latitude": -22.57825604463875,
        "Longitude": -48.68476656249999,
        "Descricao": "Conteúdo do InfoBox 3"
    },
    {
        "Id": 4,
        "Latitude": -17.082777073226872,
        "Longitude": -47.10273531249999,
        "Descricao": "Conteúdo do InfoBox 4"
    }]

When loading the map, refer to the file that loads the dots

function carregarPontos() {

    $.getJSON('js/pontos.php', function(pontos) {

        var latlngbounds = new google.maps.LatLngBounds();

        $.each(pontos, function(index, ponto) {

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(ponto.Latitude, ponto.Longitude),
                title: "Meu ponto",
                icon: 'img/marcador.png'
            });

            var myOptions = {
                content: "<p>" + ponto.Descricao + "</p>",
                pixelOffset: new google.maps.Size(-150, 0)
            };

            infoBox[ponto.Id] = new InfoBox(myOptions);
            infoBox[ponto.Id].marker = marker;

            infoBox[ponto.Id].listener = google.maps.event.addListener(marker, 'click', function (e) {
                abrirInfoBox(ponto.Id, marker);
            });

            markers.push(marker);

            latlngbounds.extend(marker.position);

        });

        var markerCluster = new MarkerClusterer(map, markers);      
        map.fitBounds(latlngbounds);

    });

}

function initialize() { 
    var latlng = new google.maps.LatLng(-18.8800397, -47.05878999999999);

    var options = {
        zoom: 5,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("mapa"), options);
}

initialize();
carregaPontos();

I need the points.php file to bring the markers taking into account the map positioning, every move on the map (drag, move or zoom) needs to bring the markers of this visible area (for example if I am zooming in Belo Horizonte visible on the map should bring markers in this region, when changing the zoom or moving the map to another region need to generate a new query, not necessarily a city only, but the region visible map, can be a neighborhood ). This so you don’t have to bring all the bookmarks registered all the time. How do I restrict the query? I need to insert more information in both JS and PHP, but I did not find examples of this.

I’m doing the web platform api.

Answer 1

There is an event called when the user stops dragging the map:

map.addListener('idle', function () {} );

You can pick up the visible points on the map using Bounds():

var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();

Ai getting the positions:

var sudoeste_latitude = southWest.lat();
var sudoeste_longitude = southWest.lng();
var nordeste_latitude = northEast.lat();
var nordeste_longitude = northEast.lng();

Send these positions to PHP and only back what’s inside it. I can’t pass a clearer example now. If you don’t succeed with this code at night I try to help more. Final result :

map.addListener('idle', function () {
    var bounds = map.getBounds();
    var southWest = bounds.getSouthWest();
    var northEast = bounds.getNorthEast();
    var sudoeste_latitude = southWest.lat();
    var sudoeste_longitude = southWest.lng();
    var nordeste_latitude = northEast.lat();
    var nordeste_longitude = northEast.lng();

    //chama o PHP para pegar só quem está dentro deste campo e mostra os markers
});