将可搜索地图添加到 Wordpress
Adding searchable map to Wordpress
我是融合表和 google 地图 API 方面的新手,所以希望答案是直截了当的!我使用融合表创建了数据点图并添加了搜索功能。
然而,地图只出现了短暂的时间,然后消失并被 "Sorry, something went wrong message" 取代。我已经查看了代码,但无法找出错误所在。
请有人看一下并建议需要更改什么?。
这里是link页面: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>
带有 AppId 和 AppSecret 密钥的地图初始化在哪里?您必须在页面初始化时使用此调用 Google 应用程序(请参阅此 Google 地图 Api JS)
https://developers.google.com/maps/documentation/javascript/examples/map-simple
我是融合表和 google 地图 API 方面的新手,所以希望答案是直截了当的!我使用融合表创建了数据点图并添加了搜索功能。
然而,地图只出现了短暂的时间,然后消失并被 "Sorry, something went wrong message" 取代。我已经查看了代码,但无法找出错误所在。
请有人看一下并建议需要更改什么?。
这里是link页面: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>
带有 AppId 和 AppSecret 密钥的地图初始化在哪里?您必须在页面初始化时使用此调用 Google 应用程序(请参阅此 Google 地图 Api JS) https://developers.google.com/maps/documentation/javascript/examples/map-simple