Learn how I can make a difference #thatsIntelligence

news

read more @ www.agileatwork.co.uk

#techie - Tooltip text on a Google map marker



I've been overseeing some mapping work and one of the requirements is to show around 10 lines of key data for each marker. The Google mapping API does provide an InfoBox which is usually very good for this type of requirement but due to the numbers of pins (or markers) possibly in excess of a thousand! The InfoBox doesn't in my mind provide an aesthetically pleasing solution!


What I really need is a nicely formatted tooltip.... after some time the developer tasked with doing the job came back and reported that they couldn't find an API do so and that the basic tooltip text (which is generated from the title property) just doesn't cut the mustard!

I had a quick look at the API documentation and must admit I couldn't find an easy way of doing it.... So like all experienced developers I consulted Google.

However despite finding lots of people asking this question.... the answer coming back was use the InfoBox!!

So this is my solution to the problem, if somebody knows of a better solution please let me know.


Download the 'working example'


Written By Christian Miles



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Map tooltip text example</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&region=GB"></script>

<style type="text/css">
#mapCanvas { border:1px solid black; height:99%; float: left; }
.tooltip{border:thin 1px #eee;background-color:#FFFBF0;padding:5px;width:200px;}

</style>

</head>

<body>

<div id="mapWrapper">
<div id="mapCanvas"></div>
</div>

<script type="text/javascript">
var map;

$(document).ready(function ()
{
doMap();
addSiteMarker ("Tooltip test!",-1,52)
});
$(function(){
setMapSize ();
$(window).resize(function(){setMapSize (); });
});
function setMapSize ()
{
$('#mapCanvas').css({'width':(($(window).width())-25)+'px'});
$('#mapCanvas').css({'height':(($(window).height())-25)+'px'});
}

function doMap ()
{
geocoder = new google.maps.Geocoder();
var myOptions = { zoom:7, mapTypeId: google.maps.MapTypeId.ROADMAP, minZoom: 2};
map = new google.maps.Map(document.getElementById("mapCanvas"), myOptions);
map.setCenter( new google.maps.LatLng(54,-2));
map.setZoom (4);
}
function addSiteMarker (name,longitude, latitude )
{
var marker = new google.maps.Marker({ position: new google.maps.LatLng(latitude,longitude),
icon:"http://maps.google.com/mapfiles/ms/icons/blue-dot.png",
title:"test",
zIndex:500 });
marker.setMap(map);
var chTooltipHtml ="<h3>"+ name + "</h3>Line 1<br>Line 2";
var tooltipOptions={ marker:marker, content:chTooltipHtml, cssClass:'tooltip'}
var tooltip = new Tooltip(tooltipOptions)
marker.setMap(map);
return marker;
}
function Tooltip(options)
{
this.marker_ = options.marker;
this.content_ = options.content;
this.map_ = options.marker.get('map');
this.cssClass_ = options.cssClass||null;
this.div_ = null;
this.setMap(this.map_);
var me = this;
// Show tooltip on mouseover event.
google.maps.event.addListener(me.marker_, 'mouseover', function()
{
me.show();
});
// Hide tooltip on mouseout event.
google.maps.event.addListener(me.marker_, 'mouseout', function()
{
me.hide();
});
}
Tooltip.prototype = new google.maps.OverlayView();

Tooltip.prototype.onAdd = function()
{

var div = document.createElement('DIV');
div.style.position = "absolute";
div.style.visibility = "hidden";
if(this.cssClass_)
{
div.className += " "+this.cssClass_;
}
div.innerHTML = this.content_;
this.div_ = div;

var panes = this.getPanes();
panes.floatPane.appendChild(this.div_);
}


Tooltip.prototype.draw = function()
{
var overlayProjection = this.getProjection();
var ne = overlayProjection.fromLatLngToDivPixel(this.marker_.getPosition());
var div = this.div_;
div.style.left = ne.x + 'px';
div.style.top = ne.y + 'px';
}


Tooltip.prototype.onRemove = function()
{
this.div_.parentNode.removeChild(this.div_);
}



Tooltip.prototype.hide = function()
{
if (this.div_)
{
this.div_.style.visibility = "hidden";
}
}


Tooltip.prototype.show = function()
{
if (this.div_)
{
this.div_.style.visibility = "visible";
}
}


</script>

</body>
</html>




Christian Miles