Google Maps Version 3 has lot of new features of which one is to populate Markers with different colors. In this short code snippet article I have provided an example of how we can display colored markers for grouping similar places, like Hospitals, Beaches, Parks, etc. using specific Colored Markers for each type of location
Note: To populate Google Maps with Markers from Database in ASP.Net, refer my article ASP.Net: Google maps V3 with Multiple Markers Database Example


Google Maps V3: Display Colored Markers for particular type of location
 
Google Maps V3 with different Colored Markers for grouping locations
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var markers = [
    {
        "title": 'Bombay Hospital',
        "lat": '18.9409388',
        "lng": '72.82819189999998',
        "description": 'Bombay Hospital',
        "type": 'Hospital'
    },
        {
            "title": 'Jaslok Hospital',
            "lat": '18.9716956',
            "lng": '72.80991180000001',
            "description": 'Jaslok Hospital',
            "type": 'Hospital'
        },
    {
        "title": 'Lilavati Hospital',
        "lat": '19.0509488',
        "lng": '72.8285644',
        "description": 'Lilavati Hospital',
        "type": 'Hospital'
    },
        {
            "title": 'Aksa Beach',
            "lat": '19.1759668',
            "lng": '72.79504659999998',
            "description": 'Aksa Beach',
            "type": 'Beach'
        },
        {
            "title": 'Juhu Beach',
            "lat": '19.0883595',
            "lng": '72.82652380000002',
            "description": 'Juhu Beach',
            "type": 'Beach'
        },
        {
            "title": 'Girgaum Beach',
            "lat": '18.9542149',
            "lng": '72.81203529999993',
            "description": 'Girgaum Beach',
            "type": 'Beach'
        },
        {
            "title": 'Oberoi Mall',
            "lat": '19.1737704',
            "lng": '72.86062400000003',
            "description": 'Oberoi Mall',
            "type": 'Mall'
        },
        {
            "title": 'Infinity Mall',
            "lat": '19.1846511',
            "lng": '72.83454899999992',
            "description": 'Infinity Mall',
            "type": 'Mall'
        },
            {
                "title": 'Phoenix Mall',
                "lat": '19.0759837',
                "lng": '72.87765590000003',
                "description": 'Phoenix Mall',
                "type": 'Mall'
            },
            {
                "title": 'Phoenix Mall',
                "lat": '19.0759837',
                "lng": '72.87765590000003',
                "description": 'Phoenix Mall',
                "type": 'Mall'
            },
            {
                "title": 'Hanging Garden',
                "lat": '18.9560279',
                "lng": '72.80538039999999',
                "description": 'Hanging Garden',
                "type": 'Park'
            },
            {
                "title": 'Jijamata Udyan',
                "lat": '18.979006',
                "lng": '72.83388300000001',
                "description": 'Jijamata Udyan',
                "type": 'Park'
            }
            ,
            {
                "title": 'Juhu Garden',
                "lat": '19.0839704',
                "lng": '72.83388300000001',
                "description": 'Juhu Garden',
                "type": 'Park'
            },
            {
                "title": 'Sanjay Gandhi National Park',
                "lat": '19.2147067',
                "lng": '72.91062020000004',
                "description": 'Sanjay Gandhi National Park',
                "type": 'Park'
            }
    ];
window.onload = function () {
 
    var mapOptions = {
        center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var infoWindow = new google.maps.InfoWindow();
    var latlngbounds = new google.maps.LatLngBounds();
    var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
    var i = 0;
    var interval = setInterval(function () {
        var data = markers[i]
        var myLatlng = new google.maps.LatLng(data.lat, data.lng);
        var icon = "";
        switch (data.type) {
            case "Hospital":
                icon = "red";
                break;
            case "Beach":
                icon = "blue";
                break;
            case "Mall":
                icon = "yellow";
                break;
            case "Park":
                icon = "green";
                break;
        }
        icon = "http://maps.google.com/mapfiles/ms/icons/" + icon + ".png";
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: data.title,
            animation: google.maps.Animation.DROP,
            icon: new google.maps.MarkerImage(icon)
        });
        (function (marker, data) {
            google.maps.event.addListener(marker, "click", function (e) {
                infoWindow.setContent(data.description);
                infoWindow.open(map, marker);
            });
        })(marker, data);
        latlngbounds.extend(marker.position);
        i++;
        if (i == markers.length) {
            clearInterval(interval);
            var bounds = new google.maps.LatLngBounds();
            map.setCenter(latlngbounds.getCenter());
            map.fitBounds(latlngbounds);
        }
    }, 80);
}
</script>
<table>
<tr>
    <td>
        <div id="dvMap" style="width: 500px; height: 500px">
        </div>
    </td>
    <td valign="top">
        <u>Legend:</u><br />
        <img alt="" src="http://maps.google.com/mapfiles/ms/icons/red.png" />
        Hospitals<br />
        <img alt="" src="http://maps.google.com/mapfiles/ms/icons/blue.png" />
        Beaches<br />
        <img alt="" src="http://maps.google.com/mapfiles/ms/icons/yellow.png" />
        Malls<br />
        <img alt="" src="http://maps.google.com/mapfiles/ms/icons/green.png" />
        Parks<br />
    </td>
</tr>
</table>
 
Explanation:
In the above code snippet, I have an HTML DIV which I am making use as a container control to populate Google Maps V3. I have a predefined array of markers of different locations such as Hospitals, Beaches, Malls and Parks that I need to populate on the Google Maps using different colored markers.
Next to the Maps I have displayed legend which describes that a particular color resembles which type of location. Example, Red color Marker displays Hospitals in the City
You will notice Drop Animation of markers when the map loads, to know more about it refer Google Maps V3 with Markers having Drop Animation with delay using JavaScript
 
Demo
View Demo
 
Downloads