Add Caption to a Map via googlemaps API

Asked

Viewed 1,258 times

1

Is there any way to add captions directly through the googlemaps API or do you need to put the external caption to the map,in the documentation I found no example of how to do it if it exists? Legend I say is for example:

Yellow-Means a value 10 Red-Means value 20 ...

javascript
  • 1

    Hello. I found this example in the documentation: https://developers.google.com/maps/tutorials/customizing/adding-a-legend?hl=pt

  • Vote today! Vote tomorrow! Vote forever! Vote consciously! Your vote is very important to our community, contribute to us, and help make Stack Overflow in Portuguese (Sopt) bigger and bigger. You can learn more at: Vote early, vote often

1 answer

3


I think it’s important to have an example here, below:

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>

the main thing is to create the <div id="legend"></div> with the content you want, and add 

map.controls[google.maps.ControlPosition.RIGHT_TOP].push(
    document.getElementById('legend'));

so that the div stays inside the map in the upper right corner, you can change the constant RIGHT_TOP for other values such as RIGHT_BOTTOM, LEFT_TOP and LEFT_BOTTOM and the div will go to the particular place

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.