how to show different icon for google map markers?

Question

i want to show different marker icons in google map.i have enclosed my code .here i have different icons in that markers1[7].i want to show these icons in google map i have added fiddle https://jsfiddle.net/h9seLt22/7/ instead of default marker iconi need to show dynamic marker icon

angular.module('myApp', [])
    .controller('MapCtrl', [
    '$scope', '$http', '$compile',

function ($scope, $http, $compile) {
    //-------------------------------------------------------------------------------------------------------------------------------------------------
    $scope.find = function () {

        var gmarkers1 = [];
        var markers1 = [];
        var infowindow = new google.maps.InfoWindow({
            content: ''
        });

        // Our markers
        markers1 = [
            ['0', 'Madivala', 12.914494, 77.560381, 'computer science,electronic system,communication thoery,english', 'as12', 'Abi Tech ACC','http://static4.wikia.nocookie.net/__cb20131121214007/destinypedia/images/7/71/Information_Icon.svg'],
            ['1', 'Majestic', 12.961229, 77.559281, 'electronic system,Telecommunication,optical&fiber optics', 'as13', 'Vell Infotech','http://icons.iconarchive.com/icons/kyo-tux/aeon/256/Sign-LogOff-icon.png'],
            ['2', 'Ecity', 12.92489905, 77.56070772, 'communication thoery,english,Digital Electronics,signal&systems', 'as14', 'vinoth coching center','http://icons.iconarchive.com/icons/artua/mac/512/Intranet-icon.png'],
            ['3', 'Jp nagar', 12.91660662, 77.52047465, 'Digital Electronics,signal&systems', 'as15', 'Gpy tech archi','http://www.psdgraphics.com/file/upload-icon.jpg']
        ];

        /**
         * Function to init map
         */

        function initialize() {
            var center = new google.maps.LatLng(12.9667, 77.5667);
            var mapOptions = {
                zoom: 12,
                center: center,
                mapTypeId: google.maps.MapTypeId.TERRAIN
            };

            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            for (i = 0; i < markers1.length; i++) {
                addMarker(markers1[i]);
            }
        }

        /**
         * Function to add marker to map
         */

        function addMarker(marker) {
            var category = marker[4];
            var title = marker[1];
            var pos = new google.maps.LatLng(marker[2], marker[3]);
            var content = marker[1];
            var fullContent = marker.slice(1, 6).join();

            var marker1 = new google.maps.Marker({
                title: title,
                position: pos,
                category: category,
                map: map
            });

            gmarkers1.push(marker1);

            // Marker click listener
            google.maps.event.addListener(marker1, 'click', (function (marker1, idx, markers1) {
                return function () {
                    console.log('Gmarker 1 gets pushed');
                    var compiled = '<div><div>' + markers1[idx][0] + ' </div><div>' + markers1[idx][1] + ' </div><div>' + markers1[idx][2] + ' </div><div><button id="' + markers1[idx][5] + '">Get</button></div></div>';
                    var infowindow = new google.maps.InfoWindow({
                        content: compiled
                    });
                    infowindow.open(map, marker1);
                    map.panTo(this.getPosition());
                    map.setZoom(15);
                }
            })(marker1, i, markers1));
        }
        $(document.body).on('click', 'button', function () {
            console.log(this.id);
        });
        /**
         * Function to filter markers by category
         */

        filterMarkers = function (category) {
            for (i = 0; i < markers1.length; i++) {
                marker = gmarkers1[i];
                // If is same category or category not picked
                if (marker.category.toLowerCase().indexOf(category.toLowerCase()) > -1 || category.length === 0) {
                    marker.setVisible(true);
                }
                // Categories don't match 
                else {
                    marker.setVisible(false);
                }
            }
        }

        // Init map
        initialize();

    }
}]);

    #map-canvas {
        width: 500px;
        height: 500px;
    }

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="MapCtrl" ng-init="find()">
        <div id="map-canvas"></div>
        <select id="type" onchange="filterMarkers(this.value);">
            <option value="">Please select category</option>
            <option value="computer science">computer science</option>
            <option value="electronic system">electronic system</option>
            <option value="communication thoery">communication thoery</option>
            <option value="english">english</option>
            <option value="optical&fiber optics">optical&fiber optics</option>
            <option value="Digital Electronics">Digital Electronics</option>
            <option value="signal&systems">signal&systems</option>
        </select>
    </div>
    </div

possible duplicate of [Google Maps API v3: How do I dynamically change the marker icon?](http://stackoverflow.com/questions/1941260/google-maps-api-v3-how-do-i-dynamically-change-the-marker-icon) — ScaisEdge, Sep 21 '15 at 10:15
In your 7h element you have a svg or png. and then ? i really a duplication! — ScaisEdge, Sep 21 '15 at 10:39

score 0 · Answer 1 · answered Sep 21 '15 at 11:45

You could specify icon using Marker object initializer

var marker = new google.maps.Marker({
            title: location[1],
            position: new google.maps.LatLng(location[2], location[3]),
            category: location[4],
            map: $scope.map,
            //icon: location[7] //set icon
        });

or using google.maps.Marker.setIcon function:

 var imageIcon = {
            url: location[7],
            // This marker is 20 pixels wide by 32 pixels high.
            size: new google.maps.Size(32, 32),
            // The origin for this image is (0, 0).
            origin: new google.maps.Point(0, 0),
            // The anchor for this image is the base of the flagpole at (0, 32).
            anchor: new google.maps.Point(0, 32)
        };
        marker.setIcon(imageIcon);

Below is provided a modified example that demonstrates how to set marker icons

Modified example

angular.module('myApp', [])
    .controller('MapCtrl', [
    '$scope', '$http', '$compile',

function ($scope, $http, $compile) {


    /**
         * Function to filter locations by category
         */

    $scope.filterMarkers = function () {
        var category = $scope.selectedItem;
        for (var i = 0; i < $scope.markers.length; i++) {
            var marker = $scope.markers[i];
            // If is same category or category not picked
            if (marker.category.toLowerCase().indexOf(category.toLowerCase()) > -1 || category.length === 0) {
                marker.setVisible(true);
            }
                // Categories don't match 
            else {
                marker.setVisible(false);
            }
        }
    };

    //-------------------------------------------------------------------------------------------------------------------------------------------------
    $scope.initMap = function () {

        $scope.markers = [];
        var infowindow = new google.maps.InfoWindow({
            content: ''
        });

       
        var locations = [
            ['0', 'Madivala', 12.914494, 77.560381, 'computer science,electronic system,communication thoery,english', 'as12', 'Abi Tech ACC', 'http://icons.iconarchive.com/icons/martz90/hex/32/location-icon.png'],
            ['1', 'Majestic', 12.961229, 77.559281, 'electronic system,Telecommunication,optical&fiber optics', 'as13', 'Vell Infotech', 'http://icons.iconarchive.com/icons/graphicloads/100-flat/32/location-icon.png'],
            ['2', 'Ecity', 12.92489905, 77.56070772, 'communication thoery,english,Digital Electronics,signal&systems', 'as14', 'vinoth coching center', 'http://icons.iconarchive.com/icons/graphicloads/seo-services/32/location-icon.png'],
            ['3', 'Jp nagar', 12.91660662, 77.52047465, 'Digital Electronics,signal&systems', 'as15', 'Gpy tech archi', 'http://icons.iconarchive.com/icons/graphicloads/transport/32/location-icon.png']
        ];

        /**
         * Function to init map
         */

        function initialize() {
            var center = new google.maps.LatLng(12.9667, 77.5667);
            var mapOptions = {
                zoom: 12,
                center: center,
                mapTypeId: google.maps.MapTypeId.TERRAIN
            };

            $scope.map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            for (var i = 0; i < locations.length; i++) {
                addMarker(locations[i]);
            }
        }

        /**
         * Function to add marker to map
         */

        function addMarker(location) {



            var marker = new google.maps.Marker({
                title: location[1],
                position: new google.maps.LatLng(location[2], location[3]),
                category: location[4],
                map: $scope.map,
                //icon: location[7] //set icon
            });


            var imageIcon = {
                url: location[7],
                // This marker is 20 pixels wide by 32 pixels high.
                size: new google.maps.Size(32, 32),
                // The origin for this image is (0, 0).
                //origin: new google.maps.Point(0, 0),
                // The anchor for this image is the base of the flagpole at (0, 32).
                //anchor: new google.maps.Point(0, 32)
            };
            marker.setIcon(imageIcon);

            $scope.markers.push(marker);

            // Marker click listener
            google.maps.event.addListener(marker, 'click', (function(){
                var compiled = '<div><div>' + location[0] + ' </div><div>' + location[1] + ' </div><div>' + location[2] + ' </div><div><button id="' + location[5] + '">Get</button></div></div>';
                var infowindow = new google.maps.InfoWindow({
                        content: compiled
                });
                infowindow.open($scope.map, marker);
                $scope.map.panTo(this.getPosition());
                $scope.map.setZoom(15);
            }));
        }
       
     
        // Init map
        initialize();

    }
}]);

#map-canvas {
  width: 500px;
  height: 500px;
}

 <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
 <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
 <div ng-app="myApp">
        <div ng-controller="MapCtrl" ng-init="initMap()">
            <div id="map-canvas"></div>
            <select id="type" ng-model="selectedItem" ng-change="filterMarkers()" >
                <option value="">Please select category</option>
                <option value="computer science">computer science</option>
                <option value="electronic system">electronic system</option>
                <option value="communication thoery">communication thoery</option>
                <option value="english">english</option>
                <option value="optical&fiber optics">optical&fiber optics</option>
                <option value="Digital Electronics">Digital Electronics</option>
                <option value="signal&systems">signal&systems</option>
            </select>
        </div>
    </div>

how can i get id value when i click get button in that pop up window — its me, Sep 22 '15 at 05:46

how to show different icon for google map markers?

1 Answers1