title: Google Maps API v3 Point of Interest with Custom Icons
body: <p>I have a page pulling in the schools, churches, and parks of my given area but I want to style the 3 POIs with 3 different icons. I searched Google and even all the docs but couldn't find the answer.</p>
  
  <pre><code>var map;
  var infowindow;
  
  function initialize() {
  
    // Center of Map
    var centerLatlng = new google.maps.LatLng(29.745376, -95.380125);
  
    // Marker Icons Declaration
    var icon = new google.maps.MarkerImage("smLinks-twitter.png", null, null, new google.maps.Point(41,47));
  
    // Map Options
    var myOptions = {
      zoom: 16,
      center: centerLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      icons: icon 
    };
  
    // Draw the map
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
    // Marker Icons Implementation
    markers = new google.maps.Marker({ 
      position: centerLatlng,
      map: map, 
      title: 'Center of Map', 
      icon: icon 
    });
  
    // Services: Places
    var request = {
      location: centerLatlng,
      radius: 800,
      types: ["school", "church", "park"]
    };
    infowindow = new google.maps.InfoWindow();
    var service = new google.maps.places.PlacesService(map);
    service.search(request, callback);
  
  } // function initialize()
  
  function callback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
      for (var i = 0; i &lt; results.length; i++) {
        createMarker(results[i]);
      }
    }
  }
  
  function createMarker(place) {
    var placeLoc = place.geometry.location;
    var marker = new google.maps.Marker({
      map: map,
      position: place.geometry.location,
      icon: icon
    });
    google.maps.event.addListener(marker, 'mouseover', function() {
      infowindow.setContent(place.name + '&lt;br/&gt;' + place.vicinity + '&lt;br/&gt;&lt;img src="' + place.icon + '"&gt;');
      infowindow.open(map, this);
    });
  }
  </code></pre>