将Google地图JavaScript API集成到博客中 [英] Integrate a google map javascript API into blogger

问题描述

这就是我所做的：

在模板编辑器中，我添加了自定义 - >高级 - >添加CSS：

 ＃map-canvas {
 height：100％; 
 margin：0px; 
 padding：0px 
} 
  

然后在模板的Header中添加就在< / head> 之前：

< script src ='http ：//maps.googleapis.com/maps/api/js？key = AIzaSyAXprv_TXEju4E-phldszJrt2VNbxfIMkU'type ='text / javascript'>
< / script>

最后，我尝试使用右侧栏小部件HTML / Javascript和过去的HTML编辑器：

 < script type =text / javascript> 
函数initialize（）{
 var mapOptions = {
 center：{lat：-34.397，lng：150.644}，
 zoom：8 
}; 
 var map = new google.maps.Map（document.getElementById（'map-canvas'），
 mapOptions）; 
} 
 google.maps.event.addDomListener（window，'load'，initialize）; 
< / script> 
  

您可以在这里看到结果：

http://f4eor.blogspot.com

没有什么作用，但整个代码在由我的计算机上的记事本创建的简单HTML页面中运行良好。

感谢您的帮助。使用固定的高度（例如 height：150px; ）

>

I'm pulling my hair with Blogger and Google Maps API.

This is what I've done :

In the Template editor I added in the customize->Advanced->Add your CSS :

#map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
  }

Then in the Header of the template I added just before the </head>:

<script src='http://maps.googleapis.com/maps/api/js?key=AIzaSyAXprv_TXEju4E-phldszJrt2VNbxfIMkU' type='text/javascript'> </script>

And Finally I tried to use the Right Bar widget HTML/Javascript and past in the HTML editor :

<script type="text/javascript">
  function initialize() {
    var mapOptions = {
      center: { lat: -34.397, lng: 150.644},
      zoom: 8
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

You can see the result here :

http://f4eor.blogspot.com

Nothing works but the entire code works well in a simple HTML page created by notepad on my computer.

Thanks for your Help.

解决方案

Use a fixed height (e.g. height: 150px;)

这篇关于将Google地图JavaScript API集成到博客中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！