Google Maps Api v3 - Working with 2 Json files

Asked

Viewed 549 times

0

I am creating a map, to present a lot of information, using google maps v3.

I decided to work 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 the Infowindow information.

So far so good, I was able to fill out the map and get the information from Infowindow in the other file.

Now I’d like to apply filters to 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, to set only the points of interest, there will be more than 1 filter for the map.

I’m hitting myself with this, someone has ever needed to do something similar?

Any idea? I’ve made a few attempts but no success so far.

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

Below the example of 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"
    }
];

Thank you.

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

  • It would not be easier to work with the contents of the two files in the same collection, such as composite objects?

  • @lbotinelly How would this compound object work? Sorry my ignorance, I’m not a programmer. I thought of this solution, because for each lat_long, I can have 10~15 content records on Infowindow.. So I did this so as not to duplicate locations..

  • I can try to show you how to do it if you post examples of correlated content from each file.

  • @lbotinelly added in the post an example of the files, their link is by ARMARIO_ERB and ARMARIO_SITE, in lat_long are unique and in Ards there can be several records for each ARMARIO_SITE.

1 answer

0


I was able to perform 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 only, 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 );
        }
    });             
}

Worked perfectly.

Browser other questions tagged javascript json google-maps maps google-maps-api-3

You are not signed in. Login or sign up in order to post.