Subtitle in bookmarks on google maps

Question

Subtitle in bookmarks on google maps

I created a dynamic map that displays multiple markers as per the query specified by the user. When I click on the marker, the information balloon appears normally with the data that I requested to appear. So far so good! But, I'm needing to make a caption display on the bookmark without me having to click on it. That is, when the marker appears on the map, it should also appear a number or identification text next to it, at the top, at the bottom, whatever, in some location near the marker.

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

Has anyone done it? Can anyone help me?

4

google google-maps maps

Author: Marcos Henzel, 2016-06-20

Source

2 answers

score 4 · Answer 1

I made a Example which 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 label location change this part of javascript:

LabelAnchor: new google.maps.Item (40, 0)

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

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

Example removed from noaa.gov -tests 1 broken link

See another very interesting example in noaa.gov -Tests 2 broken link

score 0 · Answer 2

Response extracted from " Add caption on a map by googlemaps API." link to reply

as the snippet below you will have two dots, each of each color and their respective captions are at the top 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 -->