All geek questions in one place

How to change font color google maps marker clusterer

Can someone please tell me how to change the font color of the marker markerclusterer. This is my current marker styling code.

mcOptions = {styles: [{ height: 27, url: "image.png", width: 35 }], maxZoom: 8 } var markerCluster = new MarkerClusterer(map, markers, mcOptions);
+5
source share
5 answers

You can check this documentation for the cluster token in the ClusterIconStyle class

There is an option called textColor which sets the color of the label text displayed on the cluster icon.

+9
source

Working JSFIDDLE to change cluster marker font properties. Below is the code:

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>MarkerClusterer v3 Simple Example</title> <style > body { margin: 0; padding: 10px 20px 20px; font-family: Arial; font-size: 16px; } #map-container { padding: 6px; border-width: 1px; border-style: solid; border-color: #ccc #ccc #999 #ccc; -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px; -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px; box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px; width: 600px; } #map { width: 600px; height: 400px; } </style> <script src="https://maps.googleapis.com/maps/api/js"></script> <script src="https://googlemaps.imtqy.com/js-marker-clusterer/examples/data.json"></script> <script type="text/javascript" src="https://googlemaps.imtqy.com/js-marker-clusterer/src/markerclusterer.js"></script> <script> function initialize() { var center = new google.maps.LatLng(37.4419, -122.1419); var map = new google.maps.Map(document.getElementById('map'), { zoom: 3, center: center, mapTypeId: google.maps.MapTypeId.ROADMAP }); var markers = []; for (var i = 0; i < 100; i++) { var dataPhoto = data.photos[i]; var latLng = new google.maps.LatLng(dataPhoto.latitude, dataPhoto.longitude); var marker = new google.maps.Marker({ position: latLng }); markers.push(marker); } var mcOptions = { //imagePath: 'https://googlemaps.imtqy.com/js-marker-clusterer/images/m', styles:[{ url: "https://googlemaps.imtqy.com/js-marker-clusterer/images/m1.png", width: 53, height:53, fontFamily:"comic sans ms", textSize:15, textColor:"red", //color: #00FF00, }] }; var markerCluster = new MarkerClusterer(map, markers, mcOptions); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <h3>A simple example of MarkerClusterer (100 markers)</h3> <div id="map-container"><div id="map"></div></div> </body> </html>

Here is a link link to the API for additional parameters and settings.

+11
source

try it

 mcOptions = {styles: [{ height: 27, url: "image.png", width: 35, color: #00FF00, }], maxZoom: 8 }
0
source 
 public Bitmap makeIcon(String text, int textColor) { ensureViewsSetUp(); if (mTextView != null) { mTextView.setText(text); mTextView.setTextColor(textColor); } return makeIcon(); }

There are clusters on the Google map, and by default, the background color of the cluster is blue, and the color of the text (number) is white. If you want to change this text color, you need to change this IconGenerator.java method

0
source

You can only pass one element in the styles option, like this

 var options = { maxZoom: 15, styles:[{ url: 'https://googlemaps.imtqy.com/js-marker-clusterer/images/m1.png', width: 53, height: 53, textColor: '#fff', }] }; var mc = new MarkerClusterer(map, markers, options);

but in this case you will have one img for all cluster sizes (1-10-100). It is better to go through 5 elements. One for each cluster size, but this is too many lines of code (I have 3 clusters on the map).

So for me it works

 var mc = new MarkerClusterer(map, [], { imagePath: 'https://googlemaps.imtqy.com/js-marker-clusterer/images/m', maxZoom: 15 }); mc.setStyles(mc.getStyles().map(function (style) { style.textColor = '#fff'; return style; })); mc.addMarkers(markers)
0
source

Source: https://habr.com/ru/post/1499342/

More articles:


All Articles