qTip2 - My test case

by gurkavcu

HTML

<link rel="stylesheet" href="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.css">
<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<script src="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.js"></script>
<div class="map" style="width: 680px; height: 570px;">
    <div id="map_canvas" style="width: 680px; height: 570px;">Map div</div>
</div>

CSS

body{
    padding: 10px;
}

JavaScript

var map, marker, latLngToPixel;

function initialize() {
    var europe = new google.maps.LatLng(46.55886, 11.162109),
        elem = document.getElementById('map_canvas');
       
    function LatLngToPixel(map) {
        this.setMap(map);
    } 
    LatLngToPixel.prototype = new google.maps.OverlayView(); 
    LatLngToPixel.prototype.draw = function() {}
    
    map = new google.maps.Map(elem, {
        zoom: 5,
        center: europe,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
        
    // Create new control to display latlng and coordinates under mouse.
    latLngToPixel = new LatLngToPixel(map);
       
    generateMarker(46.55886, 11.162109);
    generateMarker(38, 0);
    generateMarker(38, 16);
    generateMarker(53, 16);
}


// Create the tooltips only when document ready
$(document).ready(function() {
    initialize();
});


function generateMarker(Lat, Lng) {
    
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(Lat, Lng),
        map: map,
        title: 'Click me!'
    });
    
    
    google.maps.event.addDomListener(marker, 'mouseover', function(event) {

        var pixel = latLngToPixel.getProjection().fromLatLngToContainerPixel(event.latLng);

        // Grab marker position
        var pos = [ pixel.x, pixel.y ];
        
        /*
        // Make sure to only create one tooltip
        if(marker.tooltip) {
            marker.tooltip.show();
            return false;
        }*/
        
        // Create the tooltip on a dummy div and store it on the marker
        marker.tooltip = $('<div />').qtip({
            content: {
                text: 'I\'m a replacement tooltip for the regular google one<br />New line<br /> new line<br />Newer line',
                title: {
                    text: 'aaa',
                    button: true
                }
            },
            position: {
                at: "right center",
                my: "left center",
                adjust: {
    ...