I found that AWESOME tutorial (econym, of course!) and its PERFECT for a mashup / map Im doing....
Here is the STATIC XML file version (that works GREAT): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Google Maps</title> <script src="http://maps.google.com/maps? file=api&v=2&sensor=false&key=ABQIAAAAZDDLZEGmBmPvE__Vf9DUdRTT5SEMcE35e- XHY88qAShQ0vXqiRSKk0gDmzItuJWPxXKFEId4NvK-TA" 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" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; padding-left: 5px; padding-right: 5px; padding-top: 10px;"></div></td> </tr> </table> <form action="#" style="color: red; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; padding- left: 60px;"> Community Events: <input type="checkbox" id="communityeventsbox" onclick="boxclick (this,'communityevents')" /> City Meetings: <input type="checkbox" id="citymeetingsbox" onclick="boxclick (this,'citymeetings')" /> Parks & Recreation: <input type="checkbox" id="parksandrecreationbox" onclick="boxclick (this,'parksandrecreation')" /> <br /> </form> <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["communityevents"] = new GIcon (G_DEFAULT_ICON,"icong.png"); gicons["citymeetings"] = new GIcon(G_DEFAULT_ICON,"iconr.png"); gicons["parksandrecreation"] = new GIcon (G_DEFAULT_ICON,"iconb.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><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( 33.99913,-81.058779), 13); // Read the data GDownloadUrl("cocexample.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("communityevents"); show("citymeetings"); show("parksandrecreation"); // == create the initial sidebar == makeSidebar(); }); } else { alert("Sorry, the Google Maps API is not compatible with this browser"); } //]]> </script> </body> </html> ******************************************************************************* And here is the version Im trying to get to work using my dynamically generated XML stream (the xml it spews out is laid out EXACTLY the same as the flat/static file and Im using DWeaver cs3 with the 'Export Recordset as XML' function thats built in.... it works GREAT for my other attempts at mapping dynamic datasets) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Google Maps</title> <script src="http://maps.google.com/maps? file=api&v=2&sensor=false&key=ABQIAAAAZDDLZEGmBmPvE__Vf9DUdRTT5SEMcE35e- XHY88qAShQ0vXqiRSKk0gDmzItuJWPxXKFEId4NvK-TA" 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" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; padding-left: 5px; padding-right: 5px; padding-top: 10px;"></div></td> </tr> </table> <form action="#" style="color: red; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; padding- left: 60px;"> Community Events: <input type="checkbox" id="communityeventsbox" onclick="boxclick (this,'communityevents')" /> City Meetings: <input type="checkbox" id="citymeetingsbox" onclick="boxclick (this,'citymeetings')" /> Parks & Recreation: <input type="checkbox" id="parksandrecreationbox" onclick="boxclick (this,'parksandrecreation')" /> <br /> </form> <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["communityevents"] = new GIcon (G_DEFAULT_ICON,"icong.png"); gicons["citymeetings"] = new GIcon(G_DEFAULT_ICON,"iconr.png"); gicons["parksandrecreation"] = new GIcon (G_DEFAULT_ICON,"iconb.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><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( 33.99913,-81.058779), 13); // Read the data from static/flat xml file.... // GDownloadUrl("cocexample.xml", function(doc) { // var xmlDoc = GXml.parse(doc); // var markers = xmlDoc.documentElement.getElementsByTagName ("marker"); // Read the data from my dynamic xml stream from a dynamic recordset - done in asp.... var request = GXmlHttp.create(); request.open("GET", "../../generatexml-date_coc.asp?"+Math.floor (Math.random()*101), true); request.onreadystatechange = function() { if (request.readyState == 4) { if ((request.status != 200) && (request.status != 304)) { alert("the live xml file not found"); return; } // obtain the array of markers and loop through it 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 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("communityevents"); show("citymeetings"); show("parksandrecreation"); // == create the initial sidebar == makeSidebar(); }); } else { alert("Sorry, the Google Maps API is not compatible with this browser"); } //]]> </script> </body> </html> ************************************************************** WHen I try the dynamically generated xml I get no map, no links, etc..... but the first one, with the flat/static xml file works beautifully.... what am I missing here. Note: I can hacktogether javascript and have used this sort of thing to take tutorials that use static data to replace with my own routine/ function that uses a dynamic dataset before (thanks to all the advice I found here and on econym tuturoial list!).... so I dont understand what Im missing here. Thanks for any light you can shed on this for me. almost forgot... heres how the XML looks: <markers> <marker name="as as asdf umbia Holiday Workshop" address="1616 Blanding Street" lng="-81.073898" lat="34.080139" category="parksandrecreation"/> <marker name="Historic Columbia Holiday Workshop" address="1616 Blanding Street" lng="-81.043898" lat="34.010139" category="communityevents"/> <marker name="Where God Left His Shoes" address="937 Main Street" lng="-81.073898" lat="34.060139" category="citymeetings"/> </markers> --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
