Question

您好这个脚本在加利福尼亚州帕洛阿尔托展示了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>

Answer 1

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

喜欢这段代码：

＆＃13;

$(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);
    
});

＆＃13;

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

＆＃13;

检查this如何在wordpress中使用jquery。或者你可以使用他在wordpress here中使用谷歌地图api的方式。

你可以将初始化放在body标签中，如下所示：

<body onload="initialize()">

使用纯javascript进行google maps api。

Google Map API v3无法在Wordpress中运行

1 个答案: