0

Tenho um site no qual o usuário pode criar marcadores no mapa e atribuir uma categoria a esses marcadores. Gostaria que cada marcador de cada categoria tivesse uma imagem diferente. alguém sabe como faço isso?

2 Respostas 2

1

Tenho um exemplo utilizando angular: https://github.com/emirdeliz/meus-projetos/tree/master/google-maps-custom

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);
}
0

Você pode definir as imagens de cada categoria previamente (trazendo a url das mesmas do banco de dados, ou armazenando diretamente em variáveis, etc) e ao criar o marcador a imagem deve ser passada como um parâmetro.

O exemplo abaixo cria um mapa simples com um marcador ao centro usando uma imagem definida previamente.

<!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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .