I have seen many examples for dynamically generating numbers on the marker icons. One of them i found is google chart apis. This partially solved my problem. I was able to generate number after editing my code as shown below.
But is it possible to add a custom icon like this and then do generate number over it?
function addMarker(id,location,address,facility,name,ratings)
{
marker = new google.maps.Marker(
{
position: location,
map: map,
animation: google.maps.Animation.DROP,
icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+id+'|FF776B|000000',
shadow:'https://chart.googleapis.com/chart?chst=d_map_pin_shadow'
});
This chart api is deprecated now and google will provide support for only one year according to their revised "Terms and conditions".
I think the best way is to create your markers on the server side. If your application needs to show a limited number of markers (say 25 max at a time) then you can have them on the server. Image processing tools are available in Java or any other programming language.
Here is a short snippet using java.
BufferedImage image = null;
try {
image = ImageIO.read(new File("/path/to/base/icon"));
} catch (IOException e) {
e.printStackTrace();
}
Graphics g = image.getGraphics();
g.setFont(g.getFont().deriveFont(30f));
g.drawString("1", x, y); // x,y are points where you want to add the number
g.dispose();
try {
ImageIO.write(image, "png", new File("test.png"));
} catch (IOException e) {
e.printStackTrace();
}
You can use a for loop to create as many numbered markers you want.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.