Javascript dynamically create image/icon (marker) from data

Question

I want to display a map (Google maps initially) in a website (e.g. the position of some runners in an event/race), alongisde some markers with the initials of each runner. That is, depending on the data I get in JSON format:

data = [
    {
        "lat": 44.363,
        "lng": 3.044,
        "full_name": "Paul Cardiff"
    }
    {
        "lat": 44.473,
        "lng": 3.144,
        "full_name": "Mark Zein"
    }
    ...
]

I would like to represent the current position of each runner in the map with a marker identified by its initials (Mark Zein --> M.Z.). For instance (forgive me for this representation):

                            -----
                            |M.Z|       _______________________road
      -----                 --|--      /
      |P.C|          _________v________| 
      --|--         /
     ___v__________/   

I know I can create a google.maps.Marker with a custom icon, but I am finding hard to create these icons dinamically based on data I receive (and that might change over time).

Is there a way to dynamically create images/icons from data? Or can you think of another way of generating these icons?

I've been doing some research but so far I didn't find something, so any help will be much appreciated!

Edited:

I am currently mocking the way I get the data, but the idea is to get the data from a socket. So what I have in my code right now is:

var json_socket = {
    "lat": 44.363,
    "lng": 3.044,
    "full_name": "Paul Cardiff"
};

And how I add the markers:

var live_user = {lat: json_socket["lat"], lng: json_socket["lng"]};
var marker = new google.maps.Marker({
    position: live_user,
    map: map,
    icon: "icon.png"
});

Answer 1

You can iterate over the array of markers with simple loop

I used the label to display the initials

var data = [{
        "lat": 44.363,
        "lng": 3.044,
        "full_name": "Paul Cardiff"
    } {
        "lat": 44.473,
        "lng": 3.144,
        "full_name": "Mark Zein"
    }
    ...
];

for (var i = 0; i < data.length; i++) {
    var item = data[i];
    var latLng = new google.maps.LatLng(item.lat, item.lng);

    var initials = item.full_name.match(/\b(\w)/g).join('');

    // Creating a marker and putting it on the map
    var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        label: initials,
        icon: "icon.png"
    });
}