StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>SOLVED</strong></p> <p>Bottom line, the overlay I was creating could not be accessed appropriately by the DOM. Thus, I created an invisible rectangle to overlay on top of my overlay which can be accessed. </p> <p><strong>Snippet:</strong></p> <pre><code> var incomingOverlayBounds = []; //defined in c# to js on page var incomingOverlaySourceURL = []; //defined in c# to js on page var incomingOverlayRotation = []; //defined in c# to js on page var ghostOverlayRectangle = []; //holds ghost overlay rectangles (IE overlay hotspots) var ghostOverlayRectangleOptions = { //define options for ghost rectangle strokeColor: "#FF0000", //color doesnt matter strokeOpacity: 0.0, //make border invisible strokeWeight: 1, //should not matter? fillColor: "#FF0000", //color doesnt matter fillOpacity: 0.0, //make fill transparent editable: false, //just to be sure? draggable: false, //just to be sure? zindex: 6 //perhaps higher? }; var visibleOverlayRectangleOptions = { //define options for visible rectangle strokeColor: "#FF0000", //for testing (red) strokeOpacity: 0.8, //for testing strokeWeight: 2, //for testing fillColor: "#FF0000", //for testing (red) fillOpacity: 0.1, //for testing editable: true, //sobek standard draggable: true, //sobek standard //strokeOpacity: 0.2, //sobek standard //strokeWeight: 1, //sobek standard //fillOpacity: 0.0, //sobek standard zindex: 5 //sobek standard }; var visibleOverlayRectangle = new google.maps.Rectangle(); //init maybe move to array later //Displays all the overlays sent from the C# code. Also calls displayGhostOverlayRectangle. function displayIncomingOverlays() { //go through and display overlays as long as there is an overlay to display for (var i = 0; i < incomingOverlayBounds.length; i++) { overlaysOnMap[i] = new CustomOverlay(incomingOverlayBounds[i], incomingOverlaySourceURL[i], map, incomingOverlayRotation[i]); overlaysOnMap[i].setMap(map); //set the overlay to the map displayGhostOverlayRectangle(incomingOverlayBounds[i],i); //add all the ghost rectangles } } //Displays an invisible rectangle on top of the overlay div (creates a hotspot). This rectangle is used as a psuedo listener if the 'overlay div' is clicked. This solved issue of creating listener for overlay div directly. //Supporting URL: http://stackoverflow.com/questions/17025240/google-maps-listener-only-running-once function displayGhostOverlayRectangle(ghostBounds,ghostIndex) { ghostOverlayRectangle[ghostIndex] = new google.maps.Rectangle(); //init rect ghostOverlayRectangle[ghostIndex].setOptions(ghostOverlayRectangleOptions); //set options ghostOverlayRectangle[ghostIndex].setBounds(ghostBounds); //set bounds ghostOverlayRectangle[ghostIndex].setMap(map); //set to map //create the listener for this ghost rectangle google.maps.event.addListener(ghostOverlayRectangle[ghostIndex], 'click', function () { displayVisibleOverlayRectangle(ghostBounds, ghostIndex); //add the visible rectangles }); } //Displays the visible rectangle which is used to edit an overlay. Called by the ghost listener. function displayVisibleOverlayRectangle(bounds, overlayIndex) { visibleOverlayRectangle.setOptions(visibleOverlayRectangleOptions); visibleOverlayRectangle.setBounds(bounds); visibleOverlayRectangle.setMap(map); } //Starts the creation of a custom overlay div which contains a rectangular image. //Supporting URL: https://developers.google.com/maps/documentation/javascript/overlays#CustomOverlays function CustomOverlay(bounds, image, map, rotation) { overlayCount++; //iterate how many overlays have been drawn this.bounds_ = bounds; //set the bounds this.image_ = image; //set source url this.map_ = map; //set to map preservedRotation = rotation; //set the rotation this.div_ = null; //defines 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. } //Continues support for adding an custom overlay //Supporting URL: https://developers.google.com/maps/documentation/javascript/overlays#CustomOverlays // 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. CustomOverlay.prototype.onAdd = function () { // 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); // 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); }; //Continues support for adding an custom overlay //Supporting URL: https://developers.google.com/maps/documentation/javascript/overlays#CustomOverlays 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); } }; //Not currently used //Supporting URL: https://developers.google.com/maps/documentation/javascript/overlays#CustomOverlays CustomOverlay.prototype.onRemove = function () { this.div_.parentNode.removeChild(this.div_); this.div_ = null; }; </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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