Javascript Can'；无法在wordpress页面上显示google地图_Javascript_Php_Wordpress_Google Maps_Google Maps Api 3

Javascript Can'；无法在wordpress页面上显示google地图

javascript php wordpress google-maps google-maps-api-3

Javascript Can'；无法在wordpress页面上显示google地图,javascript,php,wordpress,google-maps,google-maps-api-3,Javascript,Php,Wordpress,Google Maps,Google Maps Api 3,我是谷歌地图api的新手，正在使用它在我的wordpress页面上放置一张地图，并获取用户的位置。到目前为止，我在header.php文件中保留了以下代码，并用实际的api密钥替换了myapikey <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=myapikey"></script> 我还有一个wordpre

我是谷歌地图api的新手，正在使用它在我的wordpress页面上放置一张地图，并获取用户的位置。到目前为止，我在header.php文件中保留了以下代码，并用实际的api密钥替换了myapikey

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?libraries=places&key=myapikey"></script>

我还有一个wordpress页面，上面有以下代码。当我将代码保存在html文件中时，该代码可以工作。然而，当我把这段代码放在我的wordpress页面上时，我甚至没有看到地图。我正在使用谷歌地图API v3地理定位。谁能帮帮我吗

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta charset="utf-8">
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0px; padding: 0 }
      #map-canvas { height: 100%; width: 100%; top: -100px;}
    </style>

    <script type="text/javascript">
      var map;

      function initialize() {
        var mapOptions = {
          zoom: 12
        };
        map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);

        //Html five geolocation
        if(navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var pos = new google.maps.LatLng(position.coords.latitude,
                                             position.coords.longitude);

            var infowindow = new google.maps.InfoWindow({
              map: map,
              position: pos,
              content: "HTML5 is used."
            });

            map.setCenter(pos);
          }, function() {
            handleNoGeolocation(true);
          });
        } else {
          // Browser doesn't support Geolocation
          handleNoGeolocation(false);
        }
      }
      function handleNoGeolocation(errorFlag) {
        if (errorFlag) {
          var content = 'Error: The Geolocation service failed.';
        } else {
          var content = 'Error: Your browser doesn\'t support geolocation.';
        }

        var options = {
          map: map,
          position: new google.maps.LatLng(60, 105),
          content: content
        };

        var infowindow = new google.maps.InfoWindow(options);
        map.setCenter(options.position);
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"/>
  </body>
</html>


html{高度：100%}
正文{高度：100%；边距：0px；填充：0}
#地图画布{高度：100%；宽度：100%；顶部：-100px；}
var映射；
函数初始化（）{
变量映射选项={
缩放：12
};
map=new google.maps.map（document.getElementById（“地图画布”），
地图选项）；
//HTML5地理定位
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（函数（位置）{
var pos=新的google.maps.LatLng（position.coords.latitude，
位置坐标经度）；
var infowindow=new google.maps.infowindow({
地图：地图，
职位:pos,，
内容：“使用HTML5。”
});
地图设置中心（pos）；
}，函数（）{
手持导航（真）；
});
}否则{
//浏览器不支持地理位置
手动定位（假）；
}
}
函数handleNogeLocation（errorFlag）{
如果（错误标志）{
var content='错误：地理位置服务失败'；
}否则{
var content='错误：您的浏览器不支持地理位置'；
}
变量选项={
地图：地图，
职位：新google.maps.LatLng（60105），
内容：内容
};
var infowindow=new google.maps.infowindow（选项）；
地图设置中心（选项位置）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

您不能将完整的文档粘贴到编辑器中，您在编辑器中输入的内容应该是您页面的内容，它几乎可以是您在HTML页面中输入的任何内容（没有HTML、标题和正文）

脚本和样式始终通过主题的页眉/页脚或插件包含。

向我们展示您在wordpress中所做的工作，您是如何包含此页面的？对于我的wordpress页面，我转到页面并添加了一个新页面。在该页面中，我将上述html代码保存在文本框中。以前我已经能够在我的页面上创建一个工作的谷歌地图，但是当我尝试使用Geolocation和libraries=places时，问题似乎出现了。我将代码放入脚本中，并将样式代码放入头文件中，结果成功了。非常感谢你。