Marker label overlapping when two markers are close to each other. How to give background color to google maps marker?

Viewed 5509

I am using google maps version 3 api and google maps marker. When the markers are close to each other the labels overlap and it looks bad. I was trying to give background color to the marker label but google maps marker label does not seem to have background color property. I tried using MarkerWithLabel api but rendering was slower when I had 1000s of markers compared to google maps deafult Marker Label. I have included the js fiddle. Can anyone please help me with this ?

https://jsfiddle.net/dcvc99qz/12/

function initMap() {
    var pointA = new google.maps.LatLng(51.2750, 1.0870),
        pointB = new google.maps.LatLng(51.2750, 0.8140),
        myOptions = {
            zoom: 5,
            center: pointA,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        },
        map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
        markerA = new google.maps.Marker({
            position: pointA,
            title: "point A",
            label: "AA",
            map: map
        }),
        markerB = new google.maps.Marker({
            position: pointB,
            title: "point B",
            label: "BB",
            map: map
        });

}

initMap();
1 Answers
Related