Google Maps API v3 Point of Interest with Custom Icons - google-maps

Question

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.
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 < 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 + '<br/>' + place.vicinity + '<br/><img src="' + place.icon + '">');
infowindow.open(map, this);
});
}

Answer 1

Please see my quick and dirty Demo. The idea is to use the place.types array to determine what kind of place you are trying to add to the map. I simplistically assigned a marker to the first item of this array (usually 2 or 3 items long), which may be something like:
["school", "establishment"]
In some cases, "university" comes before "school" so a "university" icon is used. You will want to refine the way you match types to icons, that is, give a priority for school or university? Perhaps iterate through the array looking for the right types. One place (general_contractor) is not in my list of icons, so the default pin marker is placed there. A "default" icon could be used if you checked if iconType in fact has or not the desired type. I'll leave these details to you =)
Here's the source I used for icons: https://sites.google.com/site/gmapsdevelopment/
function createMarker(place) {
var placeLoc = place.geometry.location;
var iconType = {};
iconType['school'] = "http://maps.google.com/mapfiles/kml/pal2/icon2.png";
iconType['church'] = "http://maps.google.com/mapfiles/kml/pal2/icon11.png";
iconType['park'] = "http://maps.google.com/mapfiles/kml/pal2/icon12.png";
iconType['university'] = "http://maps.google.com/mapfiles/kml/pal2/icon14.png";
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon: iconType[place.types[0]]
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.setContent(place.name + '<br/>' + place.vicinity + '<br/><img src="' + place.icon + '">');
infowindow.open(map, this);
});
}
Alternatively, use a switch statement:
function createMarker(place) {
var placeLoc = place.geometry.location;
var iconUrl;
switch (place.types[0]) {
case 'school':
iconUrl = "http://maps.google.com/mapfiles/kml/pal2/icon2.png";
break;
case 'church':
iconUrl = "http://maps.google.com/mapfiles/kml/pal2/icon11.png";
break;
case 'park':
iconUrl = "http://maps.google.com/mapfiles/kml/pal2/icon12.png";
break;
case 'university':
iconUrl = "http://maps.google.com/mapfiles/kml/pal2/icon14.png";
break;
default:
iconUrl = "http://maps.google.com/mapfiles/kml/pal4/icon39.png";
}
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon: iconUrl
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.setContent(place.name + '<br/>' + place.vicinity + '<br/><img src="' + place.icon + '">');
infowindow.open(map, this);
});
}