How to dIsplay name of place next to marker

Question

I would like to display name of the place next to the marker as shown in the below screen shot. Currently I don't need rest of the details appearing in Google Maps. All I care is that name of the hotel should appear along with the Marker.

Example: Courtyard Marriott Hotel - Google Maps link which clearly shows the name.

I have created demo jsFiddle (doesn't show the label)

var googleMap;
var hotelLocation = {
  lat: 43.681592,
  lng: -79.713612
};
var mapCenter = hotelLocation; //{ lat: 43.690497, lng: -79.966831 };

google.maps.event.addDomListener(window, 'resize', function() {
  //https://stackoverflow.com/questions/8792676/center-google-maps-v3-on-browser-resize-responsive
  var center = googleMap.getCenter();
  google.maps.event.trigger(googleMap, "resize");
  googleMap.setCenter(center);
});

function InitializeGoogleMaps() {     
  //http://www.latlong.net/convert-address-to-lat-long.html
  //90 Biscayne Crescent, Brampton, ON - Address of Hotel   - { lat: 43.681592, lng: -79.713612 };
  googleMap = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: mapCenter
  });

  var marker = new google.maps.Marker({
    position: hotelLocation,
    map: googleMap,
    title: 'Courtyard by Marriott'
  });
}


InitializeGoogleMaps();

I have gone thru many search terms (as I am not sure what is the right word for this label and gone thru Maps Marker API too) but so far no luck. I think below thread seems to be on the same lines however I am hoping that there will be built in support inside Google maps rather then going for extra lib.

How to display a label next to a Marker for Google Maps?

I believe this answer can help in your case: https://stackoverflow.com/a/45147343/5140781. You can create label for custom marker and define its position. — xomena, Mar 15 '18 at 22:30

score 1 · Answer 1 · answered Jun 14 '18 at 06:41

It is more likely for comment, but excuse me (I can not comment yet ;))

Positioning can be done over margin, instead of counting by marker size.

It is tiny update of ndd jsFiddle in comment here https://stackoverflow.com/a/34145265/2686510

http://jsfiddle.net/6t3pyr94/

Someone could find it helpful to have css freedom of label position.

 .map-marker-label {
    position: absolute;
    color: red;
    font-size: 16px;
    font-weight: bold;
    /* Use margin to position the text */
    /* top, left position is the place of marker position */
    margin-top: -45px;
    margin-left: 20px;
 }

score 0 · Answer 2 · answered Dec 07 '15 at 15:44

0

You can use pixelOffset:

 pixelOffset: new google.maps.Size(100,140);

The result would be:

var marker = new google.maps.Marker({
 position: hotelLocation,
 map: googleMap,
 title: 'Courtyard by Marriott',
 pixelOffset: new google.maps.Size(100,140);
});

answered Dec 07 '15 at 15:44

Sidius

416
1
5
24

This still doesn't show the text "Courtyard Marriott" next to the marker :) Updated [jsFiddle](http://jsfiddle.net/xxq0efvq/3/) – ndd Dec 07 '15 at 15:54
Of course it doesnt... You still need to call the event that opens the marker! :D @ndd – Sidius Feb 16 '16 at 14:07

How to dIsplay name of place next to marker

2 Answers2