[JS] Google Maps Api V3 filteren van markers

[Emrulez]

Beste tweakers,

Ik heb gebruik Google Maps om bepaalde locaties weer te geven op een kaart. Nu wil deze locaties kunnen filteren op bepaalde eigenschappen. Ik heb een aantal dingen geprobeerd maar ik kom er niet helemaal uit.

De data is opgeslagen in een Google Maps Spreadsheet. De data wordt dan d.m.v. JSON opgehaald en opgeslagen in een array.

code:

/** 
 * Called when JSON is loaded. 
 * @param {JSON} json Worksheet feed
 */       
function cm_loadMapJSON(json) {

  var bounds = new google.maps.LatLngBounds();

  for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    if(entry["gsx$" + param_latColumn]) {
      var lat = parseFloat(entry["gsx$" + param_latColumn].$t);
      var lng = parseFloat(entry["gsx$" + param_lngColumn].$t);
      var point = new google.maps.LatLng(lat,lng);
      var html = "<div class='infoscherm' style='font-size:12px'>";
      html += "<h2>" + entry["gsx$"+param_titleColumn].$t 
              + "</h2>";
      var label = entry["gsx$"+param_titleColumn].$t;
      if(entry["gsx$" + param_screenCategory]) {
        html += "<h3>" + "Screen Category/Purpose: " + "</h3>" + "<p>" + entry["gsx$"+param_screenCategory].$t + "</p>";
      }
      var screentype = entry["gsx$"+param_screenType].$t;
      if(entry["gsx$" + param_screenType]) {
        html +=  "<h3>" + "Screen Type: " + "</h3>" + "<p>" + entry["gsx$"+param_screenType].$t + "</p>";
      }
      if(entry["gsx$" + param_publicSpace]) {
        html += "<h3>" + "Type of Public Space: " + "</h3>" + "<p>" + entry["gsx$"+param_publicSpace].$t + "</p>";
      }
      var space = entry["gsx$"+param_publicSpace].$t;
      if(entry["gsx$" + param_screenInteraction]) {
        html += "<h3>" + "Type of interaction: " + "</h3>" + "<p>" + entry["gsx$"+param_screenInteraction].$t + "</p>";
      }
      if(entry["gsx$" + param_descriptionColumn]) {
        html += "<h3>" + "Description: " + "</h3>" + "<p>" + entry["gsx$"+param_descriptionColumn].$t + "</p>";
      }
      if(entry["gsx$" + param_screenAddress]) {
        html += "<h3>" + "Screen Location: " + "</h3>" + "<p>" + entry["gsx$"+param_screenAddress].$t + "</p>";
      }
      html += "</div>";

      // create the marker
      var marker = cm_createMarker(kaart,point,label,html,screentype,space);
      // cm_map.addOverlay(marker);
      cm_mapMarkers.push(marker);
      //cm_mapMarkers.push({ point: marker, space: 'Park' });
      cm_mapHTMLS.push(html);
      bounds.extend(point); 
    }
  }

  kaart.fitBounds(bounds);
  kaart.setCenter(bounds.getCenter());
}

Als ik het goed heb zijn de locaties en diens eigenschappen opgeslagen in de array cm_mapMarkers.
Nu wil ik dus de locaties(markers) filteren aan de hand van deze eigenschappen.

Het gaat om de locaties van schermen en diens eigenschappen. De schermen vallen bijvoorbeeld onder een categorie en hebben LED of LCD scherm etc. Ik wil dus filteren op categorieën maar bijvoorbeeld ook in combinatie met de andere eigenschappen.

Ik wil dynamisch doen met bijvoorbeeld checkboxes. Ik weet alleen niet hoe ik het precies moet aanpakken. Ik kom er niet uit. hebben jullie nog ideeën of tips?

Ik hoop dat het een beetje duidelijk is.

Demo van de huidige versie:
http://goo.gl/XaXyK

Alvast Bedankt,

Emrulez

[Bosmonster]

De "marker" die je terugkrijgt is een marker-object, die je daarmee ook aan en uit kunt zetten. De marker zelf wordt opgeslagen in je array cm_mapMarkers, dus als je daar even doorheenloopt, filtert en de juiste aan en uitzet, dan ben je er.

[Emrulez]

Bosmonster schreef op maandag 02 januari 2012 @ 17:20:
De "marker" die je terugkrijgt is een marker-object, die je daarmee ook aan en uit kunt zetten. De marker zelf wordt opgeslagen in je array cm_mapMarkers, dus als je daar even doorheenloopt, filtert en de juiste aan en uitzet, dan ben je er.

Dat begrijp ik maar het moet dus dynamisch zijn en in werking gaan d.m.v. checkboxes bijvoorbeeld. maar bedoel jij dan zoiets?

code:

function clearOverlays() {
  if (cm_mapMarkers) {
    for (i in cm_mapMarkers) {
      cm_mapMarkers[i].setMap(null);
    }
  }
}

[Tsjilp]

Je hoeft ze niet van de kaart te halen, met setVisible kan je ze aan en uit zetten. Volgens mij zoek je zoiets: http://www.regiogroningenassen.nl/nl/projecten/
Via de legenda kan je daar lagen aan en uitzetten, met checkboxes, precies zoals je omschrijft.

[Bosmonster]

Emrulez schreef op maandag 02 januari 2012 @ 18:45:
[...]

Dat begrijp ik maar het moet dus dynamisch zijn en in werking gaan d.m.v. checkboxes bijvoorbeeld. maar bedoel jij dan zoiets?

code:

function clearOverlays() {
  if (cm_mapMarkers) {
    for (i in cm_mapMarkers) {
      cm_mapMarkers[i].setMap(null);
    }
  }
}

Yeah, maar dan met setVisible, zoals Tsjilp zegt. Zelf de markers bijhouden, categoriseren en filteren is de enige manier. De code daarvoor zul je dus ook zelf moeten schrijven.

[Emrulez]

Tsjilp schreef op dinsdag 03 januari 2012 @ 15:32:
Je hoeft ze niet van de kaart te halen, met setVisible kan je ze aan en uit zetten. Volgens mij zoek je zoiets: http://www.regiogroningenassen.nl/nl/projecten/
Via de legenda kan je daar lagen aan en uitzetten, met checkboxes, precies zoals je omschrijft.

Bosmonster schreef op dinsdag 03 januari 2012 @ 16:12:
[...]


Yeah, maar dan met setVisible, zoals Tsjilp zegt. Zelf de markers bijhouden, categoriseren en filteren is de enige manier. De code daarvoor zul je dus ook zelf moeten schrijven.

Daar dacht ik zelf ook aan ik heb nu de volgende functie gemaakt:

code:

// Filtering Markers
function filterMarker(category) {
    for (var i=0; i<cm_mapMarkers.length; i++) {
        if (cm_mapMarkers[i].mycategory == "Information") {
            cm_mapMarkers[i].setVisible(true);
        } else {
            cm_mapMarkers[i].setVisible(false);
        }
    }

}

en dit:

code:

// create the marker
      var marker = cm_createMarker(kaart,point,label,html,category,screentype,space,interaction);
      // cm_map.addOverlay(marker);
      marker.mycategory = category;
      marker.myscreentype = screentype;
      marker.myspace = space;
      marker.myinteraction = interaction;
      cm_mapMarkers.push(marker);
      cm_mapHTMLS.push(html);
      bounds.extend(point);

Maar waar ik niet uit kom is het dynamisch maken van de if statement. Er moet namelijk ook een Or of AND constructie in kunnen.

[Bosmonster]

Probeer niet te denken in "if statements" enzo, maar bedenk eerst eens wat je nu precies wilt bereiken, bijvoorbeeld met pseudo-code. Dat kan al zo simpel zijn als:

code:

Voor iedere marker
   als de marker onderdeel uitmaakt van mijn selectie
      toon marker
   anders toon marker niet

En ga daarna eens nadenken over hoe je dat om gaat zetten naar code. Zo kom je er (bijvoorbeeld) al achter dat je een collectie nodig zult hebben van waar je marker aan moet voldoen. Hoe maak je zo'n collectie uit je checkboxes? Dat is een van de stapjes. Als je alles tegelijk gaat proberen als developen nog redelijk nieuw is voor je zie je al snel door de bomen het bos niet meer.

[ Voor 16% gewijzigd door Bosmonster op 04-01-2012 00:10 ]