title: How to filter by different Places on Google Maps Api Search
body: <p>So, I'm making a website where I have to insert a map, search box (input) and dropdown list.</p>
  
  <pre><code>var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);
  
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: pyrmont,
    zoom: 15
  });
  
  var request = {
  location: pyrmont,
  radius: '500',
  };
  service = new google.maps.places.PlacesService(map);
  service.textSearch(request, callback);
  
  function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
  for (var i = 0; i &lt; results.length; i++) {
    var place = results[i];
    createMarker(results[i]);
  }
  }
  }
  google.maps.event.addDomListener(window, 'load', initialize);
  </code></pre>
  
  <p>Here is the javascript code.</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="page-header"&gt;
          &lt;div id="row"&gt;
              &lt;div class="col-lg-6"&gt;
                  &lt;div class="input-group"&gt;
                      &lt;input id="pac-input" type="text" class="form-control"                                      placeholder="Search" name="srch-term" id="srch-term"&gt;
                      &lt;div class="input-group-btn"&gt;
                          &lt;button class="btn btn-default" type="submit"&gt;&lt;i   class="glyphicon glyphicon-search"&gt;&lt;/i&gt;&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;&lt;!-- .input --&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-4"&gt;
                  &lt;div class="dropdown" &gt;
                      &lt;button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"&gt;Pick a location
                      &lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
                      &lt;ul class="dropdown-menu" id="type-selector"&gt;
                          &lt;li id="changetype-restaurant" &gt;&lt;a value="restaurant" id="changetype-restaurant" href="#" &gt;Restaurant&lt;/a&gt;&lt;/li&gt;
                          &lt;li id="changetype-cafe"&gt;&lt;a value="cafe" id="changetype-cafe" href="#"Cafe&lt;/a&gt;&lt;/li&gt;
                          &lt;li id="changetype-movie_theater"&gt;&lt;a value="movie_theater" id="changetype-movie_theater" href="#"&gt;Movie theater&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;&lt;!-- .dropdown --&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>Here's the html code.</p>
  
  <p>The dropdown list needs to contain 3 choices; if the user wants to search for restaurants then he clicks on restaurants and types in the search box and it lists results for that. I need to use place types for this but I don't know how to implement all that.</p>
  
  <p>So far I made the map and I can list all the results, but I don't know how to list only the results for the item that was picked in the dropdown list. I don't know how to connect the dropdown to the input search box.</p>