Google Map API v3 在 Wordpress 中不起作用

Google Map API v3 not working in Wordpress

本文关键字：Wordpress 不起作用 v3 Map API Google      更新时间：2023-09-26

嗨，这个脚本显示了加利福尼亚州帕洛阿尔托的谷歌地图。当我在一个简单的.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>

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

像这个代码片段：

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

检查一下你如何在wordpress中使用jquery。或者你可以在这里使用他在WordPress中使用谷歌地图api的方式。

您可以将初始化放在正文标签中，如下所示：

<body onload="initialize()">

对于使用纯JavaScript的Google Maps API。

相关文章：