title: google places api use custom marker icons based on restaurant cuisine
body: <p>I'm trying to use different marker icons for the different types of cuisine for restaurants generated from the nearbySearch in google places.</p>
  
  <p>As an example if a restaurant is a pizzeria it should display a custom pizzeria icon(that i have stored locally) or if a restaurant is a burger place, it should display a burger icon instead of the default restaurant icon.</p>
  
  <p>As far as I have searched there is only the possibility to use custom icons for the type of the place(e.g. "restaurant", "library", "parking"...) and I can't find a way to get the subtypes of restaurant type. Is there a way to work around this problem?</p>
  
  <p>Here is an example code of the search and callback function that really draw the markers:</p>
  
  <pre><code>     var MARKER_PATH =
      "https://developers.google.com/maps/documentation/javascript/images/marker_green";
  unction search() {
    var search = {
      bounds: map.getBounds(),
      types: ["restaurant"]
    };
  
    places.nearbySearch(search, callback);
  }
  
  function callback(results, status) {
    if (status === google.maps.places.PlacesServiceStatus.OK) {
      document.getElementById("lat").value = results[0].geometry.location.lat();
      document.getElementById("lng").value = results[0].geometry.location.lng();
        // Create a marker for each restaurant found, and
        // assign a letter of the alphabetic to each marker icon.
        for (var i = 0; i &lt; results.length; i++) {
          var markerLetter = String.fromCharCode("A".charCodeAt(0) + i % 26);
          var markerIcon = MARKER_PATH + markerLetter + ".png";
          // Use marker animation to drop the icons incrementally on the map.
          markers[i] = new google.maps.Marker({
            position: results[i].geometry.location,
            animation: google.maps.Animation.DROP,
            icon: markerIcon
          });
          // If the user clicks a restaurant marker, show the details of that restaurant
          // in an info window.
          markers[i].placeResult = results[i];
          google.maps.event.addListener(markers[i], "click", showInfoWindow);
          setTimeout(dropMarker(i), i * 100);
          addResult(results[i], i);
        }
      }
    }
  </code></pre>
  
  <p>My idea was to get the cuisine type by using the keyword property of the generated results, something like this(just two cuisine types for example):</p>
  
  <pre><code>if (results[i].keyword === "pizzaria") {
            markerIcon = "img/icons/pizzaria.png";
          } else if (results[i].keyword === "burger") {
            markerIcon = "img/icons/fastfood.png";
          } 
  </code></pre>
  
  <p>Unfortunately this doesn't work and I steel wonder if there is a way to solve it..</p>