Google Map API v3 在 Wordpress 中不起作用答案

【问题标题】：Google Map API v3 not working in WordpressGoogle Map API v3 在 Wordpress 中不起作用
【发布时间】：2015-02-02 23:17:47
【问题描述】：

您好，此脚本显示了位于加利福尼亚州帕洛阿尔托的 Google 地图。当我在一个简单的 .html 页面中使用它时，它可以完美运行，但是当我将它包含在 Wordpress 页面中时，它不会显示出来。
我错过了什么？谢谢

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    function initialize() {
  var map = new google.maps.Map(
    document.getElementById('map-canvas'), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var marker = new google.maps.Marker({
        position: new google.maps.LatLng(37.4419, -122.1419),
        map: map
  });

}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style type="text/css">
html,body,#bb_map { height: 100%; width:100%;} 
#map-canvas { height: 100%; width:100%;} 
</style>
</head>
<body>
<div id="bb_map"> 
<p>Visit a Diner Near You</p> 
    <div id="map-canvas"></div> 
</div> 
</div>     
</body>
</html>

【问题讨论】：

只有当父元素也通过 css 设置了宽度/高度时，宽度/高度的百分比值才有效。 wordpress-page的结构比较嵌套，#bb_map可能不是body的child，所以100%的宽/高不会有任何影响（除非你设置#bb_map的父节点的宽/高)
@Dr.Molle 我不明白。你能告诉我怎么做吗？
不看wordpress-page
@Dr.Molle mioipv6.it/?page_id=46
您的.post-content（即父元素）没有高度。当您不想要 .post-content 的特定高度时，您必须为 '#bb_map' 设置所需的高度（不是百分比），例如#bb_map{height:300px;}

标签： javascript wordpress google-maps google-maps-api-3

【解决方案1】：

我宁愿在我的 wordpress 中使用 jquery 来获取 googlemaps api，如果你愿意，可以试试。

喜欢这个代码sn-p：

$(document).ready(function () {
    var infowindow = new google.maps.InfoWindow();
    var bi = new google.maps.LatLng(-6.182134, 106.821825);
    var mapOptions = {
        center: new google.maps.LatLng(-2.548926, 118.0148634),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    var marker = new google.maps.Marker({
        map: map,
        postion: bi,
        title: 'Bank Indonesia',
        animation: google.maps.Animation.BOUNCE
    });
    
    marker.setPosition(bi);
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<div id="map_canvas" style="width:450px; height:300px"></div>

检查this 你如何在wordpress 中使用jquery。或者你可以使用他在wordpresshere中使用google maps api的方式。

你可以像下面这样将你的初始化放在body标签中：

<body onload="initialize()">

对于使用纯 javascript 的谷歌地图 api。

【讨论】：