Google Maps Api v3 - Working with 2 Json files

Question

Google Maps Api v3 - Working with 2 Json files

Navigation

#1 by (0 votes)

0

I'm creating a map, to display a lot of information, using google maps v3.

I worked with 2 Json files to fill the map. The first file contains the Latitude and Longitude information of the map points, and the second contains InfoWindow information.

So far so good, I was able to fill in the map and fetch InfoWindow information from the other file.

Now I'd like to apply filters on this map, to segment the data. It is in this part that I am in trouble, the filter needs to be applied in the second file, and with this filter the first one, to select only the points of interest, there will be more than 1 filter for the map.

I'm hitting on this, has anyone ever had to do something similar?

Any ideas? I've made some unsuccessful attempts so far.

Follow my source so far (Filling the map and setting 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><scriptsrc="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><scripttype="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>

Below the Json example:

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"
    }
];

Thank you.

javascript json google-maps maps google-maps-api-3

asked by anonymous 01.02.2016 / 17:54

1 answer

Slow to load image of Mongo with PHP How do I import the Hotmail / Outlook contact list? [closed]

score 0 · Accepted Answer

I was able to make multiple filters using different bases.

I followed the idea of this project Marker-Filtering-Google-Maps . That works in a very well organized way, I made some adaptations just for my scenarios.

I was able to link the bases by searching and setting new arrays. Examples:

//Para a InfoWindow usei assim.
var as=$(ards).filter(function (i,n){
     return n.ARMARIO_ERB===marker.getTitle();
});

//Para eliminar duplicados
$.each(results, function(index, value) {
    if ($.inArray(value.ARMARIO_ERB, armarios)==-1) {
        armarios.push(value.ARMARIO_ERB);
    }
});

//Buscar a lat_long unica
for(var j = 0; j < armarios.length; j++){
    $.grep( lat_long, function( n, i ) {
        if(n.ARMARIO_SITE===armarios[j]){
            localizacoes.push( n );
        }
    });             
}

It worked perfectly.