i'm using api v3's infobubble tabs. works great first marker, 3 tabs show correct data. click marker , first markers tabs data show along new markers 3 tabs, end 6 tabs when click second marker. when click third marker, window closes , new marker infobubble appears first 6 tabs , new 3 tabs marker end 9 tabs, ect each new click. basically, when click second marker, first marker window needs close , second marker needs open 3 tabs marker , not other tabs opened markers. hope clear. here entire pages 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" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>activities</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="googlemaps/scripts/downloadxml.js"></script> <script type="text/javascript" src="googlemaps/scripts/infobubble_tabs.js"></script> <style type="text/css"> html, body { height: 100%; } .style1 { width: 758px; } .style2 { width: 349px; } #side_bar { height: 550px; width: 349px; overflow:scroll; } </style> <script type="text/javascript"> //<![cdata[ // variable collect html placed in side_bar var side_bar_html = ""; var gmarkers = []; var gicons = []; var map = null; var infobubble = new infobubble({ maxwidth: 300 }); //defines icon if there none stated gicons["red"] = new google.maps.markerimage("http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png", new google.maps.size(20, 34), new google.maps.point(0, 0), new google.maps.point(9, 9)); // marker sizes expressed size of x,y // origin of image (0,0) located // in top left of image. // origins, anchor positions , coordinates of marker // increase in x direction right , in // y direction down. var iconimage = new google.maps.markerimage('http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png', new google.maps.size(20, 34), new google.maps.point(0, 0), new google.maps.point(9, 9)); var iconshadow = new google.maps.markerimage('http://www.google.com/mapfiles/shadow50.png', new google.maps.size(37, 34), new google.maps.point(0, 0), new google.maps.point(9, 9)); // shapes define clickable region of icon. // type defines html <area> element 'poly' traces out polygon series of x,y points. final coordinate closes //the poly connecting first coordinate. var iconshape = { coord: [9, 0, 6, 1, 4, 2, 2, 4, 0, 8, 0, 12, 1, 14, 2, 16, 5, 19, 7, 23, 8, 26, 9, 30, 9, 34, 11, 34, 11, 30, 12, 26, 13, 24, 14, 21, 16, 18, 18, 16, 20, 12, 20, 8, 18, 4, 16, 2, 15, 1, 13, 0], type: 'poly' }; //determines icon based on category //if no icon defined function getmarkerimage(iconcolor) { if ((typeof (iconcolor) == "undefined") || (iconcolor == null)) { iconcolor = "red"; } if (!gicons[iconcolor]) { gicons[iconcolor] = new google.maps.markerimage(iconcolor, new google.maps.size(20, 34), new google.maps.point(0, 0), new google.maps.point(9, 9)); } return gicons[iconcolor]; } function category2icon(category) { var color = "red"; switch (category) { case "hike": color = "googlemaps/images/hikingicon.jpg"; break; case "camping": color = "googlemaps/images/camping.gif"; break; case "statepark": color = "googlemaps/images/statepark.jpg"; break; case "nationalpark": color = "googlemaps/images/nationalpark_icon.png"; break; case "pointsofinterest": color = "googlemaps/images/poi.png"; break; default: color = "red"; break; } return color; } gicons["hike"] = getmarkerimage(category2icon("hike")); gicons["camping"] = getmarkerimage(category2icon("camping")); gicons["statepark"] = getmarkerimage(category2icon("statepark")); gicons["nationalpark"] = getmarkerimage(category2icon("nationalpark")); gicons["pointsofinterest"] = getmarkerimage(category2icon("pointsofinterest")); // function create marker , set event window function createmarker(latlng, name, tab1, tab2, tab3, category) { var contentstring = tab1; var contentstring2 = tab2; var contentstring3 = tab3; var marker = new google.maps.marker({ position: latlng, icon: gicons[category], shadow: iconshadow, map: map, title: name, zindex: math.round(latlng.lat() * -100000) << 5 }); // === store category , name info marker properties === marker.mycategory = category; marker.myname = name; gmarkers.push(marker); // open info bubbles google.maps.event.addlistener(marker, 'click', function () { infobubble.open(map, marker); infobubble.addtab('details', contentstring); infobubble.addtab('notes', contentstring2); infobubble.addtab('campground map', contentstring3); }); } // == shows markers of particular category, , ensures checkbox checked == function show(category) { (var = 0; < gmarkers.length; i++) { if (gmarkers[i].mycategory == category) { gmarkers[i].setvisible(true); } } // == check checkbox == document.getelementbyid(category + "box").checked = true; } // == hides markers of particular category, , ensures checkbox cleared == function hide(category) { (var = 0; < gmarkers.length; i++) { if (gmarkers[i].mycategory == category) { gmarkers[i].setvisible(false); } } // == clear checkbox == document.getelementbyid(category + "box").checked = false; // == close info window, in case open on marker hid infobubble.close(); } // == checkbox has been clicked == function boxclick(box, category) { if (box.checked) { show(category); } else { hide(category); } // == rebuild side bar makesidebar(); } function myclick(i) { google.maps.event.trigger(gmarkers[i], "click"); } // == rebuilds sidebar match markers displayed == function makesidebar() { var html = ""; (var = 0; < gmarkers.length; i++) { if (gmarkers[i].getvisible()) { html += '<a href="javascript:myclick(' + + ')">' + gmarkers[i].myname + '<\/a><br>'; } } document.getelementbyid("side_bar").innerhtml = html; } function initialize() { var myoptions = { zoom: 8, center: new google.maps.latlng(39.364032, -77.182159), maptypeid: google.maps.maptypeid.roadmap } map = new google.maps.map(document.getelementbyid("map"), myoptions); // closes open bubbles before opening new 1 google.maps.event.addlistener(map, 'click', function () { infobubble.close(); }); //downloads data xml file // reads data creates each tab downloadurl("googlemaps/categories.xml", function (doc) { var xml = xmlparse(doc); var markers = xml.documentelement.getelementsbytagname("marker"); (var = 0; < markers.length; i++) { // obtain attribues of each marker var lat = parsefloat(markers[i].getattribute("lat")); var lng = parsefloat(markers[i].getattribute("lng")); var point = new google.maps.latlng(lat, lng); var address = markers[i].getattribute("address"); var city = markers[i].getattribute("city"); var state = markers[i].getattribute("state"); var zip = markers[i].getattribute("zip"); var name = markers[i].getattribute("name"); var notes = markers[i].getattribute("notes"); var url = markers[i].getattribute("url"); var image = markers[i].getattribute("image"); var tab1 = ""; tab1 += "<b>" + name + "<\/b><p>"; tab1 += address + "</br>"; tab1 += city + ", " + state + " " + zip + "</br>"; tab1 += '<br><src="_blank" href="'+url+'">'+url+'</a>' + "</br>"; var tab2 = notes; var tab3 = ""; tab3 += '<img src="'+image+'">' + "</br>"; tab3 += "or online at:"; tab3 += '<br><a target="_blank" href="'+image+'">'+image+'</a>' + "</br>"; var category = markers[i].getattribute("category"); // create marker var marker = createmarker(point, name, tab1, tab2, tab3, category); } // == show or hide categories == show("hike"); hide("camping"); hide("statepark"); hide("nationalpark"); hide("pointsofinterest"); // == create initial sidebar == makesidebar(); }); } //]]> </script> </head> <body style="margin:0px; padding:0px;" onload="initialize()"> <table border="1" > <tr> <td class="style1"> <div id="map" style="width:978px; height: 596px"></div> </td> <td valign="top" style="text-decoration: underline; color: #4444ff;" class="style2"> <div id="side_bar"></div> </td> </tr> </table> <form action="#"> hiking: <input type="checkbox" id="hikebox" onclick="boxclick(this,'hike')" /> camping: <input type="checkbox" id="campingbox" onclick="boxclick(this,'camping')" /> state parks: <input type="checkbox" id="stateparkbox" onclick="boxclick(this,'statepark')" /> national parks: <input type="checkbox" id="nationalparkbox" onclick="boxclick(this,'nationalpark')" /> points of interest: <input type="checkbox" id="pointsofinterestbox" onclick="boxclick(this,'pointsofinterest')" /> <br /> </form> <noscript><b>javascript must enabled in order use google maps.</b> however, seems javascript either disabled or not supported browser. view google maps, enable javascript changing browser options, , try again. </noscript> </body> </html>
either remove tabs if exist or destroy infobubble , create new one.
proof of concept - delete/recreate infobubble
// open info bubbles google.maps.event.addlistener(marker, 'click', function () { if (infobubble.getmap() != null) { infobubble.close() delete infobubble; infobubble = new infobubble({ maxwidth: 300 }); } infobubble.open(map, marker); infobubble.addtab('details', contentstring); infobubble.addtab('notes', contentstring2); infobubble.addtab('campground map', contentstring3); }); proof of concept - remove tabs
// open info bubbles google.maps.event.addlistener(marker, 'click', function () { infobubble.open(map, marker); infobubble.removetab(2); infobubble.removetab(1); infobubble.removetab(0); infobubble.addtab('details', contentstring); infobubble.addtab('notes', contentstring2); infobubble.addtab('campground map', contentstring3); }); 
Comments
Post a Comment