Я пытаюсь отобразить маркер с меткой на картах Google. Я использую библиотеку markerwithlabel.js, которая позволяет мне это достичь. В принципе, я могу представить HTML + CSS в качестве метки маркера, и он будет отображаться на карте.Html css выравнивание в правой части изображения
Все работает хорошо в этом смысле, я просто хочу сделать его более красивым и отображать ярлык и длительность в ряд с маркером изображения.
Вот как это выглядит на данный момент:
Я хотел бы дисплей Norwich \n 1hour
на правой стороне синего круга.
Не могли бы вы помочь мне с CSS и HTML.
HTML и JS:
var markerHTML = '{0}<br>{1}'.format(places[i].name, '1hour');
var marker = new MarkerWithLabel({
position: new google.maps.LatLng(lat, lng),
draggable: false,
raiseOnDrag: true,
map: map,
labelContent: markerHTML,
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 1.0},
icon: "images/markers/blue_circle.png"
});
CSS:
.labels {
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 12px;
font-weight: bold;
text-align: left;
width: 100px;
white-space: normal;
word-spacing: 9999999px;
display: inline;
margin: 5%;
color: #000000;
filter:alpha(opacity=1);
}
Это 'width' свойство может быть проблемой. Попробуйте удалить его или установить его шире. – jmargolisvt
Просьба представить [Минимальный, завершенный, проверенный и читаемый пример] (http://stackoverflow.com/help/mcve), который демонстрирует проблему. – geocodezip