Google Maps API Return markers with JSON, as it moves the map or zoom

Question

Google Maps API Return markers with JSON, as it moves the map or zoom

Navigation

#1 by (1 votes)

3

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 you load the map, check 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 in the markers, taking into account the positioning of the map, every movement on the map (drag, zoom or move action) needs to bring the markers of this visible area (for example if I zoom in Belo Horizonte visible in 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 of visible map, it can be a neighborhood). This is so you do not have to bring all the bookmarks registered all the time. How do I restrict the query? I need to enter more information in both JS and PHP, but found no examples of this.

I'm doing it in api for web platform.

php json google-maps google-maps-api-3

asked by anonymous 29.12.2015 / 23:35

1 answer

Add plugin phonegap / cord Is there a paid localhost server? [closed]

score 1 · Answer 1

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();

Already 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 behind only what is inside it. I can not get a clearer example now. If I can not get 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
});