Change google map marker color depending on a var

Question

I am using google maps API3 with some Laravel 4.2

I need to color the markers on the map depending on a var that is coming from my database

for example if the coming var is Rent the marker should be Red and if it's Sell the marker should be green

this is what I try

<script type="text/javascript">
            var locations = [
                    @foreach($bannerMapBin as $pin)
                ['<div style="width:300px;"><div style="float:left;margin-right:10px;height:92px;overflow:hidden;width:120px;"><a href="{{ URL::to('property-details/'.$pin->id) }}">@foreach($pin->propImages->slice(0, 1) as $image){{ HTML::image('images/propertyImages/'.$image->image, $pin->title, array('width'=>100, 'height'=>100)) }}@endforeach</a></div>{{ HTML::link('property-details/'.$pin->id, $pin->title) }} <br/> {{ $pin->propLocation->city }}</div>', {{ $pin->propLocation->lat }}, {{ $pin->propLocation->lng }}, 'type: Rent'],
                @endforeach
            ];
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 10,
                center: new google.maps.LatLng(25.412392055138543, 51.188288833984416),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            var infowindow = new google.maps.InfoWindow();
            var marker, i;
            var icons = {
                Rent: {
                    icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
                },
                Sell: {
                    icon: 'http://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2%7CFF0000'
                }
            };

            for (i = 0; i < locations.length; i++) {
                marker = new google.maps.Marker({
                    icon: icons[locations.type],
                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                    map: map
                });

                google.maps.event.addListener(marker, 'click', (function (marker, i) {
                    return function () {
                        infowindow.setContent(locations[i][0]);
                        infowindow.open(map, marker);
                    }
                })(marker, i));
            }
        </script>

everything is working fine but can't give each one of these marker different color.

I also try this 'type: Rent' at the end of my locations and made it as var down there but didn't work as expected

Answer 1

Looking at the code, the inner elements of locations are not objects--Array of Objects, but a multi-dimensional array. I can tell from the way you access you the elements, for example, latitude, and longitude. Assuming that last element in the array is the type, the type can be obtained using the last index or simply number 3--array length is 4.

var lastIndex = locations[i].length - 1; // total elements (zero-based) minus 1;
var iconType = icons[ locations[i][lastIndex] ].icon;

marker = new google.maps.Marker({
    icon: iconType,
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
});

Or simplified version:

marker = new google.maps.Marker({
    icon: icons[locations[i][4]].icon, // returns Rents or Sell
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
});

Theoretically, the above code should work if you remove the last string type: Rent from your inner-arrays.