47888

How to add values in google map v3

I have searched in google but i couldn't get it. I need this type where values to be in markers

<img src=https://www.e-learn.cn/content/wangluowenzhang/"https://i.stack.imgur.com/jnTcc.png" alt="enter image description here">

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>

<img src=https://www.e-learn.cn/content/wangluowenzhang/"https://i.stack.imgur.com/sR94I.png" alt="enter image description here">

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 :)

Recommend

  • Close open InfoBubble when open a new (gMap v3)
  • Getting GPS satellites and atomic clock time stamp in iOS
  • java DOM xml file create - Have no tabs or whitespaces in output file
  • StreetViewService getPanorama method reporting Incorrect Status Codes for LatLng paris
  • handle click event in gmappanel extJS
  • Convert google maps polyline to html canvas line [closed]
  • Remove commas between google places types
  • trying to get location from address using google api v3
  • How to get the width of a road through Google Maps API
  • How to incorporate in React to add Google Maps instance
  • why when we write \\n in the file it converts into \\r\\n combination?
  • Simple way to get more sensible colors in gscatter
  • How to integrate Geodjango with Google Maps API 3?
  • Pie Chart Labels Cut off
  • Very basic javascript function call
  • Cluster markers with osmdroid
  • Drawing a polygon over the entire map
  • Android Google Maps: Polygon or shape that hides entire map
  • How to use OnMarkerClickListener
  • Remove previous Directions Route Google Maps
  • Javascript: Looping through an array to create listeners, issue with call by reference and value?
  • Getting Latitude Longitude from GoogleMaps in TWebBrowser
  • Google map in top corner left
  • Google Maps api v3 get start and end coordinates of a street
  • Plotting densities in R
  • Update Google Maps traffic layer without page reloading
  • UIAlertController button function not working
  • Android Google Maps API v2 start navigation
  • Installing iPhone App to iPhone
  • Jenkins: How To Build multiple projects from a TFS repository?
  • retrieve vertices with no linked edge in arangodb
  • using HTMLImports.whenReady not working in chrome
  • JTable with a ScrollPane misbehaving
  • FormattedException instead of throw new Exception(string.Format(…)) in .NET
  • Change div Background jquery
  • apache spark aggregate function using min value
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • UserPrincipal.Current returns apppool on IIS
  • java string with new operator and a literal