如何在博客（blogspot.com）中发布GoogleMap？

问题描述：

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

在博客

由www.blogspot.com（谷歌的博客）

初级讲座从上面的页面中提取相关的代码托管的网页。我已经尝试通过使用HTML/JavaScript小工具并在该部分中包含脚本来解决此问题。他们都没有工作。任何其他想法？

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

代码工作中jsbin 的http：// jsbin。 COM/osebov/1 /编辑且不的jsfiddle http://jsfiddle.net/wNaEX/ 奇怪，我闻的一些问题 – Michel 2013-03-10 03:18:23

我希望我知道是问题是： - | – MiniMe 2013-03-10 03:37:20

听，发表一个新的问题，说上面的代码在jsbin中工作，而不是jsfiddle.once，它的工作原理是jsfiddle，它肯定会在博主中起作用。 – Michel 2013-03-10 04:23:23

答

我想在我的Blogger网站上面的代码，并设法使其工作时，我设置div id="map_canvas"以固定的大小是这样的：

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

这是一个好消息，我几乎失去了我的希望。我刚刚在这里试过http://tetsingmaps.blogspot.ca/你使用了什么样的模板，并且在模板的哪一部分放置了html/javascript部件？非常感谢 – MiniMe 2013-03-11 17:44:19

Yessss！你是个好人。再次感谢。它的工作原理，但它必须作为一个普通的职位发布，而不是像我预期的那样在HTMP/JavaScript小部件中发布。我仍然需要解决规模的问题，但这是可以的，我应该可以自己做。 – MiniMe 2013-03-11 18:00:05

我这样做的方式是将javascript部分放入模板中（在开始标记之前）。在模板里面，我为

标签添加了onload =“initialize（）。然后剩下的就是div的内容，我可以把它放在帖子或小部件上。 – user850010 2013-03-11 18:39:43

如何在博客（blogspot.com）中发布GoogleMap？

相关推荐