API di Google Maps v3 Punto di interesse con icone personalizzate

Question

Ho una pagina che tira nelle scuole, nelle chiese e nei parchi della mia area specifica, ma voglio modellare i 3 punti di interesse con 3 icone diverse. Ho cercato su Google e anche su tutti i documenti ma non ho trovato la risposta.

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

Si prega di vedere il mio veloce e sporco Demo. L'idea è di utilizzare l'array place.types per determinare il tipo di luogo che si sta tentando di aggiungere alla mappa. Ho semplicisticamente assegnato un marcatore per il primo elemento di questo array (lunga di solito 2 o 3 elementi), che può essere qualcosa di simile:

["school", "establishment"] 

In alcuni casi, "università" viene prima di "scuola" in modo da un "università "è usata l'icona. Dovrai affinare il modo in cui abbini i tipi alle icone, cioè dare una priorità alla scuola o all'università? Forse scorrere l'array alla ricerca dei tipi giusti. Un posto (general_contractor) non è nella mia lista di icone, quindi il marcatore di pin di default è collocato lì. Un'icona "predefinita" potrebbe essere utilizzata se si è verificato se iconType ha effettivamente o meno il tipo desiderato. Lascio questi dettagli a voi =)

Ecco la fonte che ho usato per le icone: 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); 
    }); 
} 

In alternativa, utilizzare un'istruzione 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); 
    }); 
}