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();
Markers are just images, you can't just change its background color, you have to define a new icon. First, prepare new transparent images with right colors. Then create new icon definitions.
var icons = {
green: {
// link to an image, use https if original site also uses https
url: 'https://i.imgur.com/5Yd25Ga.png',
// set size of an image
size: new google.maps.Size(22, 40),
// if an image is a sprite, set its relative position from 0, 0
origin: new google.maps.Point(0, 0),
// part of an image pointing on location on the map
anchor: new google.maps.Point(11, 40),
// position of text label on icon
labelOrigin: new google.maps.Point(11, 10)
},
red: {
// ...
}
};
Documentation of icon properties
When adding new marker set its icon to one of defined icons.
markerB = new google.maps.Marker({
position: pointB,
title: "point B",
label: "BB",
icon: icons.green,
map: map
});
When points are close to each other, you will notice that text labels are overlapping. To fix it, add increasing zIndex
to every marker.
markerA = new google.maps.Marker({
position: pointA,
title: "point A",
label: "AA",
zIndex: 1000,
icon: icons.red,
map: map
});
markerB = new google.maps.Marker({
position: pointB,
title: "point B",
label: "BB",
zIndex: 1001,
icon: icons.green,
map: map
});
Full working example: jsfiddle.net/yLhbxnz6/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With