The problem of click the google map marker scroll to sidebar item

 <script type="text/javascript">
function createMarker(latlng,name,html,category) {
  var contentString =html;
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: name,
    zIndex: Math.round(latlng.lat()*-100000)<<5
    });
    // === Store the category and name info as a marker properties ===
    marker.mycategory = category;                                 
    marker.myname = name;
    gmarkers.push(marker);

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString); 
    infowindow.open(map,marker);
  });
  return marker;
}

  function select(category) {
    for (var i=0; i<gmarkers.length; i++) {
      if (gmarkers[i].mycategory == category) {
        gmarkers[i].setVisible(true);
      } else {
        gmarkers[i].setVisible(false);
      }
    }
    // == close the info window, in case its open on a marker that we just hid
    infowindow.close();
    // == rebuild the side bar
    makeSidebar();
  }

  function createCategoryDropdown(category) {
    var select_holder = document.getElementById('select_holder');
    var option = document.createElement("option");
    option.setAttribute("name",category);
    option.setAttribute("value",category);
    option.innerHTML = category;
    select_holder.appendChild(option);
  }


  function mycategoryclick(category,i) {
    google.maps.event.trigger(markers[category][i],"click");
  }

  function makeSidebar() {
    var html = "";
    for (category in markers) {
      // html += "<b>"+category+"</b><br>";
      for (var i=0; i<markers[category].length; i++) {
        if (markers[category][i].getVisible()) {
          html += '<a href="javascript:mycategoryclick(&quot;'+category+'&quot;,' + i + ')">' + markers[category][i].myname + '<\/a><br>';
        }
      }
    }
    document.getElementById("side_bar").innerHTML = html;
  }

  function getLocation() {

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(initialize);

    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}
function initialize(position) {
  var myOptions = {
    zoom: 15,
    center: new google.maps.LatLng(position.coords.latitude,position.coords.longitude),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map"), myOptions);


  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });

// Read the data
$.getJSON('getdata.php', function(json) {
    var firstcat = null;
var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < json.length; i++) {
      // obtain the attribues of each marker
      var lat = parseFloat(json[i].lat);
      var lng = parseFloat(json[i].lon);
      var point = new google.maps.LatLng(lat,lng);
      bounds.extend(point);
      var name = json[i].res_name;
      var category = json[i].category;
      var html = "<b>"+name+"<\/b><p>"+json[i].address+"</p>category:"+category;
      // create the marker
      var marker = createMarker(point,name,html,category);
      if (category in markers == false) {
    if (firstcat == null) firstcat = category;
        markers[category] = [];
      }
      markers[category].push(marker);
    }

    // == create the categories dropdowns ==
    for (category in markers) {
  createCategoryDropdown(category);
    }
    // == show the first category
    select(firstcat);

    // == create the initial sidebar ==
    makeSidebar();

    // == fit the viewport to _all_ the markers ==
    map.fitBounds(bounds);
  });
}
</script>

*****when i run the script come out error message show 'gmarkers.push(marker); Uncaught ReferenceError: gmarkers is not defined. got any function error cause gmarkers is not defined. the select option for category also cannot working. Expected output was when i select option for category that will show marker on google map under category i was selected. i don know which function got the problem. Hope someone can help me solve the problem *****

getdata.php (code for convert to json data)

<?php
require('config.php');
 $marker="Select * from restaurant";
  $result=mysqli_query($connection,$marker);
   foreach($result as $key){
   $locations[]=array('lat'=>$key['lat'], 'lon'=> $key['lon'], 'res_name'=> $key['res_name'],'category'=> $key['category'],'address'=> $key['address']);
   }
   echo json_encode($locations);
?>

html code

<body onload="getLocation()">

<div id="map"></div>
<div id="side_bar"></div>

  <form action="#" >
Category:  <select id="select_holder" onchange="select(this.options[this.selectedIndex].value)">

 <option value="category1">category 1</option>
  <option value="category2">category 2</option> 
</select>
</form>
</body>

error