我设法从Google抓取了一个代码，该代码使我可以编辑Google Map的颜色，并将其保存在我的代码笔here
中此刻，我所拥有的主题以下列方式工作：如果我单击城市名称，它将打开相应的页面，然后Google地图显示该特定位置，依此类推。
如何将笔中的代码实现到WordPress网站？
在子主题中，我复制了页脚内容并添加了所有脚本，完整的页脚如下所示：
<?php
/**
* The template for displaying the footer
*
* Contains the closing of the #content div and all content after.
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package siber
*/
?>
<?php if(siber_styles()['footer'] == 'show' && siber_styles()['footer_scroll_top'] == 'show' && siber_styles()['header_style'] != 'side') { ?>
<div class="scroll-top multimedia-element-set-icons-up-arrow-2" id="scroll-top"></div>
<?php } if(siber_styles()['footer'] == 'show' || siber_styles()['footer'] == 'minified') { ?>
<footer class="site-footer light main-row">
<?php if(siber_styles()['footer'] != 'minified') { ?>
<div class="footer-wrap">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-<?php echo esc_attr(siber_styles()['footer_col_1']) ?>">
<div class="logo"><a href="<?php echo esc_url(home_url('/')) ?>"><?php echo wp_kses(siber_styles()['logo_content'], 'post') ?></a></div>
<?php if(is_active_sidebar('footer-1')) { ?>
<?php dynamic_sidebar('footer-1'); ?>
<?php } ?>
</div>
<?php if(is_active_sidebar('footer-2')) { ?>
<div class="col-xs-12 col-sm-6 col-md-<?php echo esc_attr(siber_styles()['footer_col_2']) ?>">
<?php dynamic_sidebar('footer-2'); ?>
</div>
<?php } if(is_active_sidebar('footer-3')) { ?>
<div class="col-xs-12 col-sm-6 col-md-<?php echo esc_attr(siber_styles()['footer_col_3']) ?>">
<?php dynamic_sidebar('footer-3'); ?>
</div>
<?php } if(is_active_sidebar('footer-4')) { ?>
<div class="col-xs-12 col-sm-6 col-md-<?php echo esc_attr(siber_styles()['footer_col_4']) ?>">
<?php dynamic_sidebar('footer-4'); ?>
</div>
<?php } ?>
</div>
</div>
</div>
<?php } ?>
</footer>
<?php } ?>
</div>
<script>
function initMap() {
// Create a new StyledMapType object, passing it an array of styles,
// and the name to be displayed on the map type control.
var styledMapType = new google.maps.StyledMapType(
[
{elementType: 'geometry', stylers: [{color: '#ebe3cd'}]},
{elementType: 'labels.text.fill', stylers: [{color: '#523735'}]},
{elementType: 'labels.text.stroke', stylers: [{color: '#f5f1e6'}]},
{
featureType: 'administrative',
elementType: 'geometry.stroke',
stylers: [{color: '#c9b2a6'}]
},
{
featureType: 'administrative.land_parcel',
elementType: 'geometry.stroke',
stylers: [{color: '#dcd2be'}]
},
{
featureType: 'administrative.land_parcel',
elementType: 'labels.text.fill',
stylers: [{color: '#ae9e90'}]
},
{
featureType: 'landscape.natural',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'poi',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [{color: '#93817c'}]
},
{
featureType: 'poi.park',
elementType: 'geometry.fill',
stylers: [{color: '#a5b076'}]
},
{
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [{color: '#447530'}]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [{color: '#f5f1e6'}]
},
{
featureType: 'road.arterial',
elementType: 'geometry',
stylers: [{color: '#fdfcf8'}]
},
{
featureType: 'road.highway',
elementType: 'geometry',
stylers: [{color: '#f8c967'}]
},
{
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [{color: '#e9bc62'}]
},
{
featureType: 'road.highway.controlled_access',
elementType: 'geometry',
stylers: [{color: '#e98d58'}]
},
{
featureType: 'road.highway.controlled_access',
elementType: 'geometry.stroke',
stylers: [{color: '#db8555'}]
},
{
featureType: 'road.local',
elementType: 'labels.text.fill',
stylers: [{color: '#806b63'}]
},
{
featureType: 'transit.line',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'transit.line',
elementType: 'labels.text.fill',
stylers: [{color: '#8f7d77'}]
},
{
featureType: 'transit.line',
elementType: 'labels.text.stroke',
stylers: [{color: '#ebe3cd'}]
},
{
featureType: 'transit.station',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'water',
elementType: 'geometry.fill',
stylers: [{color: '#b9d3c2'}]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [{color: '#92998d'}]
}
],
{name: 'Styled Map'});
// Create a map object, and include the MapTypeId to add
// to the map type control.
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 55.647, lng: 37.581},
zoom: 11,
mapTypeControlOptions: {
mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain',
'styled_map']
}
});
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('styled_map', styledMapType);
map.setMapTypeId('styled_map');
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
</script>
<?php wp_footer(); ?>
</body>
</html>
加载页面时，在控制台中看到以下错误：
您已在此页面上多次包含Google Maps JavaScript API。这可能会导致意外错误。
如果我直接从主题选项中删除API KEY，则地图不会显示。
答案 0 :(得分：0)
您确定Google Maps脚本仅包含一次吗？我怀疑您加载了两次脚本，因为错误非常明显：您多次启动了Google地图，但是在上面的代码中，它只包含了一次。 可能是另一个插件将脚本加载到了代码的其他位置。
您可以提供指向实际页面的链接吗？