php – Google Maps API Return markers with JSON as you pan or zoom the map

Question:

points.php returns a Json with 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, consult the file that loads the points

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 position of the map, every movement on the map (drag, move or zoom) needs to bring the markers from this visible area (for example if I am zooming in Belo Horizonte visible on the map should bring markers in that region, when changing the zoom or moving the map to another region I need to generate a new query, not necessarily just a city, but the visible map region, which can be a neighborhood). That's so you don't need to bring all the registered markers every time. How do I narrow the query? I need to enter more information in both JS and PHP, but I haven't found any examples of this.

I'm doing on api for web platform.

Answer:

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

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

You can get the visible points of the map using bounds():

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

There getting the positions:

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

It sends these positions to PHP and only brings what is inside it. I can't give you a clearer example now. If I don't manage with this code at night I'll 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
});
Scroll to Top
AllEscort