Custom icon does not display on Google Maps

Asked

Viewed 126 times

0

I am developing an app that loads a map with some custom markings, these markings work perfectly, but the icon property is not working. I tried to put the icons of Google itself, I tried to leave the default icon marking, but nothing worked

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

Thanks for your help

javascript google-maps

2 answers

0

The problem is in one of these two places:

1- Return your webservice (Store variable) -> Debug and check exactly what is being returned.

2- element[0] -> Check that this variable actually has the map container div

I replaced these two variables to test your example and it worked normally.

Follow the functional example of what you want: http://jsfiddle.net/T78Hd/419/

  • Actually it is not the map that is getting in the way, I copied Google’s own example, but even if it is not working, when I put the mouse over where it should be marked, the name of the marked store appears, the real problem is in the icon property, but I can’t imagine why you said it was happening

  • You can go on Devtools network and check if the image has been downloaded or blocked

  • Create your example in jsFiddle as I did. This makes it difficult to verify what the error is. The default marker normally displays if you remove the icon property? Try to change https to http'

  • Not even if I remove the icon property is working, and I’ve tried changing from http to https, but it didn’t work either

  • I copied exactly the example code that went through the link, but even it didn’t work

  • I edited the answer. Take a look at the example.

Show 1 more comment

0

I figured out what it is, the Google CSS was adding a max-height property, preventing the image from appearing, so I had to set this property, so it worked perfectly.

Thanks for all your help

Browser other questions tagged javascript google-maps

You are not signed in. Login or sign up in order to post.