Bookmarks in Google Maps

I have an example using angular: link

app.controller("GoogleMapsCustomController", function($scope) {
    $scope.map = { center: { latitude: -23.586172, longitude: -46.657085 }, zoom: 10};
    $scope.map.randomMarkers = [];
    var adressOfCustomer = [
                             ["BAZAR BARAO LTDA ME", "AV.JOAO XXIII,84-V.FORMOSA, SP"],                                          
                             ["MAGAZINE BELEZA CENTER LTDA", "AV DOS IGARAPES, 1571, SP"],                                                
                             ["ESTACIONAMENTO CARREIRA LTDA ME", "AV.SAPOPEMBA,3016 SAPOPEMBA, SP"],                                          
                             ["LUIS GONZAGA GARDINALI ME", "R.FREI CANECA,22 - CENTRO, SP"],                                             
                             ["A R NETTO", "R.ANTONIO GONCALVES TEIXEIRA, 53, SP"],                                     
                             ["O DONEGA MOJI MIRIM ", "R.BUTANTA, 17-PINHEIROS, SP"],                                               
                             ["MAGAZINE MISS ELEGAN LTDA", "R GOVERNADOR PEDRO DE TOLEDO 1021, SP"],                                   
                             ["O.Y.OKI & CIA.LTDA ", "R.JOSE BONIFACIO,60, SP"]
                         ];

    $scope.setMarkers = function(numberOfMarkers) {
        setLatitudeAndLongitudeByAdress(adressOfCustomer, $scope.map);
    };

    $scope.onMarkerClicked = function(marker){
        marker.showWindow = true;
        $scope.$apply();
    };
});

app.controller("InfoController", function($scope) {
    $scope.templateValue = 'hello from the template itself';
    $scope.clickedButtonInWindow = function() {
        var msg = 'clicked a window in the template!';
        $log.info(msg);
        alert(msg);
    }
});

function setLatitudeAndLongitudeByAdress(adressOfCustomer, map){
    var geocoder = new google.maps.Geocoder();

    angular.forEach(adressOfCustomer, function(value, key) {
        var adress = value[1];
        geocoder.geocode({ 'address': adress + ', Brasil', 'region': 'BR' }, function (results, status) {
            var latitude = results[0].geometry.location.lat();
            var longitude = results[0].geometry.location.lng();
            var customer = value[0];
            var itemMap = {
                latitude : latitude,
                longitude : longitude,
                title : customer,
                id : key,
                adress : adress,
                date : "10/11/2015"
                icon : <aqui define o icone. Passar o caminho de uma img>
            };
            map.randomMarkers.push(itemMap);
        });
    });
}

function init(){

    var adressOfCustomer = [
        ["BAZAR BARAO LTDA ME", "AV.JOAO XXIII,84-V.FORMOSA, SP"],                                          
        ["MAGAZINE BELEZA CENTER LTDA", "AV DOS IGARAPES, 1571, SP"],                                                
        ["ESTACIONAMENTO CARREIRA LTDA ME", "AV.SAPOPEMBA,3016 SAPOPEMBA, SP"],                                          
        ["LUIS GONZAGA GARDINALI ME", "R.FREI CANECA,22 - CENTRO, SP"],                                             
        ["A R NETTO", "R.ANTONIO GONCALVES TEIXEIRA, 53, SP"],                                     
        ["O DONEGA MOJI MIRIM ", "R.BUTANTA, 17-PINHEIROS, SP"],                                               
        ["MAGAZINE MISS ELEGAN LTDA", "R GOVERNADOR PEDRO DE TOLEDO 1021, SP"],                                   
        ["O.Y.OKI & CIA.LTDA ", "R.JOSE BONIFACIO,60, SP"]
    ];

    var locationOfCustomer = getLatitudeAndLongitudeByAdress(adressOfCustomer);
    initializeMaps(locationOfCustomer);
}

You can define the images of each category in advance (by bringing them to the url of the same ones from the database, or storing them directly in variables, etc.) and when creating the marker the image should be passed as a parameter.

The example below creates a simple map with a marker in the center using a previously defined image.

<!DOCTYPE html>
<html>
  <head>
    <title> Marcador </title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
        var map;
        function initMap() {
          map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: -19.919, lng: -43.938},
            zoom: 13
          });

          // posição do marcador
          var posicao  = new google.maps.LatLng(-19.919115639305936, -43.93845113370514);

          // endereço da imagem
          var image    = 'http://www.alexandremucci.com.br/software/transitobh/images/cctv_naoapagar.png';

          // criação do marcador com posição, mapa e imagem passados como parâmetro
          var marcador = new google.maps.Marker({position: posicao, map: map, icon: image});
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
  </body>
</html>