Google Maps API - displaying markers with different icons

Question

My site uses Google Map V3 to save marker to a database. When a new marker is added, it opens an info window with a form to save to a PHP DB. On this form there is a Select field with different categories. when the map is displayed, I want each marker to have a different icon, depending on the category it has been saved with. So far, I can load the map and it displays the markers, but with the same icons. I have added a bit of code from another project to go through each category, but not quite sure how to get it working here:

function create_marker(MapPos, eName, eDesc, eCateg, eDate, InfoOpenDefault, DragAble, Removable, iconPath)
{
    //erase all existing markers
    for (var i in event_markers)
    {
        event_markers[i].setMap(null);
    }

    //loop through each data row
    $.each(data, function (i, MapPos) {

        // Display the Icon by category
        if(eCateg == 'meeting')
        {
            iconPath = 'static/assets/meeting_marker1.png';
        }
        else if(eCateg == 'clean')
        {
            iconPath = 'static/assets/clean_marker2.png';
        }
        else if(eCateg == 'priority')
        {
            iconPath = 'static/assets/alert_marker.png';
        }

        var marker = new google.maps.Marker({
            position: MapPos,
            map: map,
            icon: iconPath,
            title: eName
        });

As of now, it doesnt display anything and I'm not sure what should go in for "data" here:

$.each(data, function (i, MapPos) {

The existing saved markers are loaded like this:

$.get("event_data.php", function (data) {
            $(data).find("marker").each(function () {
                  var name = $(this).attr('name');
                  var description = '<p>'+ $(this).attr('description') +'</p>';
                  var category = $(this).attr('category');
                  var edate = $(this).attr('edate');
                  var point = new google.maps.LatLng(parseFloat($(this).attr('lat')),parseFloat($(this).attr('lon')));
                  create_marker(point, name, description, category, edate, false, false, false, "static/assets/new_event_marker.png");
            });
        });

score 0 · Answer 1 · answered Apr 01 '15 at 21:08

Adding this at the start of the create_marker function worked with displaying the icons depending on category:

// Display the Icon by category
    switch(eCateg){
        case 'meeting': iconPath = 'static/assets/meeting_marker1.png'; break;
        case 'clean' : iconPath = 'static/assets/clean_marker2.png'; break;
        case 'special' : iconPath = 'static/assets/special_marker.png'; break;
        case 'priority' : iconPath = 'static/assets/alert_marker.png';
    }

But now each marker display information that is saved with the last row inserted to the DB

Google Maps API - displaying markers with different icons

1 Answers1