0

I am asked to show a custom icon of the company in the maps. I have been googling and found out that RichMarker can do that as suggested here

The following is what I have already tried:

if (GoogleMap === false) {
        console.log(GoogleMap);
        $.getScript("https://maps.google.com/maps/api/js?key=MyKey&sensor=false&libraries=places,geometry")
            .done(function (script, textStatus) {
                initializeGoogleMap();
                GoogleMap = true;
            });
    }else{
        initializeGoogleMap();
    }
}

function initializeGoogleMap(){

var myLoc, map;

myLoc = {lat: 34.640765, lng: 50.874745};
map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: myLoc
});

var Marker = new google.maps.RichMarker({
   position: myLoc,
   map: map,
   content: "<i class='WMi-check'></i>"
});
}

But I get nothing in the map. Please Help.

M Reza Saberi
  • 7,134
  • 9
  • 47
  • 76
  • 1
    Have you tried the "iconUrl" or "icon" parameters in Marker, instead of RichMarker ? Best regards https://developers.google.com/maps/documentation/javascript/markers?hl=fr – andrea06590 Nov 02 '17 at 09:23
  • @Westi-Tech Yes, I have and it works that way. But currently I kinda need this way. – M Reza Saberi Nov 02 '17 at 09:29
  • 1
    @AfghanDeveloper Have you tried default marker with icon for customer image? – krishnar Nov 02 '17 at 11:12

1 Answers1

0

Display custom icon instead of google map default marker

            var car = "M17.402,0H5.643C2.526,0,0,3.467,0,6.584v34.804c0,3.116,2.526,5.644,5.643,5.644h11.759c3.116,0,5.644-2.527,5.644-5.644 V6.584C23.044,3.467,20.518,0,17.402,0z M22.057,14.188v11.665l-2.729,0.351v-4.806L22.057,14.188z M20.625,10.773 c-1.016,3.9-2.219,8.51-2.219,8.51H4.638l-2.222-8.51C2.417,10.773,11.3,7.755,20.625,10.773z M3.748,21.713v4.492l-2.73-0.349 V14.502L3.748,21.713z M1.018,37.938V27.579l2.73,0.343v8.196L1.018,37.938z M2.575,40.882l2.218-3.336h13.771l2.219,3.336H2.575z M19.328,35.805v-7.872l2.729-0.355v10.048L19.328,35.805z";

            var icon = {
                path: car,
                scale: .7,
                strokeColor: 'white',
                strokeWeight: .10,
                fillOpacity: 1,
                fillColor: '#404040',
                offset: '5%',
                anchor: new google.maps.Point(10, 25) 
            }; 

           marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i]['LAT'], locations[i]['LON']),
                    map: map,
                    icon: icon,
                });
Matiur Rahman Mozumdar
  • 444
  • 1
  • 4
  • 12