将可搜索的地图添加到Wordpress

时间:2017-11-10 10:20:45

标签: javascript google-maps google-fusion-tables

我是融合表和谷歌地图API的新手,所以希望答案是直截了当的!我使用融合表来创建数据点地图并添加了搜索功能。

但是,地图只会在消失之前短暂出现以替换为"抱歉,出现了错误消息"。我已经查看了代码,无法确定错误的位置。

有人可以看看并建议需要改变的地方吗?

以下是该页面的链接:https://www.enablie.co.uk/map-test/

我的代码是:

 <!DOCTYPE html>

<html>
  <head>
  <style>
    #map-canvas { width:800px; height:800px; }
    .layer-wizard-search-label { font-family: sans-serif };
  </style>
  <script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
  </script>
  <script type="text/javascript">
    var map;
    var layer_0;
    function initialize() {
      map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: new google.maps.LatLng(52.90081096506728, -0.8806991343750425),
        zoom: 9,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
      layer_0 = new google.maps.FusionTablesLayer({
        query: {
          select: "col2",
          from: "1LP8RhZ3QlYREIJB3e1xogaHWVmL8qxAUjKW1R6XE"
        },
        map: map,
        styleId: 2,
        templateId: 2
      });
    }
    function changeMap_0() {
      var whereClause;
      var searchString = document.getElementById('search-string_0').value.replace(/'/g, "\\'");
      if (searchString != '--Select--') {
        whereClause = "'School Name' CONTAINS IGNORING CASE '" + searchString + "'";
      }
      layer_0.setOptions({
        query: {
          select: "col2",
          from: "1LP8RhZ3QlYREIJB3e1xogaHWVmL8qxAUjKW1R6XE",
          where: whereClause
        }
      });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
  </head>
<body>
    <div id="map-canvas"></div>
    <div style="margin-top: 10px;">
      <label class="layer-wizard-search-label">
        School Name
        <input type="text" id="search-string_0">
        <input type="button" onclick="changeMap_0()" value="Search">
      </label> 
    </div>
  </body>
</html>

1 个答案:

答案 0 :(得分:0)

您的地图初始化在哪里使用AppId&amp; AppSecret键?您必须在页面的初始化时使用此方法调用Google App(请参阅此Google Map Api JS) https://developers.google.com/maps/documentation/javascript/examples/map-simple