Google Maps API - Marker ToolTip

Question

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.

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.

Any help is great!

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
  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() > boundLimits.minLng && center.lng() < boundLimits.maxLng){
        newLng = center.lng();
      }
      if(center.lat() > boundLimits.minLat && center.lat() < 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);
</script>

Answer 1

Woops, I probably should have done a little bit more research before posting, but I figured I may as well post what my own solution.

Instead of a title, I've used the Google Maps InfoWindow:

Hopefully this will help someone else!

    var point = new google.maps.LatLng(40, -20);
    var data = "Hello World!";
    var infowindow = new google.maps.InfoWindow({
      content: data
    });
    var marker = new google.maps.Marker({
        position: point,
        title:"Hello World!"
    });
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });