Hi All,
I'm trying some code, reading markers from an XML file.
Now I need insert new function to add more than one tab at info-window
markers.
I have found this code example:
// ==================================================
// A function to create a tabbed marker and set up the event
window
// This version accepts a variable number of tabs, passed in the
arrays htmls[] and labels[]
function createTabbedMarker(point,label,tabs,icon) {
var marker;
if (icon) {
marker = new GMarker(point,get_icon(icon));
} else {
marker = new GMarker(point);
}
var marker_num = gmarkers.length;
marker.marker_num = marker_num;
marker.tabs = tabs;
gmarkers[marker_num] = marker;
GEvent.addListener(gmarkers[marker_num], "click", function() {
marker.openInfoWindowTabsHtml(gmarkers[marker_num].tabs);
});
}
// ==================================================
And I past it to code above but it's not working:
How can I add this function to this code....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<title>Google Maps</title>
<script src="http://maps.google.com/maps?
file=api&v=2&key=ABQIAAAAPDUET0Qt7p2VcSk6JNU1sBRRwPhutbWBmyj82Go_H6JlE7EvFBSKFFFHFePAwvib9UM0geoA
3Pgafw" type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<!-- you can use tables or divs for the overall layout -->
<table border=1>
<tr>
<td>
<div id="map" style="width: 550px; height: 450px"></div>
</td>
<td width = 150 valign="top" style="text-decoration:
underline; color: #4444ff;">
<div id="side_bar"></div>
</td>
</tr>
</table>
Test1: <input type="checkbox" id="theatrebox"
onclick="boxclick(this,'theatre')" />
Test2: <input type="checkbox" id="golfbox"
onclick="boxclick(this,'golf')" />
Test3: <input type="checkbox" id="infobox"
onclick="boxclick(this,'info')" /><br>
<a href="categories.htm">Back to the tutorial page</a>
<noscript><b>JavaScript must be enabled in order for you to use
Google Maps.</b>
However, it seems JavaScript is either disabled or not supported
by your browser.
To view Google Maps, enable JavaScript by changing your browser
options, and then
try again.
</noscript>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
var gmarkers = [];
var gicons = [];
gicons["theatre"] = new GIcon(G_DEFAULT_ICON,"casa_azul.png");
gicons["golf"] = new GIcon(G_DEFAULT_ICON,"casa_verde.png");
gicons["info"] = new GIcon(G_DEFAULT_ICON,"casa_amarela.png");
// A function to create the marker and set up the event window
function createMarker(point,name,html,category) {
var marker = new GMarker(point,gicons[category]);
// === Store the category and name info as a marker properties
===
marker.mycategory = category;
marker.myname = name;
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
gmarkers.push(marker);
return marker;
}
// == shows all markers of a particular category, and ensures the
checkbox is checked ==
function show(category) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {
gmarkers[i].show();
}
}
// == check the checkbox ==
document.getElementById(category+"box").checked = true;
}
// == hides all markers of a particular category, and ensures
the checkbox is cleared ==
function hide(category) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {
gmarkers[i].hide();
}
}
// == clear the checkbox ==
document.getElementById(category+"box").checked = false;
// == close the info window, in case its open on a marker that
we just hid
map.closeInfoWindow();
}
// == a checkbox has been clicked ==
function boxclick(box,category) {
if (box.checked) {
show(category);
} else {
hide(category);
}
// == rebuild the side bar
makeSidebar();
}
function myclick(i) {
GEvent.trigger(gmarkers[i],"click");
}
// == rebuilds the sidebar to match the markers currently
displayed ==
function makeSidebar() {
var html = "";
for (var i=0; i<gmarkers.length; i++) {
if (!gmarkers[i].isHidden()) {
html += '<a href="javascript:myclick(' + i + ')">' +
gmarkers[i].myname + '</a><br>';
}
}
document.getElementById("side_bar").innerHTML = html;
}
// create the map
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(38.75, -9.15), 12);
// Read the data
GDownloadUrl("example4_icons.xml", function(doc) {
var xmlDoc = GXml.parse(doc);
var markers =
xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new GLatLng(lat,lng);
var address = markers[i].getAttribute("address");
var name = markers[i].getAttribute("name");
var html = "<b>"+name+"</b><p>"+address;
var category = markers[i].getAttribute("category");
// create the marker
var marker = createMarker(point,name,html,category);
map.addOverlay(marker);
}
// == show or hide the categories initially ==
show("theatre");
hide("golf");
hide("info");
// == create the initial sidebar ==
makeSidebar();
});
}
else {
alert("Sorry, the Google Maps API is not compatible with this
browser");
}
// This Javascript is based on code provided by the
// Blackpool Community Church Javascript Team
// http://www.commchurch.freeserve.co.uk/
// http://econym.googlepages.com/index.htm
//]]>
</script>
</body>
</html>
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
-~----------~----~----~----~------~----~------~--~---
