Label Appear without Showing Icon

[afuzha]

i have put all require file like, dist/css/map-icons.css , dist/js/map-icons.js, then i make maker like this:

    var marker = new google.maps.Marker(
    {
        position: myLatLng,
        map: map,
        icon: {
            path: SQUARE_ROUNDED,
            fillColor: '#00CCBB',
            fillOpacity: 1,
            strokeColor: '',
            strokeWeight: 0
        },
        map_icon_label: '<span class="map-icon map-icon-park"></span>'
    });

but icon is not appear, just label like this:

anyone can help me to fix this?
thank you

[uzenith360]

I'm having the same issue, any help?

[fasidOnGit]

Markers are created just like a normal Google Maps Marker, however, the class is extended for the map_icon_label property to add in markup for marker labels.

Note: You should be creating an instance of Marker rather than google.maps.Marker in order for the functionality added by map_icon_label to work.

var marker = new Marker({
map: map,
position: new google.maps.LatLng(-27.46577, 153.02303),
icon: {
path: SQUARE_PIN,
fillColor: '#00CCBB',
fillOpacity: 1,
strokeColor: '',
strokeWeight: 0
},
map_icon_label: ''
});

[afuzha]

i have try with

var marker = new Marker({

but if i use that, it not show anything...

[fasidOnGit]

@fuzha How are you using var marker ? . I mean you should be passing it along google.maps.event below is the one way of doing it. You can also pass it like google.maps.event.addListenerOnce(window , 'load , function(){ . please check the GoogleMap API to create simple map.
`$scope.map=new google.maps.Map(document.getElementById("map") , mapOptions);

google.maps.event.addListenerOnce($scope.map , 'idle' , function(){
  var marker = new Marker({
    map : $scope.map,
    animation : google.maps.Animation.DROP,
    position : LatLang ,
    icon: {
           path: SQUARE_PIN,
	fillColor: '#0c60ee',
	fillOpacity: 1,
	strokeColor: '',
	strokeWeight: 0,
            scale: 5

},
map_icon_label: '<span class="map-icon map-icon-location-arrow"></span>' });

});`

If this dint fix. Please share the code or snippet if possible. Thanks.

[afuzha]

@fasidOnGit please review my code on https://codeshare.io/aJpBYZ

thank you...

[SpinGit]

Wow awesome project, well done.

But I having the same issue as well. In your example.html everything works well, but not in my angular 2 project.

var mapOptions = {
		zoom: 16,
		center: center,
		scrollwheel: false,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		styles: [
			{stylers: [{ visibility: 'simplified' }]},
			{elementType: 'labels', stylers: [{ visibility: 'off' }]}
		]
	};

const marker =  new Marker({
      position: position,
      map: map,
      icon:  {
        path: ROUTE,
        fillColor: '#00CCBB',
        fillOpacity: 1,
        strokeColor: '',
        strokeWeight: 0
      },
      map_icon_label: '<span class="map-icon map-icon-transit-station"></span>'
    });

The font icon is shown on the upper left. Some CSS Issue?

[DavoodAmini]

I had the same issue.
Adding codes and Script tags in the same order as Example worked for me.

[SpinGit]

The forked version of https://github.com/bmauser/map-icons works much better. Would be nice if the author should accept the pull request. :)

[latifcakra]

marker = new mapIcons.Marker({
map: map,
title: markers[i][0],
position: position,
icon: {
path: mapIcons.shapes.SQUARE_PIN,
fillColor: '#c61f1f',
fillOpacity: 1,
strokeColor: '',
strokeWeight: 0,
},