CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3google-maps-markers
Karol Selak
Karol Selak

Reputation: 4804

How to add text above a marker on Google Maps in JS?

I found exactly the same question for Java, but I'd like to do that in JS. So, how to add text above a marker on Google Maps in JS?

Upvotes: 7

Views: 27907

Answers (3)

John Denver
John Denver

Reputation: 362

I've attached a quick implementation of the infowindow. Be sure to replace my API_KEY with yours as I've only allowed access to the stack snippets url.

This code snippet creates an infowindow. In the example, the infowindow is called instantly after being created to display it's content above the marker.

<!DOCTYPE html>
<html>
  <head>
    <style>
       #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
      function initMap() {
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });
        var infowindow = new google.maps.InfoWindow({
          content: 'Welcome to stackoverflow!'
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
        infowindow.open(map, marker);
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY&callback=initMap">
    </script>
  </body>
</html>

To only show the infowindow when the marker is clicked, wrap it inside of a listener:

marker.addListener('click', function() {
    infowindow.open(map, marker);
});

Upvotes: 0

G.Hunt
G.Hunt

Reputation: 1414

As stated in my comment, You can use multiple letters for the map marker label.

If you use the label property when instantiating a new google.maps.Marker class, you pass it an object, with one of the properties text.

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(0, 0),
    icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
    label: { color: '#00aaff', fontWeight: 'bold', fontSize: '14px', text: 'Your text here' }
});

Check the fiddle here.

Upvotes: 23

DMcCallum83
DMcCallum83

Reputation: 550

I think what you're looking for isn't included in the standard library. Google do provide this interesting utility library though so you can make your own markers, labels. The one you want is the MarkerWithLable class. From the link:

This class behaves like google.maps.Marker, but it supports the association of a label with the marker. If the marker is draggable, so too will be the label. In addition, a marker with a label responds to all mouse events in the same manner as a regular marker. It also fires mouse events and "property changed" events just as a regular marker would.

Looks like it's used in much the same way a the standard Marker class and there appears to be ample examples of it's use kicking around so good luck and I hope that this was helpful :)

Upvotes: 1

Related Questions