Menu
How can I display a number in the marker on a google map? I want to do server side clustering and I need to display how many points the cluster represents.
707
Number pins and fixed pin numbers Add pin numbers to your custom Google Map. There is an option that allows numbered pins to be added with a single click. Pins can automatically be numbers 1-99 when there are less than 100 visible pins on the map or the set of data contains less than 100 pins.
For adding a custom marker to Google Maps navigate to the app > res > drawable > Right-Click on it > New > Vector Assets and select the icon which we have to show on your Map. You can change the color according to our requirements. After creating this icon now we will move towards adding this marker to our Map.
Markers identify locations on the map. The default marker uses a standard icon, common to the Google Maps look and feel. It's possible to change the icon's color, image or anchor point via the API. Markers are objects of type Marker , and are added to the map with the GoogleMap.
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|FE6256|000000' Looks fine with 1-digit and 2-digit numbers
(from Mauro's link)
175
Latest google js API has google.maps.MarkerLabel object.
So you can easily set text/styles for labels
var mIcon = { path: google.maps.SymbolPath.CIRCLE, fillOpacity: 1, fillColor: '#fff', strokeOpacity: 1, strokeWeight: 1, strokeColor: '#333', scale: 12 }; var gMarker = new google.maps.Marker({ map: gmap, position: latLng, title: 'Number 123', icon: mIcon, label: {color: '#000', fontSize: '12px', fontWeight: '600', text: '123'} }); jsfiddle
33
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
