custom tooltip with google maps

HTML

<script src="https://maps.googleapis.com/maps/api/js?&amp;sensor=true&amp;extension=.js"></script>
<div id="map"></div>
<div id="marker-tooltip"></div>

CSS

#map {
    width:600px;
    height:420px;
}
#marker-tooltip {
    display: none;
    position:absolute;
    width: 270px;
    height: 40px;
    background-color: #ccc;
    margin: 15px;
}

JavaScript

(function () {

    var pos = new google.maps.LatLng(43.714604, -79.334078);

    var map = new google.maps.Map($('#map')[0], {
        center: pos,
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROAD
    });

    var marker = new google.maps.Marker({
        position: pos,
        map: map,
        cursor: 'hand'
    });
    
    marker.tooltipContent = 'this content should go inside the tooltip';
    
    google.maps.event.addListener(marker, 'mouseover', function () {
        var point = fromLatLngToPoint(marker.getPosition(), map);
        $('#marker-tooltip').html(marker.tooltipContent + '<br>Pixel coordinates: ' + point.x + ', ' + point.y).css({
            'left': point.x,
                'top': point.y
        }).show();
    });

    google.maps.event.addListener(marker, 'mouseout', function () {
        $('#marker-tooltip').hide();
    });
    
})();

function fromLatLngToPoint(latLng, map) {
    var topRight = map.getProjection().fromLatLngToPoint(map.getBounds().getNorthEast());
    var bottomLeft = map.getProjection().fromLatLngToPoint(map.getBounds().getSouthWest());
    var scale = Math.pow(2, map.getZoom());
    var worldPoint = map.getProjection().fromLatLngToPoint(latLng);
    return new google.maps.Point((worldPoint.x - bottomLeft.x) * scale, (worldPoint.y - topRight.y) * scale);
}