Menu
This code is to set a caption in a label point, but how to change the font size?
label: {text: marcadores[i][0], color: 'black', TAGFORFONTSIZE: valuesize}
My code:
<html lang='es'>
<head>
<meta charset='UTF-8'>
<style type='text/css'>
#mapa { height: 500px; }
</style>
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script>
<script type='text/javascript'>
function initialize() {
var marcadores = [
['usu1', -5.31987835340327, -52.8212431459598],
['usu4', 42.3617, -3.6789]
];
var map = new google.maps.Map(document.getElementById('mapa'), {
zoom: 7,
center: new google.maps.LatLng(41.503, -5.744),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < marcadores.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(marcadores[i][1], marcadores[i][2]),
map: map,
label: {text: marcadores[i][0], color: 'black'}
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(marcadores[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id='mapa'></div>
</body>
</html>
941
From the documentation:
fontSize Type: string
The font size of the label text (equivalent to the CSS font-size property). Default size is 14px.
marker = new google.maps.Marker({
position: new google.maps.LatLng(marcadores[i][1], marcadores[i][2]),
map: map,
label: {
text: marcadores[i][0],
color: 'black',
fontSize: "8px"
}
});
proof of concept fiddle
code snippet:
function initialize() {
var marcadores = [
['usu1', -5.31987835340327, -52.8212431459598],
['usu4', 42.3617, -3.6789]
];
var map = new google.maps.Map(document.getElementById('mapa'), {
zoom: 7,
center: new google.maps.LatLng(41.503, -5.744),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < marcadores.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(marcadores[i][1], marcadores[i][2]),
map: map,
label: {
text: marcadores[i][0],
color: 'black',
fontSize: "8px"
}
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(marcadores[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', initialize);html,
body,
#mapa {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="mapa"></div>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
