JSFiddle - React, Tailwind, and code Playground

by shapeshifta

HTML

<link rel="stylesheet" href="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.css">
<script src="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<div id="map" style="width: 500px; height: 400px;"></div>

CSS

body {
    padding: 00px;
}

JavaScript

var locations = [
    ['Bondi Beach', -30.890542, 151.274856, 4],
    ['Coogee Beach', -33.923036, 151.259052, 5],
    ['Cronulla Beach', -34.028249, 151.157507, 3],
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
    ['Maroubra Beach', -33.950198, 151.259302, 1]
];

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: new google.maps.LatLng(-33.92, 151.25),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});


var marker, i;

// qtip hover conversion
var latLngToPixel;

function LatLngToPixel(map) {
    this.setMap(map);
}
LatLngToPixel.prototype = new google.maps.OverlayView();
LatLngToPixel.prototype.draw = function () {}
// Create new control to display latlng and coordinates under mouse.
latLngToPixel = new LatLngToPixel(map);

for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
    });

    google.maps.event.addListener(marker, 'mouseover', function (event) {

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

        // Grab marker position
        var pos = [pixel.x, pixel.y - 30];
        if(typeof marker.tooltip === 'undefined'){
        // 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'
                }
            },
            position: {
                at: "bottom center",
                my: "bottom center",
                target: pos,
                container: $('#map')
            },
            show: {
                ready: true,
                solo: true
            }
        });
        }else{
            var api = marker.tooltip.qtip('api');
           ...