Databases
StackOverflow2013
Postsdbo
POWhy is this code working in jsbin but not in jsfiddle?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy is this code working in jsbin but not in jsfiddle?
    text
    copied!<p>I am reposting/rephrasing this as another user here advised. The code below works in <strong><a href="http://jsbin.com/osebov/1/edit" rel="nofollow noreferrer">jsbin</a></strong> but not in <strong><a href="http://jsfiddle.net/wNaEX/" rel="nofollow noreferrer">jsfiddle</a></strong>. Does anybody know why?</p> <p>The problem originated in my attempt to include this code in a blogger post (<a href="http://tetsingmaps.blogspot.ca/" rel="nofollow noreferrer">http://tetsingmaps.blogspot.ca/</a>)</p> <pre><code>&lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt; &lt;/script&gt; &lt;script type="text/javascript"&gt; var overlay; TQOverlay.prototype = new google.maps.OverlayView(); function initialize() { var latlng = new google.maps.LatLng(42.345393812066433, -71.079311590576168); var myOptions = { zoom: 13, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var swBound = new google.maps.LatLng(42.255594, -71.18282318115234); var neBound = new google.maps.LatLng(42.43519362413287, -70.9758); var bounds = new google.maps.LatLngBounds(swBound, neBound); var srcImage = "http://www.jefftk.com/apartment_prices/apts-2011-06.png"; overlay = new TQOverlay(bounds, srcImage, map); } function TQOverlay(bounds, image, map) { this.bounds_ = bounds; this.image_ = image; this.map_ = map; this.div_ = null; this.setMap(map); } TQOverlay.prototype.onAdd = function() { var div = document.createElement('DIV'); div.style.border = "none"; div.style.borderWidth = "0px"; div.style.position = "absolute"; var img = document.createElement("img"); img.src = this.image_; img.style.width = "100%"; img.style.height = "100%"; img.style.opacity = .5; img.style.filter = 'alpha(opacity=50)'; div.appendChild(img); this.div_ = div; var panes = this.getPanes(); panes.overlayLayer.appendChild(div); } TQOverlay.prototype.draw = function() { var overlayProjection = this.getProjection(); var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest()); var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast()); 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'; } TQOverlay.prototype.onRemove = function() { this.div_.parentNode.removeChild(this.div_); this.div_ = null; } &lt;/script&gt; &lt;/head&gt; &lt;body onload="initialize()"&gt; &lt;div id="map_canvas" style="width:100%; height:100%"&gt;&lt;/div&gt; &lt;div id="legend"&gt; &lt;b&gt;$/bedroom&lt;/b&gt; &lt;br&gt;&lt;br&gt; &lt;font color="#FF0000"&gt;&amp;#9608;&lt;/font&gt; $1800+&lt;br&gt; &lt;font color="#FF2B00"&gt;&amp;#9608;&lt;/font&gt; $1700+&lt;br&gt; &lt;font color="#FF5600"&gt;&amp;#9608;&lt;/font&gt; $1600+&lt;br&gt; &lt;font color="#FF7F00"&gt;&amp;#9608;&lt;/font&gt; $1500+&lt;br&gt; &lt;font color="#FFAB00"&gt;&amp;#9608;&lt;/font&gt; $1400+&lt;br&gt; &lt;font color="#FFD500"&gt;&amp;#9608;&lt;/font&gt; $1300+&lt;br&gt; &lt;font color="#FFFF00"&gt;&amp;#9608;&lt;/font&gt; $1200+&lt;br&gt; &lt;font color="#7FFF00"&gt;&amp;#9608;&lt;/font&gt; $1100+&lt;br&gt; &lt;font color="#00FF00"&gt;&amp;#9608;&lt;/font&gt; $1000+&lt;br&gt; &lt;font color="#00FF7F"&gt;&amp;#9608;&lt;/font&gt; $900+&lt;br&gt; &lt;font color="#00FFFF"&gt;&amp;#9608;&lt;/font&gt; $800+&lt;br&gt; &lt;font color="#00D5FF"&gt;&amp;#9608;&lt;/font&gt; $700+&lt;br&gt; &lt;font color="#00ABFF"&gt;&amp;#9608;&lt;/font&gt; $600+&lt;br&gt; &lt;font color="#007FFF"&gt;&amp;#9608;&lt;/font&gt; $500+&lt;br&gt; &lt;font color="#0056FF"&gt;&amp;#9608;&lt;/font&gt; $400+&lt;br&gt; &lt;font color="#002BFF"&gt;&amp;#9608;&lt;/font&gt; $300+&lt;br&gt; &lt;font color="#0000FF"&gt;&amp;#9608;&lt;/font&gt; $300-&lt;br&gt; &lt;br&gt; as of 6/2011&lt;br&gt; &lt;a href="index.html"&gt;current&lt;/a&gt;&lt;br&gt; &lt;a href="rooms-2011-06.html"&gt;$/room&lt;/a&gt;&lt;br&gt; (&lt;a href="/news/2011-06-18.html"&gt;details&lt;/a&gt;) &lt;/div&gt; </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