0

Estou desenvolvendo um aplicativo que carrega um mapa com algumas marcações personalizadas, essas marcações funcionam perfeitamente, porém a propriedade icon não está funcionando. Já testei colocar os ícones do próprio Google, tentei deixar o ícone padrão de marcação, porém nada funcionou

 function criaMapa(lojas) {
            var map = new google.maps.Map(element[0], {
                center: {lat: -34.397, lng: 150.644},
                zoom: 5,
                disableDefaultUI: true
            });

            var marker = [];
            var infowindow = [];

            $.each(lojas.data, function (idx, obj) {
                var latLng = new google.maps.LatLng(obj.Loja_vch_Latitude, obj.Loja_vch_Longitude);

                marker[idx] = new google.maps.Marker({
                    position: latLng,
                    title: obj.Loja_vch_Titulo,
                    animation: google.maps.Animation.DROP,
                    icon: 'https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png',
                    map: map
                });

                var infowindow = new google.maps.InfoWindow();

                var sBalaoConteudo = '\
                    <div class="balao-mapa">\
                        <h1>' + obj.Loja_vch_Titulo + '</h1>\
                        <h2>' + obj.Loja_vch_Descricao + '</h2>\
                    </div>';

                infowindow.setContent(sBalaoConteudo);

                google.maps.event.addListener(marker[idx], 'click', function () {
                    infowindow.open(map, marker[idx]); // click on marker opens info window
                });

            });

            var infoWindow = new google.maps.InfoWindow({map: map});

        }

        $http({
            method: 'POST',
            url: webservice + 'Loja/Listar'
        }).then(function successCallback(response) {
            criaMapa(response);
        });

Agradeço a ajuda desde já

2 Respostas 2

0

O problema está em um desses dois lugares:

1- Retorno do seu webservice (variável Loja) -> Debugue e verifique exatamente o que está sendo retornado.

2- element[0] -> Verifique se essa variável realmente possui a div container do mapa

Eu substituí essas duas variáveis para testar o seu exemplo e funcionou normalmente.

Segue o exemplo funcional do que você quer: http://jsfiddle.net/T78Hd/419/

6
  • Realmente não é o map que está atrapalhando, eu copiei o próprio exemplo do Google, porém mesmo ele não esta funcionando, quando eu coloco o mouse por cima da onde deveria estar marcado, aparece o nome da loja marcada, o real problema está na propriedade icon, mas nem imagino o por que disse estar ocorrendo 27/11/2017 às 15:58
  • Vc pode ir em network do Devtools e verificar se a imagem foi baixada ou se foi bloqueada
    – N. Dias
    27/11/2017 às 16:16
  • Cria o seu exemplo no jsFiddle como eu fiz. Assim fica difícil verificar qual é o erro. O marcador padrão exibe normalmente se remover a propriedade icon? Tenta alterar o 'https' para 'http' 27/11/2017 às 16:37
  • Nem se eu remover a propriedade icon está funcionando, e já tentei alterar de http para https, porem não funcionou tambem 28/11/2017 às 11:12
  • Eu copiei exatamente o código de exemplo que me passou pelo link, porém nem ele deu certo 28/11/2017 às 12:12
0

Descobri o que é, o CSS da Google estava adicionando uma propriedade de max-height, impedindo que a imagem aparecesse, então tive que setar essa propriedade, ai funcionou perfeitamente.

Obrigado pela ajuda de todos

0

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 .