0

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.com/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);
        }
    }
}
} 
2
  • 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
    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
    Dec 26, 2018 at 16:37

1 Answer 1

0

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);
    }
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.