Databases
StackOverflow2013
Postsdbo
POgoogle maps listener only running once
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POgoogle maps listener only running once
    primarykey
    data
    text
    <p>I am having some difficulties where my listeners appear to cancel each other out only when I set a rectangle to the map, but not when I call an alert or anything else.</p> <p>This works perfectly:</p> <pre><code> google.maps.event.addDomListener(document.getElementById("overlay" + me), 'click', function () { displayMessage(me); //displays the current overlay index on screen (IE 1 of 30) }); </code></pre> <p>The above simply displays the index of the overlay on the map (IE 1 of 30). It works at every overlay clicked with the proper overlay index.</p> <p>This not so much: </p> <pre><code>google.maps.event.addDomListener(document.getElementById("overlay" + me), 'click', function () { alert("Called"); curOverlayRectangle.setOptions(overlayRectangleOptions); //defined by C# to js curOverlayRectangle.setBounds(incomingOverlayBounds[me]); curOverlayRectangle.setMap(map); alert("Finished"); }); </code></pre> <p>The above is supposed to add a rectangle over the overlay already on the map. What it actually does is add the rectangle for the first overlay clicked, but then if I click another overlay, nothing happens.</p> <p>It appears that the listener is never called because once I click the first overlay, it goes through and says finished with the rectangle drawn. I then proceed to click another overlay and no alert occurs...</p> <p>I have been working on this for quite some time, please help! Thanks!</p> <p>EDIT1:</p> <pre><code>//get is simply the index function tempAddListener(get) { //alert("adding: " + get); if (document.getElementById("overlay" + get) != null) { //check to see if div is there google.maps.event.addDomListener(document.getElementById("overlay" + get), 'click', function () { displayMessage("listener fired at overlay: " + get); //if enabled, works fine //displayOverlayRectangle(incomingOverlayBounds[get]); //if enabled, listener fires but seems to delete all my other listeners for the overlays }); } else { //could not find the div } } </code></pre> <p><strong>Edit2</strong></p> <pre><code>//took out all defines //#region geoObjs var incomingOverlayBounds = []; var incomingOverlaySourceURL = []; var incomingOverlayRotation = []; var incomingOverlayRectangle = []; function initOverlays(){ //most of these are taken out incomingOverlayBounds[0] = new google.maps.LatLngBounds( new google.maps.LatLng(29.7883456702236,-82.384843759249), new incomingOverlayRotation[16] = 0; incomingOverlayBounds[17] = new google.maps.LatLngBounds( new google.maps.LatLng(29.4715356702236,-82.3839748493845), new google.maps.LatLng(29.51265,-82.33674)); incomingOverlaySourceURL[17] = "http://ufdcimages.uflib.ufl.edu/UF/00/07/17/26/00027/12001_1968_2KK_20.jpg"; incomingOverlayRotation[17] = 0; incomingOverlayBounds[18] = new google.maps.LatLngBounds( new google.maps.LatLng(29.4584356702236,-82.3840587432067), new google.maps.LatLng(29.49955,-82.33683)); incomingOverlaySourceURL[18] = "http://ufdcimages.uflib.ufl.edu/UF/00/07/17/26/00027/12001_1968_2KK_21.jpg"; incomingOverlayRotation[18] = 0; incomingOverlayBounds[19] = new google.maps.LatLngBounds( new google.maps.LatLng(29.4431556702236,-82.4158516259991), new google.maps.LatLng(29.48427,-82.36863)); incomingOverlaySourceURL[19] = "http://ufdcimages.uflib.ufl.edu/UF/00/07/17/26/00027/12001_1968_2KK_022.jpg"; incomingOverlayRotation[19] = 0; incomingOverlayBounds[20] = new google.maps.LatLngBounds( new google.maps.LatLng(29.4593656702236,-82.4157191765652), new google.maps.LatLng(29.50048,-82.36849)); incomingOverlaySourceURL[20] = "http://ufdcimages.uflib.ufl.edu/UF/00/07/17/26/00027/12001_1968_2KK_023.jpg"; incomingOverlayRotation[20] = 0; incomingOverlayBounds[21] = new google.maps.LatLngBounds( new google.maps.LatLng(29.4736856702236,-82.4151858519302), new google.maps.LatLng(29.5148,-82.36795)); incomingOverlaySourceURL[21] = "http://ufdcimages.uflib.ufl.edu/UF/00/07/17/26/00027/12001_1968_2KK_024.jpg"; incomingOverlayRotation[21] = 0; incomingOverlaySourceURL[51] = "http://ufdcimages.uflib.ufl.edu/UF/00/07/17/26/00027/12001_1968_2KK_054.jpg"; incomingOverlayRotation[51] = 0; displayIncomingOverlays(); } //#endregion function initialize() { //initialize google map objects map = new google.maps.Map(document.getElementById(gmapPageDivId), gmapOptions); //initialize map initOverlays(); //initialize all the incoming overlays } var incomingOverlayBounds = []; var incomingOverlaySourceURL = []; var incomingOverlayRotation = []; var overlays = []; function displayIncomingOverlays() { for (var i = 0; i &lt; incomingOverlayBounds.length; i++) { overlaysOnMap[i] = new CustomOverlay(incomingOverlayBounds[i], incomingOverlaySourceURL[i], map, incomingOverlaySourceURL[i]); overlaysOnMap[i].setMap(map); //displayOverlayRectangle(incomingOverlayBounds[i]); //add all the rectangles } } function CustomOverlay(bounds, image, map, rotation) { //iterate here overlayCount++; // Now initialize all properties. this.bounds_ = bounds; this.image_ = image; this.map_ = map; preservedRotation = rotation; if (overlayPrevious != null) { overlayPrevious.setMap(null); } // We define a property to hold the image's div. We'll // actually create this div upon receipt of the onAdd() // method so we'll leave it null for now. this.div_ = null; } CustomOverlay.prototype.onAdd = function () { if (overlayPrevious != null) { overlayPrevious.setMap(null); } // Note: an overlay's receipt of onAdd() indicates that // the map's panes are now available for attaching // the overlay to the map via the DOM. // Create the DIV and set some basic attributes. var div = document.createElement("div"); div.id = "overlay" + overlaysOnMap.indexOf(this); div.style.borderStyle = 'none'; div.style.borderWidth = '0px'; div.style.position = 'absolute'; div.style.opacity = preserveOpacity; // Create an IMG element and attach it to the DIV. var img = document.createElement('img'); img.src = incomingOverlaySourceURL[overlaysOnMap.indexOf(this)]; //this.image img.style.width = '100%'; img.style.height = '100%'; img.style.position = 'absolute'; div.appendChild(img); //get the index var overlayIndex = overlaysOnMap.indexOf(this); // Set the overlay's div_ property to this DIV this.div_ = div; // We add an overlay to a map via one of the map's panes. // We'll add this overlay to the overlayLayer pane. var panes = this.getPanes(); panes.overlayLayer.appendChild(div); //add the listener tempAddListener(overlayIndex); }; CustomOverlay.prototype.draw = function () { // Size and position the overlay. We use a southwest and northeast // position of the overlay to peg it to the correct position and size. // We need to retrieve the projection from this overlay to do this. var overlayProjection = this.getProjection(); // Retrieve the southwest and northeast coordinates of this overlay // in latlngs and convert them to pixels coordinates. // We'll use these coordinates to resize the DIV. var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest()); var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast()); // Resize the image's DIV to fit the indicated dimensions. var div = this.div_; div.style.left = sw.x + 'px'; div.style.top = ne.y + 'px'; div.style.width = (ne.x - sw.x) + 'px'; div.style.height = (sw.y - ne.y) + 'px'; //for a preserved rotation if (preservedRotation != 0) { //keepRotate(preservedRotation); } }; //CustomOverlay.prototype.onRemove = function () { // this.div_.parentNode.removeChild(this.div_); // this.div_ = null; //}; function tempAddListener(get) { alert("div: "+document.getElementById("overlay" + get).innerHTML); alert("adding with index: " + get); if (document.getElementById("overlay" + get) != null) { //check to see if div is there google.maps.event.addDomListener(document.getElementById("overlay" + get), 'click', function () { alert("listener fired at overlay: " + get); displayOverlayRectangle(incomingOverlayBounds[get]); //alert(incomingOverlayBounds[get]); //overlayRectangles[get] = displayOverlayRectangle(incomingOverlayBounds[get]); //overlayRectangles[get].setMap(map); }); } else { //could not find the div } } function displayOverlayRectangle(bounds) { //2do: set drawing manager, set mode, match listeners of rectangle var tempOverlayRectangle = new google.maps.Rectangle(); var tempOverlayRectangleOptions = { strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.1, editable: true, draggable: true, //strokeOpacity: 0.2, //strokeWeight: 1, //fillOpacity: 0.0, zindex: 5 }; tempOverlayRectangle.setOptions(tempOverlayRectangleOptions); tempOverlayRectangle.setBounds(bounds); tempOverlayRectangle.setMap(map); google.maps.event.addListener(tempOverlayRectangle, "click", function () { alert("can't touch this"); }); //return tempOverlayRectangle; //tempOverlayRectangle.setOptions(tempOverlayRectangleOptions); //tempOverlayRectangle.setBounds(bounds); //tempOverlayRectangle.setMap(map); } //start this whole mess once google.maps.event.addDomListener(window, 'load', initialize); &lt;/script&gt; &lt;div id="googleMap"&gt;&lt;/div&gt; </code></pre> <p><strong>UPDATE</strong></p> <p>It appears that any map code on the listener will invalidate the other listeners. (IE I tried it with the following code and it still only ran once)</p> <pre><code> google.maps.event.addDomListener(document.getElementById("overlay" + get), 'click', function () { if (map.getMapTypeId() == 'TERRAIN') { map.setMapTypeId(google.maps.MapTypeId.ROADMAP); } else { map.setMapTypeId(google.maps.MapTypeId.TERRAIN); } }); </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USyoyo
    1. USyoyo
    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. COdid you check the console? maybe an exception was thrown during the first call of a listener? (not exactly in the code above)
      singulars
      1. POgoogle maps listener only running once
      1. USgawi
    2. COso in my Visual studio there are no errors. I am also using firebug and there is no error. I am baffled because if I remove the curOverlayRectangle.setMap(map), it fires every time but when it is there it only fires once.
      singulars
      1. POgoogle maps listener only running once
      1. USyoyo
    3. COSo you don't create the curOverlayRectangle every time? Probably this is a problem (rectangle is "registered" in the map and there could be some issues with modyfing the object). To manage rectangles you should also store them somewhere (for instance you would like to hide them at some point of time). Try after first alert create the object from the beginning: curOverlayRectangle = new google.maps.Rectangle(); and then proceed with the rest of the method.
      singulars
      1. POgoogle maps listener only running once
      1. USgawi
 

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