Tag caption on google maps

Question

I created a dynamic map that displays multiple markers as per the user-specified query. When I cling to the marker, the information balloon usually appears with the data I requested to appear. So far so good! But, I need to display a caption on the marker without me having to click on it. That is, when the marker appears on the map, a number or identification text should also appear beside, above, below, I don’t know, somewhere near the marker.

I know that in Google Earth is possible to do, but it is local, in Google Maps I could not do.

Has anyone ever done it? Can someone help me?

Answer 1

I made a example that I believe is what you want.

To change the label change the css, there you can change the size, border, opacity, etc.

To change the location of the label change this part of javascript:

labelAnchor: new google.maps.Point(40, 0)

As my label is 80 wide I used 40, 0 to center at the marker foot.

Any doubt is just to say that I try to complete the answer.

Example taken from noaa.Ov - Test 1 broken link

See another very interesting example in noaa.Ov - Test 2 broken link

Answer 2

Response drawn from "Add Caption to a Map via googlemaps API." link to reply

As the snippet below you will have two points, each of each color and its respective captions are at the top on the right.

google.maps.event.addDomListener(window, "load", function () {

  var map = new google.maps.Map(document.getElementById("map_div"), {
    center: new google.maps.LatLng(33.808678, -117.918921),
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  
  map.controls[google.maps.ControlPosition.RIGHT_TOP].push(
    document.getElementById('legend'));
  
  var marker0 = new google.maps.Marker({
    position: new google.maps.LatLng(33.808678, -117.918921),
    map: map,
    icon: "http://1.bp.blogspot.com/_GZzKwf6g1o8/S6xwK6CSghI/AAAAAAAAA98/_iA3r4Ehclk/s1600/marker-green.png"
  });

  var marker1 = new google.maps.Marker({
    position: new google.maps.LatLng(33.818038, -117.928492),
    map: map
  });
});

#legend {
  background: white;
  padding: 10px;
  top: 5px !important;
  right: 5px !important;
}
.display-flex {
  display: flex;
}
.legend-box {
  width: 10px;
  height: 10px;
  border: 1px solid;
  margin-top: 2px;
  margin-right: 5px;
}

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<div id="map_div" style="height: 400px;"></div>
<div id="legend">
  Legenda:
  <div class="display-flex"><div class="legend-box" style="background: #65BA4A;"></div> Ponto Inicial</div>
  <div class="display-flex"><div class="legend-box" style="background: #F76053;"></div> Ponto Final</div>
</div>



<!-- begin snippet: js hide: false console: false babel: false -->