I have created the Google map with posts as markers but no I want to filter those markers by category and I’m stuck. Here is my code:

functions.php

    $args = array('post_type' => 'post',array(
  'meta_query' => array(
    'relation' => 'AND',
    array(
      'key'   => 'lng',  
    ),
    array(
      'key'   => 'lat',  
    )
  )
));  
    $loop = new WP_Query($args);

    while ( $loop->have_posts() ) : $loop->the_post();  
    $title = get_the_title();
    $post_category=get_the_category();
    $post_category_name=$post_category[0]->cat_name;
    $permalink=get_the_permalink();

    $lng = get_post_meta( get_the_ID(), 'lng', TRUE ); 
    $lat = get_post_meta( get_the_ID(), 'lat', TRUE ); 

    $lnglat=$lng.",".$lat; 
    $arrlatlng[]=array(
        "lnglat"=>$lnglat,
        "post_title"=>$title,
        'post_category'=>$post_category_name,
        'post_url'=>$permalink);
    $longitude[]=array('lng'=>$lng);
    $latitude[]=array('lat'=>$lat); 
    endwhile;   


    $passedValues = array( 'retrieve_data' => $retrieve_data, 
        'var1' => $arrlatlng,'lng'=>$longitude,'lat'=>$latitude
    );
    wp_localize_script( 'spektrum_gmap.js', 'passed_object', $passedValues );

JavaScript

    function myMap() {
    var gmarkers = [];
    var markers = [];
    var infowindow = new google.maps.InfoWindow({
    content: ''
    });
    var icon={
          url: '.svg',
          scaledSize: new google.maps.Size(80, 80),
          origin: new google.maps.Point(0, 0),
          anchor: new google.maps.Point(32,65),
          labelOrigin:  new google.maps.Point(40,33),
        }; 
        var myCenter = new google.maps.LatLng(44.794426, 20.451849);
         var mapProp = {center:myCenter, zoom:15, scrollwheel:false, draggable:true,
         mapTypeId:google.maps.MapTypeId.ROADMAP};
         var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); 
         var myJsarray = passed_object.retrieve_data;

         var latitute = '' ;
         var longitute = '';



         var lng = passed_object.lng;
         var lat = passed_object.lat;
         var content=  passed_object.var1;
         var post_title=content.post_title;
         var post_category=content.post_category;

         for (var i=0; i<content.length; i++) {
          console.log('data from database '+content[i].post_category);
         }

           //console.log('data from database '+locations); 

      //alert(passed_object.var_1)

      for (var i=0; i<lng.length; i++) {
        console.log('data from database '+content[i].post_title);
      var marker=new google.maps.Marker({
        icon:icon,
        position: new google.maps.LatLng( lat[i].lat ,  lng[i].lng),
        map: map,
        title: content[i].post_title,
        url:content[i].post_url,
        content:content[i].post_title,
        category:content[i].post_category,
        label: {
          text: content[i].post_title,
          color: "#000",
          fontSize: "16px",
          fontWeight: "bold", 
        }
    });

      gmarkers.push(marker);

    // Marker click listener
    google.maps.event.addListener(marker, 'click', (function (marker, content) {
        return function () { 
            infowindow.setContent(marker.title);
            infowindow.open(map, marker);
            map.panTo(this.getPosition());
            map.setZoom(15);
             window.location.href = marker.url;
        }
    })(marker, content));

 /**
 * Function to filter markers by category
 */

filterMarkers = function (category) { 
  console.log(category);
    for (i = 0; i < marker.length; i++) {

        markers = gmarkers[i];
        // If is same category or category not picked
        if (marker[i].category == category || category.length === 0) {

            marker.setVisible(true);
        }
        // Categories don't match 
        else {
            marker.setVisible(false);
        }
    }
}
} 

I have created the Google map with posts as markers but no I want to filter those markers by category and I’m stuck. Here is my code:

functions.php

    $args = array('post_type' => 'post',array(
  'meta_query' => array(
    'relation' => 'AND',
    array(
      'key'   => 'lng',  
    ),
    array(
      'key'   => 'lat',  
    )
  )
));  
    $loop = new WP_Query($args);

    while ( $loop->have_posts() ) : $loop->the_post();  
    $title = get_the_title();
    $post_category=get_the_category();
    $post_category_name=$post_category[0]->cat_name;
    $permalink=get_the_permalink();

    $lng = get_post_meta( get_the_ID(), 'lng', TRUE ); 
    $lat = get_post_meta( get_the_ID(), 'lat', TRUE ); 

    $lnglat=$lng.",".$lat; 
    $arrlatlng[]=array(
        "lnglat"=>$lnglat,
        "post_title"=>$title,
        'post_category'=>$post_category_name,
        'post_url'=>$permalink);
    $longitude[]=array('lng'=>$lng);
    $latitude[]=array('lat'=>$lat); 
    endwhile;   


    $passedValues = array( 'retrieve_data' => $retrieve_data, 
        'var1' => $arrlatlng,'lng'=>$longitude,'lat'=>$latitude
    );
    wp_localize_script( 'spektrum_gmap.js', 'passed_object', $passedValues );

JavaScript

    function myMap() {
    var gmarkers = [];
    var markers = [];
    var infowindow = new google.maps.InfoWindow({
    content: ''
    });
    var icon={
          url: 'http://image.flaticon/icons/svg/252/252025.svg',
          scaledSize: new google.maps.Size(80, 80),
          origin: new google.maps.Point(0, 0),
          anchor: new google.maps.Point(32,65),
          labelOrigin:  new google.maps.Point(40,33),
        }; 
        var myCenter = new google.maps.LatLng(44.794426, 20.451849);
         var mapProp = {center:myCenter, zoom:15, scrollwheel:false, draggable:true,
         mapTypeId:google.maps.MapTypeId.ROADMAP};
         var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); 
         var myJsarray = passed_object.retrieve_data;

         var latitute = '' ;
         var longitute = '';



         var lng = passed_object.lng;
         var lat = passed_object.lat;
         var content=  passed_object.var1;
         var post_title=content.post_title;
         var post_category=content.post_category;

         for (var i=0; i<content.length; i++) {
          console.log('data from database '+content[i].post_category);
         }

           //console.log('data from database '+locations); 

      //alert(passed_object.var_1)

      for (var i=0; i<lng.length; i++) {
        console.log('data from database '+content[i].post_title);
      var marker=new google.maps.Marker({
        icon:icon,
        position: new google.maps.LatLng( lat[i].lat ,  lng[i].lng),
        map: map,
        title: content[i].post_title,
        url:content[i].post_url,
        content:content[i].post_title,
        category:content[i].post_category,
        label: {
          text: content[i].post_title,
          color: "#000",
          fontSize: "16px",
          fontWeight: "bold", 
        }
    });

      gmarkers.push(marker);

    // Marker click listener
    google.maps.event.addListener(marker, 'click', (function (marker, content) {
        return function () { 
            infowindow.setContent(marker.title);
            infowindow.open(map, marker);
            map.panTo(this.getPosition());
            map.setZoom(15);
             window.location.href = marker.url;
        }
    })(marker, content));

 /**
 * Function to filter markers by category
 */

filterMarkers = function (category) { 
  console.log(category);
    for (i = 0; i < marker.length; i++) {

        markers = gmarkers[i];
        // If is same category or category not picked
        if (marker[i].category == category || category.length === 0) {

            marker.setVisible(true);
        }
        // Categories don't match 
        else {
            marker.setVisible(false);
        }
    }
}
} 

• php
• javascript
• google-maps

• I'm not seeing anywhere that $retrieve_data is set in your PHP. looks like you're passing an undefined variable to your js – mrben522 Commented Dec 26, 2018 at 14:22
• $retrieve_data is irrelevant at this point, all the necessary data is in var content= passed_object.var1 – bodyhammer Commented Dec 26, 2018 at 16:37

1 Answer 1

Solved, the problem was in filterMarkers() function

filterMarkers = function (category) {  
var markers = gmarkers[i];
for (var i = 0; i < gmarkers.length; i++) {

    // If is same category or category not picked
    if (gmarkers[i].category == category || category.length === 0) {  

      gmarkers[i].setVisible(true);
    }

    // Categories don't match 
    else { 
       gmarkers[i].setVisible(false);
    }
  }
}