pontos.php retorna um Json com os marcadores do mapa
[
{
"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"
}]
Ao carregar o mapa, consulta o arquivo que carrega os pontos
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();
Preciso que o arquivo pontos.php traga os marcadores levando em conta o posicionamento do mapa, a cada movimento no mapa (ação de arrastar, movimentar ou dar zoom) precisa trazer os marcadores dessa área visivel (por exemplo se estou com zoom em Belo Horizonte visivel no mapa deveria trazer marcadores nessa região, ao mudar o zoom ou movimentar o mapa para outra região preciso gerar uma nova consulta, não necessariamente uma cidade apenas, e sim a região de mapa visivel, podendo ser um bairro ). Isso para não precisar trazer todos os marcadores cadastrados toda a vez. Como faço para restringir a consulta? Preciso inserir mais informações tanto no JS quanto no PHP, porém não encontrei exemplos disso.
Estou fazendo na api para plataforma web.