Google Maps API v3 Point of Interest with Custom Icons

google-maps

Solution

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

Problem

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

Original source