Abed Putra Abed Putra - 7 months ago 11
PHP Question

setVisible not work with <option>

I have the code and I want use setVisible display marker with category. But my code not work...any idea? I use PHP & mysql to save the data marker.

Code HTML

<select id="type" onchange="filterMarkers(this.value);">
<option value="">Please select category</option>
<option value="lawyer">second</option>
<option value="marker">car</option>
<option value="third">third</option>
</select>


<div id="ss-container" class="ss-container">
<div id="map_canvas">
<div id="map">


javascript my map and data from mysql

var locations = [
<?php
$query="SELECT * from locations";
$result=mysql_query($query);
{
if ($num=mysql_numrows($result)) {
$i=0;
while ($i < $num) {
$id=mysql_result($result,$i,"id");
$title=mysql_result($result,$i,"title");
$lapt=mysql_result($result,$i,"lapt");
$long=mysql_result($result,$i,"long");
$aimage=mysql_result($result,$i,"aimage");
$categoryid=mysql_result($result,$i,"categoryid");
$address=mysql_result($result,$i,"address");
echo "['<div class=info><h4>$title</h4><br><h5>$address</h5><br><img src=$aimage><br></div>', $lapt, $long,'$categoryid'],";
$i++;
}
}
else
{
echo "<h3 align='center'><font color='#ff0000'>No Content Found</font></h3>";
}
}
?>
];

// Setup the different icons and shadows
var iconURLPrefix = 'images/';

var icons = {}
icons['lawyer'] = iconURLPrefix + 'lawyer.png';
icons['marker'] = iconURLPrefix + 'marker4.png';

var icons_length = icons.length;


var shadow = {
anchor: new google.maps.Point(5,13),
url: iconURLPrefix + 'msmarker.shadow.png'
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: new google.maps.LatLng(40.715618, -74.011133),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
streetViewControl: true,
disableDefaultUI: true,
panControl: true,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP},

});

var infowindow = new google.maps.InfoWindow({
maxWidth: 200,
});


var marker;
var markers = new Array();
var category = locations[i][3];

// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
category: category,
icon : icons[locations[i][3]],
shadow: shadow
});

markers.push(marker);

google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}


this my code for function category

filterMarkers = function (category) {
for (i = 0; i < marker.length; i++) {
marker1 = markers[i];
// If is same category or category not picked
if (marker1.category == category || category.length === 0) {
marker1.setVisible(true);
}
// Categories don't match
else {
marker1.setVisible(false);
}
}
}

Answer

You have a typo in your filter markers function: marker in the for loop index check should be markers:

var filterMarkers = function(category) {
  for (i = 0; i < markers.length; i++) {
    marker1 = markers[i];
    // If is same category or category not picked
    if (marker1.category == category || category.length === 0) {
      marker1.setVisible(true);
    }
    // Categories don't match 
    else {
      marker1.setVisible(false);
    }
  }
}

code snippet:

var locations = [
  // New York, NY, USA (40.7127837, -74.00594130000002)
  // Newark, NJ, USA (40.735657, -74.1723667)
  // Philadelphia, PA, USA (39.9525839, -75.16522150000003)
  // Baltimore, MD, USA (39.2903848, -76.61218930000001)

  ['<div class=info><h4>t</h4><br><h5>New York, NY, USA</h5><br><img src=$aimage><br></div>', 40.7127837, -74.0059413, 'lawyer'],
  ['<div class=info><h4>t</h4><br><h5>Newark, NJ, USA</h5><br><img src=$aimage><br></div>', 40.735657, -74.1723667, 'marker'],
  ['<div class=info><h4>t</h4><br><h5>Philadelphia, PA, USA</h5><br><img src=$aimage><br></div>', 39.9525839, -75.1652215, 'lawyer'],
  ['<div class=info><h4>t</h4><br><h5>Baltimore, MD</h5><br><img src=$aimage><br></div>', 39.2903848, -76.6121893, 'third'],
];
// Setup the different icons and shadows
var iconURLPrefix = 'images/';

var icons = {}
icons['lawyer'] = 'http://maps.google.com/mapfiles/ms/micons/blue.png';
icons['marker'] = 'http://maps.google.com/mapfiles/ms/micons/green.png';

var icons_length = icons.length;


var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 9,
  center: new google.maps.LatLng(40.715618, -74.011133),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow({
  maxWidth: 200,
});


var marker;
var markers = new Array();

// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    category: locations[i][3],
    icon: icons[locations[i][3]]
  });

  markers.push(marker);

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}
var filterMarkers = function(category) {
  for (i = 0; i < markers.length; i++) {
    marker1 = markers[i];
    // If is same category or category not picked
    if (marker1.category == category || category.length === 0) {
      marker1.setVisible(true);
    }
    // Categories don't match 
    else {
      marker1.setVisible(false);
    }
  }
}
html,
body,
#map,
#ss-container {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<select id="type" onchange="filterMarkers(this.value);">
  <option value="">Please select category</option>
  <option value="lawyer">second</option>
  <option value="marker">car</option>
  <option value="third">third</option>
</select>


<div id="ss-container" class="ss-container">
  <div id="map"></div>
</div>