Add caption on a Map by the googlemaps API

Question

Add caption on a Map by the googlemaps API

Navigation

#1 by (3 votes)

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? Caption I say is for example:

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

javascript

asked by anonymous 07.04.2015 / 03:00

1 answer

Synchronize items in comboboxes at run time How to go to an anchor on a page with little content?

score 3 · Accepted Answer

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><divid="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 <div id="legend"></div> with the content you want, and add

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

For the div to be inside the map in the upper right corner, you can change the constant RIGHT_TOP to other values such as RIGHT_BOTTOM , LEFT_TOP and LEFT_BOTTOM and div will go to the given place