CODEWITHSUNDEEP
javascriptgoogle-maps-api-3google-maps-markers
IYM-14
IYM-14

Reputation: 260

Placing text over an image in JavaScript

I have the following code:

    var MARKER_PATH = 'https://maps.gstatic.com/intl/en_us/mapfiles/marker_green';
    var results_list = document.getElementById('list_results');
    var markerLetter = String.fromCharCode('A'.charCodeAt(0) + i);
    var markerIcon = MARKER_PATH + markerLetter + '.png';

    var tr = document.createElement('tr');
    tr.style.backgroundColor = (i % 2 === 0 ? '#F0F0F0' : '#FFFFFF');

    var iconTd = document.createElement('td');
    var nameTd = document.createElement('td');
    var icon = document.createElement('img');

    icon.src = markerIcon;
    icon.setAttribute('class', 'placeIcon');
    icon.setAttribute('className', 'placeIcon');
    var name = document.createTextNode(result.name);
    iconTd.appendChild(icon);
    nameTd.appendChild(name);
    tr.appendChild(iconTd);
    tr.appendChild(nameTd);
    results_list.appendChild(tr);

enter image description here

This MARKER_PATH only has alphabet letters which is not enough for 60 items as it goes from A - Z. I like to have numbers inside the markers. I can create 60 images and load them locally, but that would be over killed with all those images. Therefore,

I want to create only 1 image and place a numbers as a text over this image. How can I do this?

enter image description here

Upvotes: 1

Views: 738

Answers (1)

Gabe
Gabe

Reputation: 1183

Just put a class on the td with css background pointing to the image icon, then iterate like this,(you can run this snippet I created):

var MARKER_PATH = 'https://maps.gstatic.com/intl/en_us/mapfiles/marker_green';
    var results_list = document.getElementById('list_results');
    var markerLetter = "";
  

var i;
for (i = 0; i < 60; i++) { 
  
    var tr = document.createElement('tr');
    tr.style.backgroundColor = (i % 2 === 0 ? '#F0F0F0' : '#FFFFFF');

    var iconTd = document.createElement('td');
    var nameTd = document.createElement('td');
    

    
    iconTd.setAttribute('class', 'mybackground');
    
    
    var name = document.createElement('div');
    name.innerHTML = 's'+i;
  
  iconTd.innerHTML = ""+i;
  nameTd.innerHTML = "Title "+i;
    

    tr.appendChild(iconTd);
    tr.appendChild(nameTd);
  
    results_list.appendChild(tr);
  
  }
td.mybackground{ 
background-image: url(http://www.whitehousewhitetails.com/wp-content/uploads/2012/02/google_pin.png); /* forward slash for the path */ 
width: 25px; /* use you own image size; */ 
height: 46px; /* use you own image size; */ 
background-repeat: no-repeat; 
background-position: left top; 
text-align: center; 
vertical-align: top;
  font-size: 40px;
  color:blue;
  
}
<table id="list_results" border="1">
<tr><td>img</td>
<td>description</td>
  </tr>  
</table>

Upvotes: 2

Related Questions