Hello and thanks for reading.
I am using the code below to add markers and windows to a map from an
XML file but it seems that the markers are not added to the map in IE6
or IE7.
Please would someone give me some advice with the code below?
[code]
<script type="text/javascript">
//<![CDATA[
GMap.prototype.centerAndZoomOnBounds = function(bounds) {
var center_lat = (bounds.getNorthEast().lat() + bounds.getSouthWest
().lat()) / 2.0;
var center_lng = (bounds.getNorthEast().lng() + bounds.getSouthWest
().lng()) / 2.0;
var center = new GLatLng(center_lat,center_lng)
map.setCenter(center, 10);
}
//]]>
</script>
<div id="map"></div>
<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()) {
// because the function closure trick doesnt work there
var gmarkers = [];
// global variables
var map;
var request;
var bounds = new GLatLngBounds();
var reserveicon = new GIcon();
reserveicon.image = "/images/icon.gif";
reserveicon.iconSize = new GSize(30, 30);
reserveicon.shadowSize = new GSize(35, 30);
reserveicon.iconAnchor = new GPoint(5, 30);
reserveicon.infoWindowAnchor = new GPoint(5, 2);
reserveicon.infoShadowAnchor = new GPoint(14, 25);
reserveicon.transparent = "http://www.google.com/intl/en_ALL/
mapfiles/markerTransparent.png";
reserveicon.printImage = "/images/icon.gif";
reserveicon.mozPrintImage = "/images/icon.gif";
// functions that open the directions forms
function tohere(i) {
var tabLabel = 'Directions';
var numTabs = gmarkers[i].tabs.length;
var divWidth = numTabs * 88;
if (numTabs < 3) divWidth = 3*88;
// The info window version with the "to here" form open
var tabHtml = '<div style="width:'+divWidth+'px">'+
'<br>Directions: <b>To here</b> - <a
href="javascript:fromhere(' + i + ')">From here</a>' +
'<br>Start address:<form action="http://maps.google.com/
maps" method="get" target="_blank">' +
'<input type="text" size="40" maxlength="40" name="saddr"
id="saddr" value="" /><br>' +
'<input value="Get Directions" type="submit"/>' +
'<input type="hidden" name="daddr" value="' + gmarkers
[i].getPoint().lat() + ',' + gmarkers[i].getPoint().lng() +
// "(" + name + ")" +
'"/></div>';
gmarkers[i].tabs[numTabs-1]= new GInfoWindowTab
(tabLabel,tabHtml);
gmarkers[i].openInfoWindowTabsHtml(gmarkers[i].tabs,
{selectedTab:numTabs-1});
}
function fromhere(i) {
var tabLabel = 'Directions';
var numTabs = gmarkers[i].tabs.length;
var divWidth = numTabs * 88;
if (numTabs < 3) divWidth = 3*88;
// The info window version with the "from here" form open
var tabHtml = '<div style="width:'+divWidth+'px">'+
'<br>Directions: <a href="javascript:tohere(' + i + ')">To
here</a> - <b>From here</b>' +
'<br>End address:<form action="http://maps.google.com/maps";
method="get"" target="_blank">' +
'<input type="text" size="40" maxlength="40" name="daddr"
id="daddr" value="" /><br>' +
'<input value="Get Directions" type="submit"/>' +
'<input type="hidden" name="saddr" value="' + gmarkers
[i].getPoint().lat() + ',' + gmarkers[i].getPoint().lng() +
// "(" + name + ")" +
'"/></div>';
gmarkers[i].tabs[numTabs-1]= new GInfoWindowTab
(tabLabel,tabHtml);
gmarkers[i].openInfoWindowTabsHtml(gmarkers[i].tabs,
{selectedTab:numTabs-1});
}
// ==================================================
// 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 = new GMarker(point,reserveicon);
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);
});
return marker;
}
// ==================================================
// This function picks up the click and opens the corresponding
info window
function myclick(i) {
GEvent.trigger(gmarkers[i], "click");
}
// create the map
// var map = new GMap2(document.getElementById("map"));
var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(51.3168,-0.5591), 10);
// Read the data from example.xml
var request = GXmlHttp.create();
var filename = "/reserves/mapdata";
request.open("GET", filename, true);
request.onreadystatechange = processTabbedXML;
request.send(null);
}
else {
alert("Sorry, the Google Maps API is not compatible with this
browser");
}
function processTabbedXML() {
if (request.readyState == 4) {
if ((request.status != 200) && (request.status != 304)) {
alert("file not found: "+filename);
return;
}
// var xmlDoc = request.responseXML;
var xmlDoc = GXml.parse(request.responseText);
// obtain the array of markers and loop through it
var markers = xmlDoc.documentElement.getElementsByTagName
("marker");
// alert("processing "+markers.length+" markers");
// map.clearOverlays();
// bug in clearOverlays
for (var i=0; i< gmarkers.length; i++) {
map.removeOverlay(gmarkers[i]);
}
gmarkers = new Array();
for (var i = 0; i < markers.length; i++) {
// obtain the attributes of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var label = markers[i].getAttribute("label");
var icon = markers[i].getAttribute("icon");
// alert("point["+i+"] label="+label+":("+lat+", "+lng+")");
if (isNaN(lat) || isNaN(lng)) {
alert("bad point "+i);
continue;
}
var point = new GLatLng(lat,lng);
// get the tab info
tabInfo = markers[i].getElementsByTagName("tab");
tabs = new Array();
if (tabInfo.length > 0) {
// alert("processing "+tabInfo.length+" tabs");
for (var j = 0; j < tabInfo.length; j++) {
var tabLabel = GXml.value(tabInfo
[j].getElementsByTagName("label")[0]);
var tabHtml = GXml.value(tabInfo[j].getElementsByTagName
("contents")[0]);
// alert("point["+i+"] tab["+j+"] label="+tabLabel+",
contents="+tabHtml);
if ((j==0) && (tabInfo.length > 2)){ // adjust the
width so that the info window is large enough for this many tabs
tabHtml = '<div style="width:'+(tabInfo.length+1)
*88+'px">' + tabHtml + '</div>';
}
tabs.push(new GInfoWindowTab(tabLabel,tabHtml));
}
} else {
// alert("no tabs point "+i);
var tabLabel = "Nothing";
var tabHtml = markers[i].getAttribute("html");
tabs.push(new GInfoWindowTab(tabLabel,tabHtml));
}
if (!markers[i].getAttribute("nodirections") || (markers
[i].getAttribute("nodirections").toLowerCase() == "no")) {
// add directions tab
var tabLabel = "Directions";
var tabHtml = '<div style="width:'+(tabs.length+1)
*88+'px">'+'<br>Directions: <a href="javascript:tohere('+i+')">To
here</a> - <a href="javascript:fromhere('+i+')">From here</a></div>';
tabs.push(new GInfoWindowTab(tabLabel,tabHtml));
}
// create the marker
var marker = createTabbedMarker(point,label,tabs, icon);
bounds.extend(point);
map.addOverlay(marker);
}
map.centerAndZoomOnBounds(bounds);
}
}
function getXMLfile() {
// Read the data from example.xml
request = GXmlHttp.create();
filename = document.MyForm.filename.value
if (filename.length == 0) {
alert("Please enter a filename!");
return false;
}
// filename = "reserves.xml"
request.open("GET", filename, true);
request.onreadystatechange = processTabbedXML;
request.send(null);
return false;
}
function processXMLfile() {
if (request.readyState == 4) {
if ((request.status == 200) || (request.status == 304)) {
var xmlDoc = request.responseXML;
if (xmlDoc.documentElement) {
// obtain the array of markers and loop through it
var markers = xmlDoc.documentElement.getElementsByTagName
("marker");
map.clearOverlays();
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 GPoint(lng,lat);
var point = new GLatLng(lat,lng);
var html = markers[i].getAttribute("html");
var label = markers[i].getAttribute("label");
var icon = markers[i].getAttribute("icon");
// create the marker
var marker = createMarker(point,label,html,icon);
map.addOverlay(marker);
}
} else {
alert("invalid xml file:"+filename);
}
} else {
alert("file not found:"+filename);
}
}
}
//]]>
</script>
[/code]
--
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.
