Estou criando um mapa, para apresentar uma série de informações, usando o google maps v3.
Resolvi trabalhar com 2 arquivos Json, para preenchimento do mapa. O primeiro arquivo contem as informações de Latitude e Longitude dos pontos do mapa, e o segundo contem as informações da InfoWindow.
Até aí tudo bem, consegui preencher o mapa e buscar as informações da InfoWindow no outro arquivo.
Agora gostaria de aplicar filtros neste mapa, para segmentar os dados. É nesta parte que estou com problema, o filtro precisa ser aplicado no segundo arquivo, e com isto filtrar o primeiro, para setar apenas os pontos de interesse, irão existir mais de 1 filtro para o mapa.
Estou me batendo com isto, alguém já precisou fazer algo semelhante?
Alguma ideia? Fiz algumas tentativas mas sem sucesso até agora.
Segue meu fonte até agora (Preenchendo o mapa e setando a InfoWindow).
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>TESTE</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#dvMap { height: 80% }
</style>
<script async defer
src="https://maps.googleapis.com/maps/api/js">
</script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script type="text/javascript" src="lat_long.js"></script>
<script type="text/javascript" src="saida.js"></script>
<script type="text/javascript">
window.onload = function () {
LoadMap();
}
function LoadMap() {
var mapOptions = {
center: new google.maps.LatLng(-15.79414, -47.88254),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var conteudo = ards;
//var infoWindow = new google.maps.InfoWindow();
var infoWindow = new google.maps.InfoWindow({
minWidth: 200,
maxWidth: 4000,
minHeight: 100,
minHeight: 2500
});
var latlngbounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
for (var i = 0; i < lat_long.length; i++) {
var dataCarga = lat_long[i];
var myLatlng = new google.maps.LatLng(dataCarga.LATITUDE, dataCarga.LONGITUDE);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: dataCarga.ARMARIO_SITE
});
(function (marker, dataCarga) {
google.maps.event.addListener(marker, "click", function (e) {
var as=$(conteudo).filter(function (i,n){
return n.ARMARIO_ERB===marker.getTitle();
});
var conteudo_info = "";
for (var i=0;i<as.length;i++)
{
conteudo_info += as[i].UF + " " +
as[i].DESC_CLUSTER + " " +
as[i].LOCALIDADE + " " +
as[i].DESC_MES_CRIACAO + " " +
as[i].MOTIVO + " " +
as[i].SISTEMA + " " +
as[i].TIPO_ACESSO + " " +
+ "<br>" ;
}
infoWindow.setContent("<div>" + conteudo_info + "</div>");
infoWindow.open(map, marker);
});
})(marker, dataCarga);
latlngbounds.extend(marker.position);
}
}
</script>
</head>
<body>
<div id="dvMap"></div>
</body>
</html>
Abaixo o exemplo dos Json:
var lat_long = [
{
"ARMARIO_SITE": "ACRBO_O1A01",
"LONGITUDE": -67.80921,
"LATITUDE": -9.971221
},
{
"ARMARIO_SITE": "ACRBO_O1A02",
"LONGITUDE": -67.81101,
"LATITUDE": -9.960082
},
{
"ARMARIO_SITE": "ACRBO_O1I01",
"LONGITUDE": -67.81749,
"LATITUDE": -9.969712
}
];
var ards = [
{
"LOCALIDADE":"FEIRA DE SANTANA",
"TIPO_CLIENTE":"Padrão",
"TIPO_ACESSO":"METALICO",
"UF":"BA",
"DESC_MES_CRIACAO":"JANEIRO",
"DESC_CLUSTER":"FEIRA DE SANTANA",
"ARMARIO_ERB":"ACRBO_O1A01",
"TIPO_RECLAMACAO":"TT",
"CLIENTE_RECENTE":"N"
},
{
"LOCALIDADE":"FEIRA DE SANTANA",
"TIPO_CLIENTE":"Padrão",
"TIPO_ACESSO":"METALICO",
"UF":"BA",
"DESC_MES_CRIACAO":"JANEIRO",
"DESC_CLUSTER":"FEIRA DE SANTANA",
"ARMARIO_ERB":"ACRBO_O1A01",
"TIPO_RECLAMACAO":"TT",
"CLIENTE_RECENTE":"N"
},
{
"LOCALIDADE":"FEIRA DE SANTANA",
"TIPO_CLIENTE":"Premium",
"TIPO_ACESSO":"METALICO",
"UF":"BA",
"DESC_MES_CRIACAO":"JANEIRO",
"DESC_CLUSTER":"FEIRA DE SANTANA",
"ARMARIO_ERB":"ACRBO_O1A02",
"TIPO_RECLAMACAO":"TT",
"CLIENTE_RECENTE":"N"
},
{
"LOCALIDADE":"FEIRA DE SANTANA",
"TIPO_CLIENTE":"Premium",
"TIPO_ACESSO":"CABO",
"UF":"BA",
"DESC_MES_CRIACAO":"JANEIRO",
"DESC_CLUSTER":"FEIRA DE SANTANA",
"ARMARIO_ERB":"ACRBO_O1I01",
"TIPO_RECLAMACAO":"TT",
"CLIENTE_RECENTE":"N"
},
{
"LOCALIDADE":"FEIRA DE SANTANA",
"TIPO_CLIENTE":"Residencial",
"TIPO_ACESSO":"METALICO",
"UF":"BA",
"DESC_MES_CRIACAO":"JANEIRO",
"DESC_CLUSTER":"FEIRA DE SANTANA",
"ARMARIO_ERB":"ACRBO_O1I01",
"TIPO_RECLAMACAO":"TT",
"CLIENTE_RECENTE":"N"
}
];
Obrigado.