How to include a GoogleMap in a blogger (blogspot.com) post?

Question

I am trying to include a page like this

http://www.jefftk.com/apartment_prices/index-2011-06

in a blog that is hosted by www.blogspot.com (Google's Blogger)

Belows is the relevant code extracted from the above page. I already tried to solve this by using the HTML/JavaScript gadget and by including the scripts in the section. None of them work. Any other ideas?

<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>

the code works in jsbin http://jsbin.com/osebov/1/edit and not jsfiddle http://jsfiddle.net/wNaEX/ Strange,i smell some issues with — Rahul Shah, Mar 10 '13 at 03:18
listen,post a new question saying that the above code works in jsbin and not jsfiddle.once it works it jsfiddle definately it will work in blogger. — Rahul Shah, Mar 10 '13 at 04:23
Good idea, I will repost, I hope that will cause no trouble. I will point them to your examples, thanks for that — MiniMe, Mar 10 '13 at 05:09
Done. For whoever passes by here is the question: http://stackoverflow.com/questions/15319172/why-is-this-code-working-in-jsbin-but-not-in-jsfillde — MiniMe, Mar 10 '13 at 05:18

score 1 · Accepted Answer · answered Mar 10 '13 at 20:01

1

I tried the above code on my Blogger site and managed to make it work when I set div id="map_canvas" to fixed size like this:

<div id="map_canvas" style="width:400px; height:400px"></div>

answered Mar 10 '13 at 20:01

user850010

6,311
12
39
60

That is great news, I almost lost my hope. I just tried that here http://tetsingmaps.blogspot.ca/ What template are you using and in what section of your template did you place the html/javascript widget ? Thanks a lot – MiniMe Mar 11 '13 at 17:44
Yessss! You are a great guy. Thanks a lot again. It worked but it has to be posted as a regular post not in a HTMP/JavaScript widget as I expected. I will still have to fix the position of the scale but that is OK I should be able to do it myself. – MiniMe Mar 11 '13 at 18:00
The way I did it was to put javascript part inside the template (before starting head tag). Also inside the template I added onload="initialize() for tag. Then all that was left was content of div which I was able to put either on post or widget. – user850010 Mar 11 '13 at 18:39

How to include a GoogleMap in a blogger (blogspot.com) post?

1 Answers1