Google Maps API v3 Punto de interés con iconos personalizados

Question

Tengo una página tirando de las escuelas, iglesias y parques de mi área determinada, pero quiero dar estilo a los 3 PDI con 3 iconos diferentes. Busqué en Google e incluso en todos los documentos pero no pude encontrar la respuesta.

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

Por favor, vea mi rápida y sucia Demo. La idea es usar la matriz place.types para determinar qué tipo de lugar estás tratando de agregar al mapa. Me simplista asignado un marcador para el primer elemento de esta matriz (generalmente 2 o 3 artículos de largo), que puede ser algo como:

["school", "establishment"] 

En algunos casos, "universidad" viene antes de "escuela" para una "universidad "se usa el icono". ¿Desea refinar la forma en que combina los tipos con los íconos, es decir, le da prioridad a la escuela o la universidad? Quizás iterar a través de la matriz buscando los tipos correctos. Un lugar (general_contractor) no está en mi lista de iconos, por lo que el marcador pin predeterminado se coloca allí. Se podría usar un ícono "predeterminado" si marcó si iconType tiene o no el tipo deseado. Voy a dejar estos detalles para que =)

Aquí está la fuente que utilicé para iconos: 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); 
    }); 
} 

otra alternativa es utilizar una sentencia switch:

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); 
    }); 
}