Why is this code working in jsbin but not in jsfiddle?
Question
I am reposting/rephrasing this as another user here advised. The code below works in jsbin but not in jsfiddle . Does anybody know why?
The problem originated in my attempt to include this code in a blogger post ( http://tetsingmaps.blogspot.ca/ )
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
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;
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
<div id="legend">
<b>$/bedroom</b>
<br><br>
<font color="#FF0000">█</font> $1800+<br>
<font color="#FF2B00">█</font> $1700+<br>
<font color="#FF5600">█</font> $1600+<br>
<font color="#FF7F00">█</font> $1500+<br>
<font color="#FFAB00">█</font> $1400+<br>
<font color="#FFD500">█</font> $1300+<br>
<font color="#FFFF00">█</font> $1200+<br>
<font color="#7FFF00">█</font> $1100+<br>
<font color="#00FF00">█</font> $1000+<br>
<font color="#00FF7F">█</font> $900+<br>
<font color="#00FFFF">█</font> $800+<br>
<font color="#00D5FF">█</font> $700+<br>
<font color="#00ABFF">█</font> $600+<br>
<font color="#007FFF">█</font> $500+<br>
<font color="#0056FF">█</font> $400+<br>
<font color="#002BFF">█</font> $300+<br>
<font color="#0000FF">█</font> $300-<br>
<br>
as of 6/2011<br>
<a href="index.html">current</a><br>
<a href="rooms-2011-06.html">$/room</a><br>
(<a href="/news/2011-06-18.html">details</a>)
</div>
2 answers
solution1
1 2013-03-10 17:34:32
Your <head> and <body> tags are incorrectly closed. Just have a look at the source code of the output pages ( http://fiddle.jshell.net/wNaEX/show/ , http://jsbin.com/osebov/1 ) to see how both are invalid. While JsBin expects whole HTML pages (from doctype to </html> ), jsfiddle will just insert the "HTML" in the body tags of its output template. Sometimes the browser may interpret this as intended, sometimes not.
solution2
1 2013-03-10 17:37:11
When viewing the console in Chrome (F12), it throws the following error:
Uncaught ReferenceError: initialize is not defined
onload
So something's wrong when it tries to call initialize
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.