javascript - How can I modify the markers?

Question

Im a beginner and I'm trying to lean to code and use google map api v3. I would like to customize the marker of this example that I found on google's developer page.

I want to display a different marker for each type (eg: green for restaurants, yellow for hotels)

Thank you for your help and apologize for my english.

  var map, places, iw;
  var markers = [];
  var autocomplete;

  function initialize() {
    var myLatlng = new google.maps.LatLng(100.365478075776182, 14.3210456439636);
    var myOptions = {
      zoom: 12,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    places = new google.maps.places.PlacesService(map);
    google.maps.event.addListener(map, 'tilesloaded', tilesLoaded);
    autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'));
    google.maps.event.addListener(autocomplete, 'place_changed', function() {
      showSelectedPlace();
    });
  }

  function tilesLoaded() {
    google.maps.event.clearListeners(map, 'tilesloaded');
    google.maps.event.addListener(map, 'zoom_changed', search);
    google.maps.event.addListener(map, 'dragend', search);
    search();
  }

  function showSelectedPlace() {
    clearResults();
    clearMarkers();
    var place = autocomplete.getPlace();
    map.panTo(place.geometry.location);
    markers[0] = new google.maps.Marker({
      position: place.geometry.location,
      map: map
    });
    iw = new google.maps.InfoWindow({
      content: getIWContent(place)
    });
    iw.open(map, markers[0]);
  }

  function search() {
    var type;
    for (var i = 0; i < document.controls.type.length; i++) {
      if (document.controls.type[i].checked) {
        type = document.controls.type[i].value;
      }
    }

    autocomplete.setBounds(map.getBounds());

    var search = {
      bounds: map.getBounds()
    };

    if (type != 'establishment') {
      search.types = [ type ];
    }

    places.search(search, function(results, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
       clearResults();
       clearMarkers();
        for (var i = 0; i < results.length; i++) {
          markers[i] = new google.maps.Marker({
            position: results[i].geometry.location,
            animation: google.maps.Animation.DROP
          });
          google.maps.event.addListener(markers[i], 'click', getDetails(results[i], i));
          setTimeout(dropMarker(i), i * 100);
          addResult(results[i], i);
        }
      }
    })
  }

  function clearMarkers() {
    for (var i = 0; i < markers.length; i++) {
      if (markers[i]) {
        markers[i].setMap(null);
        markers[i] == null;
      }
    }
  }

  function dropMarker(i) {
    return function() {
      markers[i].setMap(map);
    }
  }

  function addResult(result, i) {
    var results = document.getElementById("results");
    var tr = document.createElement('tr');
    tr.style.backgroundColor = (i% 2 == 0 ? '#F0F0F0' : '#FFFFFF');
    tr.onclick = function() {
      google.maps.event.trigger(markers[i], 'click');
    };

    var iconTd = document.createElement('td');
    var nameTd = document.createElement('td');
    var icon = document.createElement('img');
    icon.src = result.icon;
    icon.setAttribute("class", "placeIcon");
    icon.setAttribute("className", "placeIcon");
    var name = document.createTextNode(result.name);
    iconTd.appendChild(icon);
    nameTd.appendChild(name);
    tr.appendChild(iconTd);
    tr.appendChild(nameTd);
    results.appendChild(tr);
  }

  function clearResults() {
    var results = document.getElementById("results");
    while (results.childNodes[0]) {
      results.removeChild(results.childNodes[0]);
    }
  }

  function getDetails(result, i) {
    return function() {
      places.getDetails({
          reference: result.reference
      }, showInfoWindow(i));
    }
  }

  function showInfoWindow(i) {
    return function(place, status) {
      if (iw) {
        iw.close();
        iw = null;
      }

      if (status == google.maps.places.PlacesServiceStatus.OK) {
        iw = new google.maps.InfoWindow({
          content: getIWContent(place)
        });
        iw.open(map, markers[i]);        
      }
    }
  }

  function getIWContent(place) {
    var content = "";
    content += '<table><tr><td>';
    content += '<img class="placeIcon" src="' + place.icon + '"/></td>';
    content += '<td><b><a href="' + place.url + '">' + place.name + '</a></b>';
    content += '</td></tr></table>';
    return content;
  }
</script>

<style>
body {
  font-family: sans-serif;
}
#map_canvas {
  width: 1150px;
  height: 750px;
  top: 15px;
  left: -10px;
  border: 1px solid grey;
}
#listing {
  position: absolute;
  width: 200px;
  height: 360px;
  overflow: auto;
  left: 401px;
  top: 65px;
  cursor: pointer;
}
#controls {
  width: 400px;
  position: absolute;
  top: 40px;
  left: 450px;
  height: 60px;
  padding: 5px;
  font-size: 12px;
}
.placeIcon {
  width: 16px;
  height: 16px;
  margin: 2px;
}
#resultsTable {
  font-size: 10px;
  border-collapse: collapse;
}
#locationField {
  width: 400px;
  height: 25px;
  top: 45px;
  left: 13px;
  position: absolute;
}
#autocomplete {
  width: 400px;
}
</style>

<body style="margin:0px; padding:0px;" onload="initialize()">
  <div id="locationField">
    <input id="autocomplete" type="text" />
  </div>
  <div id="controls">
    <form name="controls">
    <input type="checkbox" name="type" value="establishment" onclick="search()" />All
    <input type="checkbox" name="type" value="restaurant" onclick="search()" />Restaurants 
    <input type="checkbox" name="type" value="hotel" onclick="search()" />hotel
    </form>
  </div>
  <div id="map_canvas"></div>
  <div id="listing"><table id="resultsTable"><tbody id="results"></tbody></table></div>
</body>

Answer 1

you can create 1 array of type (restaurants,hotels) or set default value of validate and try this code:

var url = "";
if(a == "hotels"){
   url = "http://exampl.com/yellow.png";   
}else{
   url = "http://exampl.com/green.png"
}
marker_new[i] = google.maps.Marker({
                                 icon: _url;
                                 position: place.geometry.location,
                                 map: map
                               });

add to here

function showSelectedPlace() {
    clearResults();
    clearMarkers();
    var place = autocomplete.getPlace();
    map.panTo(place.geometry.location);
    markers[0] = new google.maps.Marker({
      position: place.geometry.location,
      map: map
    });
    iw = new google.maps.InfoWindow({
      content: getIWContent(place)
    });
    iw.open(map, markers[0]);
  }

and here

 places.search(search, function(results, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
       clearResults();
       clearMarkers();
        for (var i = 0; i < results.length; i++) {
          markers[i] = new google.maps.Marker({
            position: results[i].geometry.location,
            animation: google.maps.Animation.DROP
          });
          google.maps.event.addListener(markers[i], 'click', getDetails(results[i], i));
          setTimeout(dropMarker(i), i * 100);
          addResult(results[i], i);
        }
      }