Assigned
Status Update
No update yet.
Comments
ra...@google.com
Thank you for your suggestion!
We'll be reviewing this for further consideration. Please star this issue to get updates and leave comments for additional information. Please note that starring the issue also provides our product team with valuable feedback on the importance of the issue to our customers.
You can also check
ma...@gmail.com
N
ma...@gmail.com
AdvancedMarker glyph can be string|Element|URL.
let glyphLabel = document.createElement("div");
// set style and classes as needed
glyphLabel.style = 'color: white; font-size: 17px;';
glyphLabel.classList.add('classname');
glyphLabel.innerText = length.toFixed(2) + ' m';
let iconImage = new google.maps.marker.PinElement({
glyph: glyphLabel,
});
const marker = new google.maps.marker.AdvancedMarkerElement({
position: position,
content: iconImage.element,
map: map,
});
ga...@zealty.ca
I have written some code to implement a label feature for AdvancedMarkerElement. This assumes the content is set to a DIV element that you provide.
Here's the code; remember to change YOUR_KEY_HERE and YOUR_MAPID_HERE to appropriate values.
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.marker-label-ame {
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: bold;
color: black;
}
</style>
<title>AdvancedMarkerElement extension: label support</title>
</head>
<body>
<div id="map"></div>
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps. ${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()= >h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
({key: "YOUR_KEY_HERE", v: "weekly"});</script>
<script>
const kSpriteInfo = {
url: "https://bcrealestatemap.ca/map/artwork/hospital-icon.png "
,columns: 1
,rows: 1
,iconWidth: 35
,iconHeight: 35
,anchorX: 17.5
,anchorY: 17.5
,labelAnchorX: 17.5
,labelAnchorY: 35
};
async function initMap() {
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
/**
AdvancedMarkerWithLabel class for Google Maps V3
Version 1.0 [June 19, 2024]
Author Gary Little
This defines a AdvancedMarkerWithLabel class with the options specified in
opt_options. It is an extension of the google.maps.marker.AdvancedMarkerElement
class.
Options available are the same as for google.maps.marker.AdvancedMarkerElement
with the addition of the "label" option.
label -- The label to be attached to the marker. label is an object made
up of several properties: text, className, color, fontFamily, fontSize,
and fontWeight. The label is attached to the first child DIV of the
content DIV that defines the visual appearance of the marker.
*/
class AdvancedMarkerWithLabel extends google.maps.marker.AdvancedMarkerElement {
constructor( opt_options ) {
super(opt_options);
this.label = opt_options["label"] || {};
}
set label( labelInfo ) {
var allDIV, labelDIV;
// NOTE: The label text is placed in the first child DIV of the content.
//
allDIV = this.content.getElementsByTagName("DIV");
labelDIV = (allDIV.length > 0) ? allDIV[0] : null;
if ( labelDIV ) {
if ( labelDIV.style.color == "" && typeof labelInfo.color === "undefined") {
labelInfo.color = "black"; // Default color
}
if ( labelDIV.style.fontSize == "" && typeof labelInfo.fontSize === "undefined") {
labelInfo.fontSize = "14px"; // Default font size
}
if ( typeof labelInfo.text !== "undefined" ) { labelDIV.innerHTML = labelInfo.text; }
if ( typeof labelInfo.className !== "undefined" ) { labelDIV.className = labelInfo.className; }
if ( typeof labelInfo.color !== "undefined" ) { labelDIV.style.color = labelInfo.color; }
if ( typeof labelInfo.fontFamily !== "undefined" ) { labelDIV.style.fontFamily = labelInfo.fontFamily; }
if ( typeof labelInfo.fontSize !== "undefined" ) { labelDIV.style.fontSize = labelInfo.fontSize; }
if ( typeof labelInfo.fontWeight !== "undefined" ) { labelDIV.style.fontWeight = labelInfo.fontWeight; }
}
}
}
// Register the new class as a custom HTML element.
//
window.customElements.define(
"advanced-marker-label"
,AdvancedMarkerWithLabel
);
const gMap = new Map(document.getElementById("map"), {
center: { lat: 49.26151, lng: -123.12216 }
,zoom: 17
,mapId: "YOUR_MAPID_HERE"
});
const marker = new AdvancedMarkerWithLabel({
map: gMap
,position: {
lat: 49.26151
,lng: -123.12216
}
,content: getContentFromFile(0, 0, kSpriteInfo)
,label: {
text: "Vancouver General Hospital"
,className: "marker-label-ame"
,color: "black"
,fontFamily: "Arial, sans-serif"
,fontSize: "12px"
,fontWeight: "bold"
}
});
}
/**
getContentFromFile()
Author: Gary Little
Returns from a file the content DIV to be provided to a AdvancedMarkerWithLabel
via the content property. The file contains either a single icon or a sprite
defining a grid of icons. spriteInfo defines the structure of the file.
For a single-icon file, row = 0 and column = 0. For a sprite file, specify
the row and column number (both zero based) of the sprite to be retrieved.
NOTE: The first DIV child of the content DIV is where the text of the marker
label will be stored by the AdvancedMarkerWithLabel. The width of this label DIV
is set to labelContainerWidth; longer labels will wrap to the next line. The
label content will be centered inside this DIV.
*/
function getContentFromFile( row, column, spriteInfo, labelContainerWidth = 200 ) {
const iconWidth = spriteInfo["iconWidth"];
const iconHeight = spriteInfo["iconHeight"];
const iconAnchorX = spriteInfo["anchorX"];
const iconAnchorY = spriteInfo["anchorY"];
const labelAnchorX = spriteInfo["labelAnchorX"];
const labelAnchorY = spriteInfo["labelAnchorY"];
const spriteURL = spriteInfo["url"];
const spriteWidth = iconWidth * spriteInfo["columns"];
const spriteHeight = iconHeight * spriteInfo["rows"];
const isSprite = !(spriteInfo["columns"] == 1 && spriteInfo["rows"] == 1);
const contentDIV = document.createElement("DIV");
const iconIMG = document.createElement("IMG");
const labelDIV = document.createElement("DIV"); // Must be first child DIV
contentDIV.style.position = "relative";
if ( isSprite ) { contentDIV.style.overflow = "hidden"; }
contentDIV.style.width = iconWidth + "px";
contentDIV.style.height = iconHeight + "px";
// By default, AdvancedMarkerElement markers are anchored at the middle of the
// bottom edge of the icon. Here we translate from here to the desired anchor.
//
contentDIV.style.transform = "translate(" + ((iconWidth / 2) - iconAnchorX) + "px, " + (iconHeight - iconAnchorY) + "px)";
iconIMG.src = spriteURL;
iconIMG.style.position = "absolute";
iconIMG.style.width = spriteWidth + "px";
iconIMG.style.height = spriteHeight + "px";
iconIMG.style.top = -(iconHeight * row) + "px";
iconIMG.style.left = -(iconWidth * column - 1) + "px";
// Set up a label DIV to hold the label text. This
// must be the first DIV child of the content DIV.
//
labelDIV.style.position = "absolute";
labelDIV.style.textAlign = "center";
labelDIV.style.width = labelContainerWidth + "px";
// Center the label DIV around the X-axis anchor point:
labelDIV.style.left = (labelAnchorX - (labelContainerWidth / 2)) + "px";
// Set the vertical position of the label DIV to the Y-axis anchor point:
labelDIV.style.top = labelAnchorY + "px";
contentDIV.appendChild(iconIMG);
contentDIV.appendChild(labelDIV);
return contentDIV;
}
initMap();
</script>
</body>
</html>
Here's the code; remember to change YOUR_KEY_HERE and YOUR_MAPID_HERE to appropriate values.
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.marker-label-ame {
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: bold;
color: black;
}
</style>
<title>AdvancedMarkerElement extension: label support</title>
</head>
<body>
<div id="map"></div>
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`
({key: "YOUR_KEY_HERE", v: "weekly"});</script>
<script>
const kSpriteInfo = {
url: "
,columns: 1
,rows: 1
,iconWidth: 35
,iconHeight: 35
,anchorX: 17.5
,anchorY: 17.5
,labelAnchorX: 17.5
,labelAnchorY: 35
};
async function initMap() {
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
/**
AdvancedMarkerWithLabel class for Google Maps V3
Version 1.0 [June 19, 2024]
Author Gary Little
This defines a AdvancedMarkerWithLabel class with the options specified in
opt_options. It is an extension of the google.maps.marker.AdvancedMarkerElement
class.
Options available are the same as for google.maps.marker.AdvancedMarkerElement
with the addition of the "label" option.
label -- The label to be attached to the marker. label is an object made
up of several properties: text, className, color, fontFamily, fontSize,
and fontWeight. The label is attached to the first child DIV of the
content DIV that defines the visual appearance of the marker.
*/
class AdvancedMarkerWithLabel extends google.maps.marker.AdvancedMarkerElement {
constructor( opt_options ) {
super(opt_options);
this.label = opt_options["label"] || {};
}
set label( labelInfo ) {
var allDIV, labelDIV;
// NOTE: The label text is placed in the first child DIV of the content.
//
allDIV = this.content.getElementsByTagName("DIV");
labelDIV = (allDIV.length > 0) ? allDIV[0] : null;
if ( labelDIV ) {
if ( labelDIV.style.color == "" && typeof labelInfo.color === "undefined") {
labelInfo.color = "black"; // Default color
}
if ( labelDIV.style.fontSize == "" && typeof labelInfo.fontSize === "undefined") {
labelInfo.fontSize = "14px"; // Default font size
}
if ( typeof labelInfo.text !== "undefined" ) { labelDIV.innerHTML = labelInfo.text; }
if ( typeof labelInfo.className !== "undefined" ) { labelDIV.className = labelInfo.className; }
if ( typeof labelInfo.color !== "undefined" ) { labelDIV.style.color = labelInfo.color; }
if ( typeof labelInfo.fontFamily !== "undefined" ) { labelDIV.style.fontFamily = labelInfo.fontFamily; }
if ( typeof labelInfo.fontSize !== "undefined" ) { labelDIV.style.fontSize = labelInfo.fontSize; }
if ( typeof labelInfo.fontWeight !== "undefined" ) { labelDIV.style.fontWeight = labelInfo.fontWeight; }
}
}
}
// Register the new class as a custom HTML element.
//
window.customElements.define(
"advanced-marker-label"
,AdvancedMarkerWithLabel
);
const gMap = new Map(document.getElementById("map"), {
center: { lat: 49.26151, lng: -123.12216 }
,zoom: 17
,mapId: "YOUR_MAPID_HERE"
});
const marker = new AdvancedMarkerWithLabel({
map: gMap
,position: {
lat: 49.26151
,lng: -123.12216
}
,content: getContentFromFile(0, 0, kSpriteInfo)
,label: {
text: "Vancouver General Hospital"
,className: "marker-label-ame"
,color: "black"
,fontFamily: "Arial, sans-serif"
,fontSize: "12px"
,fontWeight: "bold"
}
});
}
/**
getContentFromFile()
Author: Gary Little
Returns from a file the content DIV to be provided to a AdvancedMarkerWithLabel
via the content property. The file contains either a single icon or a sprite
defining a grid of icons. spriteInfo defines the structure of the file.
For a single-icon file, row = 0 and column = 0. For a sprite file, specify
the row and column number (both zero based) of the sprite to be retrieved.
NOTE: The first DIV child of the content DIV is where the text of the marker
label will be stored by the AdvancedMarkerWithLabel. The width of this label DIV
is set to labelContainerWidth; longer labels will wrap to the next line. The
label content will be centered inside this DIV.
*/
function getContentFromFile( row, column, spriteInfo, labelContainerWidth = 200 ) {
const iconWidth = spriteInfo["iconWidth"];
const iconHeight = spriteInfo["iconHeight"];
const iconAnchorX = spriteInfo["anchorX"];
const iconAnchorY = spriteInfo["anchorY"];
const labelAnchorX = spriteInfo["labelAnchorX"];
const labelAnchorY = spriteInfo["labelAnchorY"];
const spriteURL = spriteInfo["url"];
const spriteWidth = iconWidth * spriteInfo["columns"];
const spriteHeight = iconHeight * spriteInfo["rows"];
const isSprite = !(spriteInfo["columns"] == 1 && spriteInfo["rows"] == 1);
const contentDIV = document.createElement("DIV");
const iconIMG = document.createElement("IMG");
const labelDIV = document.createElement("DIV"); // Must be first child DIV
contentDIV.style.position = "relative";
if ( isSprite ) { contentDIV.style.overflow = "hidden"; }
contentDIV.style.width = iconWidth + "px";
contentDIV.style.height = iconHeight + "px";
// By default, AdvancedMarkerElement markers are anchored at the middle of the
// bottom edge of the icon. Here we translate from here to the desired anchor.
//
contentDIV.style.transform = "translate(" + ((iconWidth / 2) - iconAnchorX) + "px, " + (iconHeight - iconAnchorY) + "px)";
iconIMG.src = spriteURL;
iconIMG.style.position = "absolute";
iconIMG.style.width = spriteWidth + "px";
iconIMG.style.height = spriteHeight + "px";
iconIMG.style.top = -(iconHeight * row) + "px";
iconIMG.style.left = -(iconWidth * column - 1) + "px";
// Set up a label DIV to hold the label text. This
// must be the first DIV child of the content DIV.
//
labelDIV.style.position = "absolute";
labelDIV.style.textAlign = "center";
labelDIV.style.width = labelContainerWidth + "px";
// Center the label DIV around the X-axis anchor point:
labelDIV.style.left = (labelAnchorX - (labelContainerWidth / 2)) + "px";
// Set the vertical position of the label DIV to the Y-axis anchor point:
labelDIV.style.top = labelAnchorY + "px";
contentDIV.appendChild(iconIMG);
contentDIV.appendChild(labelDIV);
return contentDIV;
}
initMap();
</script>
</body>
</html>
ac...@gmail.com
If label is not supported, how are we supposed to migrate to advanced marker?
We are blocked.
We are blocked.
ga...@zealty.ca
Well, try the technique detailed in reply #5. We've been using this successfully for several months.
jl...@gmail.com
There should be an official path to migrate WITH labels; above work around is like migrating an app twice; We'll wait on version 3.57 and trust google realizes their mistakes and develops a proper replacement
pe...@gmail.com
Reply #4 works for me. Short and easy to patch into my existing code. And it overcomes the 1 digit limitation that used to limit numbering stops.
bn...@gmail.com
I'd recommend using the background style attribute like this:
let img = document.createElement('div');
img.style = `width: 20px; height: 20px; font-size: 11px; background: url('${imgPath}') no-repeat center center;`;
img.innerText = label;
let img = document.createElement('div');
img.style = `width: 20px; height: 20px; font-size: 11px; background: url('${imgPath}') no-repeat center center;`;
img.innerText = label;
jo...@gmail.com
it's not reasonable to expect people to migrate from Markers to AdvancedMarkers without implementing all the major features, like labels. maybe a workaround works, maybe not, but it should be officially supported, not up to the developer to figure it out by sifting through forums, SO posts, and issues. not a classy move.
ma...@sensio.cz
I was able to insert text into advanced marker using CSS ::before pseudoelement. I create markers in HTML with <gmp-advanced-marker> elements.
CSS:
gmp-advanced-marker::before {
/* data-content attribute is defined on the element */
content: attr(data-content);
top: 5px;
right: 4px;
position: absolute;
background: #ea4335;
width: 18px;
text-align: center;
}
Description
Hello,
AdvancedMarkerElement does currently not support label in any way.
I use "label" to display the length of a line between two points as text like this in my project:
This is not easily changeable when AdvancedMarkerElement does not support "label". It should work exactly like label in the (Legacy) Marker to make the migration as painless as possible.
Thanks in advance.