2

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">&#9608;</font> $1800+<br>
  <font color="#FF2B00">&#9608;</font> $1700+<br>
  <font color="#FF5600">&#9608;</font> $1600+<br>
  <font color="#FF7F00">&#9608;</font> $1500+<br>
  <font color="#FFAB00">&#9608;</font> $1400+<br>
  <font color="#FFD500">&#9608;</font> $1300+<br>
  <font color="#FFFF00">&#9608;</font> $1200+<br>
  <font color="#7FFF00">&#9608;</font> $1100+<br>
  <font color="#00FF00">&#9608;</font> $1000+<br>
  <font color="#00FF7F">&#9608;</font> $900+<br>
  <font color="#00FFFF">&#9608;</font> $800+<br>
  <font color="#00D5FF">&#9608;</font> $700+<br>
  <font color="#00ABFF">&#9608;</font> $600+<br>
  <font color="#007FFF">&#9608;</font> $500+<br>
  <font color="#0056FF">&#9608;</font> $400+<br>
  <font color="#002BFF">&#9608;</font> $300+<br>
  <font color="#0000FF">&#9608;</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>
Let Me Tink About It
  • 15,156
  • 21
  • 98
  • 207
MiniMe
  • 1,057
  • 4
  • 22
  • 47
  • Also http://doc.jsfiddle.net/basic/introduction.html#external-resources - there is a bug indeed - it should automatically treat all link as JS unless ends with .css ... This is fixed code, but not fixed example http://jsfiddle.net/zalun/wNaEX/24/ – zalun Mar 11 '13 at 15:23

2 Answers2

1

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.

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
  • Since these tags are added by jsfiddke should removing the tags fix the problem? It doesn't seem so. However I don't see the tags you mentioned above in the HTML section of my example http://jsfiddle.net/wNaEX/ – MiniMe Mar 10 '13 at 22:59
  • Now you still have the problem explained in [JavaScript not running on jsfiddle.net](http://stackoverflow.com/questions/5468350/javascript-not-running-on-jsfiddle-net) or [Simple example doesn't work on JSFiddle](http://stackoverflow.com/questions/5431351/simple-example-doesnt-work-on-jsfiddle) – Bergi Mar 11 '13 at 16:07
1

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

P1nGu1n
  • 594
  • 8
  • 23
  • I wish I could solve this. I am not a programmer, all I know about this is just what I learned in school but since then I never did more than a couple of scripts, mostly based on copy and paste like the one above. If anyone could help with this it would be great. If this is easy for you then it won't take much of your time. If this is difficult then there is no chance that I would be able so fix it by myself. Thanks for trying to help – MiniMe Mar 11 '13 at 02:50
  • I moved the scripts to the section of the template and I used Internet Explorer's Developer Tools to see if the initialize function was executed and that was OK, I did not see the error you are mentioning above but still no luck with displaying the map :-( – MiniMe Mar 11 '13 at 05:32
  • hey,look at this http://stackoverflow.com/questions/13681917/google-maps-in-jsfiddle?rq=1 – Rahul Shah Mar 11 '13 at 06:07
  • I just did what they did there: included the Google script API in the HTML section and added $(function(){ initialize(); }); at the end of the java script section. I also changed the environment to JQuery 1.8. No progress. You can see it here http://jsfiddle.net/wNaEX/18/ – MiniMe Mar 11 '13 at 14:53
  • OK I solved my initial problem which was to embed the code in a blogger page (blogspot.com). The code has to be pasted in the post, simple and plain and this map
    has to be reduced to a convenient size ex:
    .
     – MiniMe Mar 11 '13 at 18:04
  • Som of you helped me with this, initially it was suspected that this is a java script code problem due to inconsistent behaviour between jbin and jfiddle so I rephrased the problem as above. Some of you had valid points in regards to this particular issue and I would like to show my appreciation for that but without indicating that we reached a solution. How do I do that? – MiniMe Mar 11 '13 at 18:07