I've got tooltip working on marker mouseover now. However, I need them
to work on mouseover from outside the map as well. There are some
examples of this, but they are different enough from my code so as to
be very difficult to apply. Anyone have a very simple explanation for
making tooltips appears based on links outside of a map?
My mapping code and the code I'm using to generate a sidebar is posted
below.
1. Mapping Code
function load() {
if (GBrowserIsCompatible()) {
var side_bar_html = "";
var gmarkers = [];
var htmls = [];
var i = 0;
// Read the data
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++
GDownloadUrl("/assets/data/nolag.xml", function(data) {
var xml = GXml.parse(data);
var markers =
xml.documentElement.getElementsByTagName("marker");
// Draw icons
for (var i = 0; i < markers.length; i++) {
var locoName = markers[i].getAttribute("locoName");
var speed = markers[i].getAttribute("speed");
var ip = markers[i].getAttribute("ip");
var date = markers[i].getAttribute("captureTime");
var lat = markers[i].getAttribute("lat");
var lng = markers[i].getAttribute("lng");
var location = markers[i].getAttribute("location");
var heading = markers[i].getAttribute("heading");
var type = markers[i].getAttribute("type");
var point = new
GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, locoName, speed, ip,
date, lat,
lng, location, heading, type);
//document.getElementById("side_bar").innerHTML =
side_bar_html;
map.addOverlay(marker);
}
//document.getElementById("testing_div").innerHTML =
side_bar_html;
});
// A function to create the marker and set up the event window
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++
//@marker : locoName, speed, ip, date, lat, lng, location, heading,
type
function createMarker(point, locoName, speed, ip, date, lat, lng,
location, heading, type) {
var marker = new GMarker(point, customIcons[type]);
// === store the name so that the tooltip function can use it ===
marker.tooltip = '<div class="tooltip"><h1>' + locoName + '</
h1><h2>' + speed + '<br/>' + location + '</h2></div>';
var satellite = "<img
src=\"./images/icons/satellite.gif\">";
var gps = "<img src=\"./images/icons/gps.gif\">";
var cmu = "<img src=\"./images/icons/cmu.gif\">";
var ftp = "<img src=\"./images/icons/ftp.gif\">";
var me1k = "<img src=\"./images/icons/me1k.gif\">";
var html = "<div class=\"bubble\">";
html += "<h3>" + locoName + "<span
class=\"small-data\"> Route
2150</span></h3>";;
html += "<div class=\"toolbar\">" + gps +
satellite + cmu + ftp +
me1k + "</div>";
html += "<h4>Heading " + heading + " @ " +
speed + " MPH</h4>"
html += "<h4>Lat: " + lat + "</h4><h4> Lng: " +
lng + "</h4>";
html += "<h4>IP: " + ip + "</h4>";
html += "<h4><div class=\"sm-button\"><a
style='color: #FFFFFF;
decoration:none;' href='map_detail.php'>Details</a></div><div class=
\"sm-button\">Zoom To</div></h4>";
html += "</div>";
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
gmarkers[i] = marker;
htmls[i] = html;
//side_bar_html += '<a href="javascript:myclick(' + i + ')"
onmouseover="mymouseover('+i+')" onmouseout="mymouseout()">' + name +
'</a><br>';
i++;
// ====== The new marker "mouseover" and "mouseout" listeners
======
GEvent.addListener(marker,"mouseover", function() {
showTooltip(marker);
});
GEvent.addListener(marker,"mouseout", function() {
tooltip.style.visibility="hidden"
});
return marker;
}
// ====== This function displays the tooltip ======
// it can be called from an icon mousover or a side_bar
mouseover
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++
function showTooltip(marker) {
tooltip.innerHTML = marker.tooltip;
var
point=map.getCurrentMapType().getProjection().fromLatLngToPixel
(map.getBounds().getSouthWest(),map.getZoom());
var
offset=map.getCurrentMapType().getProjection().fromLatLngToPixel
(marker.getPoint(),map.getZoom());
var anchor=marker.getIcon().iconAnchor;
var width=marker.getIcon().iconSize.width;
var pos = new GControlPosition(G_ANCHOR_BOTTOM_LEFT,
new GSize
(offset.x - point.x - anchor.x + width,- offset.y + point.y
+anchor.y));
pos.apply(tooltip);
tooltip.style.visibility="visible";
}
// ===== This function is invoked when the mouse goes over an
entry
in the side_bar =====
// It launches the tooltip on the icon
function mymouseover(i) {
showTooltip(gmarkers[i])
}
// ===== This function is invoked when the mouse leaves an
entry in
the side_bar =====
// It hides the tooltip
function mymouseout() {
tooltip.style.visibility="hidden";
}
// This function picks up the side_bar click and opens the
corresponding info window
function myclick(i) {
gmarkers[i].openInfoWindowHtml(htmls[i]);
}
// create the map
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl3D());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(40.5500, -72.1700), 7);
map.enableScrollWheelZoom();
NEC = new GPolyline(NECRoute, "#0d004c", 3, 0.7);
map.addOverlay(NEC);
// ====== set up marker mouseover tooltip div ======
var tooltip = document.createElement("div");
document.getElementById("map").appendChild(tooltip);
tooltip.style.visibility="hidden";
} else {
alert("Sorry, the Google Maps API is not compatible with this
browser");
}
}
2. Sidebar generation
$(document).ready(function(){
$.ajax({
type: "GET",
url: "../assets/data/nolag.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('marker').each(function(){
var container = "<td>";
// Fetch data set
var location = $(this).attr('location');
//.replace(/[0-9]{1,4}:/,'');
var loconame = $(this).attr('locoName');
// Set speed
var speed = $(this).attr('speed');
var speedAdj = Math.ceil(speed);
var route = "<span
class=\"small-data\">2150</span>";
if (speedAdj == 0){
var speed_attr = "speed_stop";
var icon = "<dt><div
class=\"stop\"></div></dt>";
var alert= "<div class=\"alert\"><img
src=\"../assets/icons/
alert.png\"></div>";
var container = "<td
class=\"alerttd\">";
} else if (speedAdj < 20){
var speed_attr = "speed_go";
var icon = "<dt><div
class=\"ca-ne\"></div></dt>";
var alert="";
} else if (speedAdj > 20){
var speed_attr = "speed_go";
var icon = "<dt><div
class=\"go-ne\"></div></dt>";
var alert="";
}
var capdate = $(this).attr('captureDate');
$('<tr>').html(container + '<dl
class="xml-data">' + icon +
'<dd><span id="loconame">' + loconame + "<br/>" + route +
'</span> ' + location + alert + '</dd><dd
class="more-info"><a
href="#">Zoom To</a> <a href="map_detail.php">Details</a></dd></dl></
td>').appendTo('#dataset-a');
});
}
});
});
------------------------------------------------------------------------------------------------------
Many thanks!
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google Maps API" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/Google-Maps-API?hl=en
-~----------~----~----~----~------~----~------~--~---
