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

Answer 1

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!

Answer 2

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>