title: Google Maps API - Marker ToolTip
body: <p>I've got a little bit of a problem right now with my google maps marker titles not showing. This is my first map, I'm not too sure what I'm doing wrong.</p>
  
  <p>Everything is working fine, and the marker shows up, except when you click/hover over the marker, the tooltip or title doesn't show up, when it should.</p>
  
  <p>Any help is great!</p>
  
  <pre><code>&lt;script src="https://maps.googleapis.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  &lt;script&gt;
    function initialize() {
  
      // set mapOptions
      var mapOptions = {
        center: new google.maps.LatLng(40, -20),
        zoom: 3,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: [{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}]
      };
  
      // set min and max zoom
      var map = new google.maps.Map(document.getElementById("map_canvas"),
          mapOptions);
      var opt = { minZoom: 3, maxZoom: 21 };
      map.setOptions(opt);
  
      // bounds of the desired area
      var allowedBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(-79.00, -180.00),
        new google.maps.LatLng(79.00, 180.00)
      );
      var boundLimits = {
        maxLat : allowedBounds.getNorthEast().lat(),
        maxLng : allowedBounds.getNorthEast().lng(),
        minLat : allowedBounds.getSouthWest().lat(),
        minLng : allowedBounds.getSouthWest().lng()
      };
  
      var lastValidCenter = map.getCenter();
      var newLat, newLng;
      google.maps.event.addListener(map, 'center_changed', function() {
        center = map.getCenter();
        if (allowedBounds.contains(center)) {
          // still within valid bounds, so save the last valid position
          lastValidCenter = map.getCenter();
          return;
        }
        newLat = lastValidCenter.lat();
        newLng = lastValidCenter.lng();
        if(center.lng() &gt; boundLimits.minLng &amp;&amp; center.lng() &lt; boundLimits.maxLng){
          newLng = center.lng();
        }
        if(center.lat() &gt; boundLimits.minLat &amp;&amp; center.lat() &lt; boundLimits.maxLat){
          newLat = center.lat();
        }
        map.panTo(new google.maps.LatLng(newLat, newLng));
      });
  
      // set markers
      var point = new google.maps.LatLng(40, -20);
      var marker = new google.maps.Marker({
          position: point,
          title:"Hello World!"
      });
  
      // To add the marker to the map, call setMap();
      marker.setMap(map);
  
  
    }
    google.maps.event.addDomListener(window, 'load', initialize);
  &lt;/script&gt;
  </code></pre>