Legend on bookmarks in google maps

Question

Legend on bookmarks in google maps

Navigation

#1 by (4 votes)
#2 by (0 votes)

4

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 bubble usually appears with the data that I requested it to appear. So far so good! But, I need to display a caption in the bookmark without having to click on it. That is, when the marker appears on the map, there should also appear an identification number or text next to, above, below, I know, somewhere 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 it.

Has anyone done it yet? Can anyone help me?

google-maps maps google

asked by anonymous 20.06.2016 / 23:41

2 answers

Passing model via parameter dynamically in .NET MVC How to configure Require.JS

score 4 · Answer 1

I did a example that I believe to be 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 the javascript:

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

Since my label is 80 wide I used 40, 0 to center at the bottom of the marker.

Any question just to say that I try to complete the answer.

Example taken from noaa.gov - Test 1 broken link

See another very interesting example at noaa.gov - Test 2 broken link

score 0 · Answer 2

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

According to the snippet below you will have two points, 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><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>



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