CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Frank Lucas
Frank Lucas

Reputation: 592

Google maps marker title not showing up?

I've added a map with a marker to my website but I'm not sure what the Title attribute does for the marker.

I've used the documentation from the developers.google website

https://developers.google.com/maps/documentation/javascript/examples/marker-simple

In this example what does the "hello world" (marker title) exactly do? I am on OS X El Capitan - Chrome

function initMap() {
  var myLatLng = {lat: -25.363, lng: 131.044};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatLng
  });

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
  });
}

Upvotes: 4

Views: 14190

Answers (3)

BoomZilla
BoomZilla

Reputation: 746

User @Vijaykrish93 pointed out, that the title object in the Marker represents the tooltip value.

For labels the documentation has you covered. You just need to set the value for label in Marker:

var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    label: "Hello World!"
});

or by using the MarkerLabel interface:

var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    label: {
        fontSize: "8pt",
        text: "Hello World!"
    }
});

More formatting options beside fontSize are described here.

Upvotes: 7

duncan
duncan

Reputation: 31912

I found it to be unreliable, it wouldn't always show all the title tooltips on mouseover when displaying a group of markers.

The solution is to set this option when creating the Marker:

optimized: false

"Optimization renders many markers as a single static element. Optimized rendering is enabled by default. Disable optimized rendering for animated GIFs or PNGs, or when each marker must be rendered as a separate DOM element (advanced usage only)."

https://developers.google.com/maps/documentation/javascript/3.exp/reference#MarkerOptions

Thanks to the comment here on the Google Maps Issue Tracker for highlighting this solution: https://issuetracker.google.com/35822066#comment22

Upvotes: 2

Manjeet Barnala
Manjeet Barnala

Reputation: 2995

This will work for you try

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>

function init() {
  var myLatLng = {lat: -25.363, lng: 131.044};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatLng
  });

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
  });

  google.maps.event.addListener(marker , 'click', function(){
      var infowindow = new google.maps.InfoWindow({
        content:'Hello Title',
        position: myLatLng,
      });
      infowindow.open(map);
  });
}

$(document).ready(function(){
  google.maps.event.addDomListener(window, 'load', init()); // two calls

});

</script>

you just missed to attach addListener event with marker.

Upvotes: 1

Related Questions