ClueTip: Using clue tip with Weather Bug and Google Maps
I have an html page with a Weather Bug widget and a page with a Google Map on it. I would like to use cluetip so that when I hover over a link on my main page, the Weather Bug/Google Map loads into the cluetip. The widgets use remote code on their respective servers. I am having problems implementing this with clueTip. Here is the code I have thus far:
Weather Bug:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Seattle Weather</title>
</head>
<link rel="stylesheet" type="text/css" media="screen" href="http://img.weather.weatherbug.com/Style/stickers/v2/Stickers_250x250.css" />
<body>
<div class="wXbody">
<iframe id="WeatherBugSticker_250x250_v2" src="http://weather.weatherbug.com/desktop-weather/web-widgets/getSticker.html?ZipCode=98101&ZCode=z5545&Size=250x250&StationID=PACSC&units=0&Version=2&lang_id=en-us" width="236" height="174" frameborder="0" scrolling="no" allowtransparency="yes"></iframe>
<div class="wXlinks">
<span class="link"><a href="http://weather.weatherbug.com/weather-forecast.html" target="_blank" onclick="Javascript:this.href='http://weather.weatherbug.com/WA/Seattle-weather/local-forecast/7-day-forecast.html?zcode=z5545&units=0'">Forecast</a></span>
<span class="link"><a href="http://weather.weatherbug.com/doppler-radar.html" target="_blank" onclick="Javascript:this.href='http://weather.weatherbug.com/WA/Seattle-weather/local-radar/doppler-radar.html?zcode=z5545&units=0'">Radar</a></span>
<span class="link"><a href="http://weather.weatherbug.com/weather-cams.html" target="_blank" onclick="Javascript:this.href='http://weather.weatherbug.com/WA/Seattle-weather/weather-cams/local-cams.html?zcode=z5545&units=0'">Cameras</a></span>
<span class="link"><a href="http://weather.weatherbug.com/weather-photos/photo-gallery.html" target="_blank" onclick="Javascript:this.href='http://weather.weatherbug.com/weather-photos/photo-gallery.html?zcode=z5545&units=0&zip=98101'">Photos</a></span>
</div>
<div class="footer">
<a href="http://weather.weatherbug.com/default.html" target="_blank" onclick="Javascript:this.href='http://weather.weatherbug.com/WA/Seattle-weather.html?zcode=z5545&units=0'"><img src="http://img.weather.weatherbug.com/images/stickers/v2/300x250/wxbug-logo.jpg" id="logo" border="0" alt="WeatherBug" /></a>
<a href="http://weather.weatherbug.com/default.html" target="_blank" onclick="Javascript:this.href='http://weather.weatherbug.com/WA/Seattle-weather.html?zcode=z5545&units=0'"><img src="http://img.weather.weatherbug.com/images/stickers/v2/English_ViewLocal_102x16.png" border="0" id="location" alt="WeatherBug" /></a>
</div>
<div class="footertext">Your weather just got better.</div>
</div>
</body>
</html>
Google Maps:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(47.75621,-122.329845);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:400px; height:800px"></div>
</body>
</html>
My Links calling tooltip:
<a class="newWindow tooltip1" href="http://FSEAirframekmdev.web.boeing.com/pages/seattleTraffic.html" rel="http://FSEAirframekmdev.web.boeing.com/pages/seattleTraffic.html" title="Seattle Traffic"><img name="pTraffic" src="_images/Boeing-Links/p-traffic.png" width="80" height="80" border="0" id="pTraffic" alt="Seattle Traffic" /></a><a class="newWindow tooltip2" href="http://FSEAirframekmdev.web.boeing.com/pages/seattleWeather.html" rel="http://FSEAirframekmdev.web.boeing.com/pages/seattleWeather.html" title="Seattle Weather"><img name="pWeather" src="_images/Boeing-Links/p-weatherBug.png" width="80" height="80" border="0" id="pWeather" alt="Seattle Weather" /></a></div>
When I hover over the Weather Bug link I get this an error on the ajax processing in line 478 where it is replacing data:
// process data retrieved via xhr before it's displayed
ajaxProcess: function(data) {
data = data.replace(/<s(cript|tyle)(.|\s)*?\/s(cript|tyle)>/g, '').replace(/<(link|title)(.|\s)*?\/(link|title)>/g,'');
return data;
},
When I hover over the Google Maps links it appears to run fine, but no content shows except for the title.
If anyone could help with this it would be highly appreciated as I am at a loss at this point.
Thanks.