54171

I have searched in google but i couldn't get it. I need this type where values to be in markers
I tried something but i didn't get the result
var locations = [ [33.906896, -6.263123, 20], [34.053993, -6.792237, 30], [33.994469, -6.848702, 40], [33.587596, -7.657156, 50], [33.531808, -7.674601, 8], [33.58824, -7.673278, 12], [33.542325, -7.578557, 15] ]; var mapOptions = { zoom: 4, center: new google.maps.LatLng(28.975750, 10.669184), mapTypeId: google.maps.MapTypeId.SATELLITE }; var marker, i; for (i = 0; i < locations.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][0], locations[i][1]), icon: 'icon.png' + locations[i][2] map: map }); }
Answer1:
You cannot do that. A <strong>marker with label</strong> can only show 1 character. But you can create the marker icon on the fly in code. Here is a rough example :
function createMarker(width, height, title) { var canvas, context, radius = 4; canvas = document.createElement("canvas"); canvas.width = width; canvas.height = height; context = canvas.getContext("2d"); context.clearRect(0, 0, width, height); context.fillStyle = "rgb(0,191,255)"; context.strokeStyle = "rgb(0,0,0)"; context.beginPath(); context.moveTo(radius, 0); context.lineTo(width - radius, 0); context.quadraticCurveTo(width, 0, width, radius); context.lineTo(width, height - radius); context.quadraticCurveTo(width, height, width - radius, height); context.lineTo(radius, height); context.quadraticCurveTo(0, height, 0, height - radius); context.lineTo(0, radius); context.quadraticCurveTo(0, 0, radius, 0); context.closePath(); context.fill(); context.stroke(); context.font = "bold 10pt Arial" context.textAlign = "center"; context.fillStyle = "rgb(255,255,255)"; context.fillText(title, 15, 15); return canvas.toDataURL(); }
and when you place the markers :
var marker, i; for (i = 0; i < locations.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][0], locations[i][1]), icon: createMarker(30, 20, '$' + locations[i][2].toString()), map: map, }); }
demo -> <strong>http://jsfiddle.net/cfbh9va8/</strong>
As said this is a rough demonstration, showing the technique. I am sure there is a lot of examples drawing a canvas with arrow and so on, or perhaps you can easily do this yourself. My graphical skills are not that good :)