Databases
StackOverflow2013
Postsdbo
POInfobubble tabs not resetting when a new marker is clicked
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POInfobubble tabs not resetting when a new marker is clicked
    primarykey
    data
    text
    <p>I'm using api V3's infobubble with tabs. Everything works great with the first marker, 3 tabs show up with the correct data. then you click another marker and the first markers tabs with the data show up along with the new markers 3 tabs, so you end up with 6 tabs when you click the second marker. When you click the third marker, the window closes and then the new marker infobubble appears with the first 6 tabs and then the new 3 tabs for that marker so you end up with 9 tabs, ect with each new click. Basically, when you click the second marker, the first marker window needs to close and the second marker needs to open with only the 3 tabs for that marker only and not all the other tabs from previously opened markers. I hope this is clear. Here is the entire pages code:</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"&gt; &lt;head&gt; &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt; &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"/&gt; &lt;title&gt;Activities&lt;/title&gt; &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="GoogleMaps/Scripts/downloadxml.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="GoogleMaps/Scripts/infobubble_tabs.js"&gt;&lt;/script&gt; &lt;style type="text/css"&gt; html, body { height: 100%; } .style1 { width: 758px; } .style2 { width: 349px; } #side_bar { height: 550px; width: 349px; overflow:scroll; } &lt;/style&gt; &lt;script type="text/javascript"&gt; //&lt;![CDATA[ // this variable will collect the html which will eventually be placed in the side_bar var side_bar_html = ""; var gmarkers = []; var gicons = []; var map = null; var InfoBubble = new InfoBubble({ maxWidth: 300 }); //defines icon if there is 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 are expressed as a Size of X,Y // where the origin of the image (0,0) is located // in the top left of the image. // Origins, anchor positions and coordinates of the marker // increase in the X direction to the right and in // the 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 the clickable region of the icon. // The type defines an HTML &amp;lt;area&amp;gt; element 'poly' which traces out a polygon as a series of X,Y points. The final coordinate closes //the poly by connecting to the 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 is 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")); // A function to create the marker and set up the 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) &lt;&lt; 5 }); // === Store the category and name info as a marker properties === marker.mycategory = category; marker.myname = name; gmarkers.push(marker); // to open the 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 all markers of a particular category, and ensures the checkbox is checked == function show(category) { for (var i = 0; i &lt; gmarkers.length; i++) { if (gmarkers[i].mycategory == category) { gmarkers[i].setVisible(true); } } // == 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 &lt; gmarkers.length; i++) { if (gmarkers[i].mycategory == category) { gmarkers[i].setVisible(false); } } // == clear the checkbox == document.getElementById(category + "box").checked = false; // == close the info window, in case its open on a marker that we just hid InfoBubble.close(); } // == 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) { google.maps.event.trigger(gmarkers[i], "click"); } // == rebuilds the sidebar to match the markers currently displayed == function makeSidebar() { var html = ""; for (var i = 0; i &lt; gmarkers.length; i++) { if (gmarkers[i].getVisible()) { html += '&lt;a href="javascript:myclick(' + i + ')"&gt;' + gmarkers[i].myname + '&lt;\/a&gt;&lt;br&gt;'; } } 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 any open bubbles before opening new one google.maps.event.addListener(map, 'click', function () { InfoBubble.close(); }); //Downloads the data from xml file // Reads the data the creates each tab downloadUrl("GoogleMaps/categories.xml", function (doc) { var xml = xmlParse(doc); var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i &lt; 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 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 += "&lt;b&gt;" + name + "&lt;\/b&gt;&lt;p&gt;"; tab1 += address + "&lt;/br&gt;"; tab1 += city + ", " + state + " " + zip + "&lt;/br&gt;"; tab1 += '&lt;br&gt;&lt;src="_blank" href="'+url+'"&gt;'+url+'&lt;/a&gt;' + "&lt;/br&gt;"; var tab2 = notes; var tab3 = ""; tab3 += '&lt;img src="'+image+'"&gt;' + "&lt;/br&gt;"; tab3 += "Or online at:"; tab3 += '&lt;br&gt;&lt;a target="_blank" href="'+image+'"&gt;'+image+'&lt;/a&gt;' + "&lt;/br&gt;"; var category = markers[i].getAttribute("category"); // create the marker var marker = createMarker(point, name, tab1, tab2, tab3, category); } // == show or hide the categories initially == show("Hike"); hide("Camping"); hide("StatePark"); hide("NationalPark"); hide("PointsofInterest"); // == create the initial sidebar == makeSidebar(); }); } //]]&gt; &lt;/script&gt; &lt;/head&gt; &lt;body style="margin:0px; padding:0px;" onload="initialize()"&gt; &lt;table border="1" &gt; &lt;tr&gt; &lt;td class="style1"&gt; &lt;div id="map" style="width:978px; height: 596px"&gt;&lt;/div&gt; &lt;/td&gt; &lt;td valign="top" style="text-decoration: underline; color: #4444ff;" class="style2"&gt; &lt;div id="side_bar"&gt;&lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;form action="#"&gt; Hiking: &lt;input type="checkbox" id="Hikebox" onclick="boxclick(this,'Hike')" /&gt; &amp;nbsp;&amp;nbsp; Camping: &lt;input type="checkbox" id="Campingbox" onclick="boxclick(this,'Camping')" /&gt; &amp;nbsp;&amp;nbsp; State Parks: &lt;input type="checkbox" id="StateParkbox" onclick="boxclick(this,'StatePark')" /&gt;&amp;nbsp;&amp;nbsp; National Parks: &lt;input type="checkbox" id="NationalParkbox" onclick="boxclick(this,'NationalPark')" /&gt;&amp;nbsp;&amp;nbsp; Points of Interest: &lt;input type="checkbox" id="PointsofInterestbox" onclick="boxclick(this,'PointsofInterest')" /&gt; &amp;nbsp;&amp;nbsp; &lt;br /&gt; &lt;/form&gt; &lt;noscript&gt;&lt;b&gt;JavaScript must be enabled in order for you to use Google Maps.&lt;/b&gt; 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. &lt;/noscript&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. US2pourdrummer
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload