How can i show text under marker

Question

I have one problem when showing markers on a map. I would like to show some text below the marker, but I can not do it anyway. This is my example code, I wonder what I need to add to it to appear permanently when markers shows

This is one part of my code example:

loop  
     htp.print('geocoder.getLatLng(');  
     htp.print(''''||r_klt.geoloc||''''||',');  
     htp.print('function(point) {');  
     htp.print('var baseIcon = new GIcon(G_DEFAULT_ICON);');  
     htp.print('baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png%22;');  
   --htp.print('baseIcon.shadow = "/i/pdf.png";');  
     htp.print('baseIcon.iconSize = new GSize(20, 34);');  
     htp.print('baseIcon.shadowSize = new GSize(37, 34);');  
     htp.print('baseIcon.iconAnchor = new GPoint(9, 34);');  
     htp.print('baseIcon.infoWindowAnchor = new GPoint(9, 2);');  
     htp.print('var letteredIcon = new GIcon(baseIcon);');  
     l_address := r_klt.geoloc;
     htp.print('letteredIcon.image = "http://www.google.com/mapfiles/marker'%7C%7Cchr(65+l_t)%7C%7C'.png%22;');    
     htp.print('markerOptions = { icon:letteredIcon'};');   
     htp.print('var marker = new GMarker(point,markerOptions);');  
     htp.print('var html = "<h1>'||r_klt.geoloc||'</h1>";');
     htp.print('GEvent.addListener(marker, "mouseover", function() {  marker.openInfoWindowHtml(html);  });');
     htp.print('map.addOverlay(marker);');  
     htp.print('}');  
     htp.print(');');  
     l_t := l_t + 1;  
   end loop;  

Answer 1

function initMap() {
    var myLatLng = {lat: 47.363362, lng: 8.485823};

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: myLatLng,
      mapTypeId: google.maps.MapTypeId.SATELLITE
    });

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Hello World!',
      icon: {
        labelOrigin: new google.maps.Point(16,64),
        url: "https://drive.google.com/uc?id=0B3RD6FDNxXbdVXRhZHFnV2xaS1E"
      },
      label: {
        text: "Hello world!",
        color: "white",
        fontWeight: "bold",
        fontSize: "16px"
      }
    });
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap">
    </script>

Answer 2

The JavaScript code that I can see in your example uses the dead version 2 of Google Maps JavaScript API. The version 2 was deprecated in 2011 and completely removed from Google servers some time ago. You should migrate the code to the current version 3 of Maps JavaScript API.

Referring to your question, you can add labels to markers using the MarkerLabel object and additionally you can position labels using the custom icons (Icon object)

https://developers.google.com/maps/documentation/javascript/3.exp/reference#MarkerLabel

https://developers.google.com/maps/documentation/javascript/3.exp/reference#Icon

Have a look at the following JavaScript example that adds label and position it below the custom marker

function initMap() {
    var myLatLng = {lat: 47.363362, lng: 8.485823};

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: myLatLng,
      mapTypeId: google.maps.MapTypeId.SATELLITE
    });

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Hello World!',
      icon: {
        labelOrigin: new google.maps.Point(16,64),
        url: "https://drive.google.com/uc?id=0B3RD6FDNxXbdVXRhZHFnV2xaS1E"
      },
      label: {
        text: "Hello world!",
        color: "white",
        fontWeight: "bold",
        fontSize: "16px"
      }
    });
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap">
    </script>

I hope this helps!