Javascript 将WordPress帖子中的地址传递到页面其他位置的Google地图

背景：我的客户正在建立他们自己的WordPress网站（使用购买的功能丰富的主题），我正在根据需要修改一个子主题，以实现她想要的定制。该主题附带一个页面模板，该模板的顶部包含一个全宽谷歌地图，该地图从主题选项中的一个地址集中提取其标记。这意味着要用于一个主要的“联系我们”页面

客户的业务有几个位置，她希望每个位置的页面都包含这样的地图。（下面链接的示例）理想的解决方案似乎是能够在Post的短代码中指定地址，并设置映射标记

以下是主题如何制作地图（其中

$mapAddress

是主题选项中的地址）：

---

并将所有脚本添加到一个短代码中，该短代码在文章开头调用。您可以在测试页面（上面链接）上看到它是如何在文章中编写脚本的，但是映射没有在

#map

div中呈现。知道为什么吗？

您需要在获得目标地址之前停止呈现映射，因此，使用整个脚本块并在shortcode宏中呈现它。这样，您就可以正确地将map_地址和map_内容从参数填充到short code宏，而不是从主题选项填充。这里唯一有意义的主题选项是map_height。

jQuery块使用get-element-by-id找到它的目标div，因此JavaScript在页面上的位置无关紧要。

由于map容器位于循环之外，我不能要求短代码直接呈现代码块（在Post内容内），但是。。。这可能有效吗？：保留HTML结构完整但为空，并使用快捷码插入所有使用目标地址的脚本？我已更新了我的问题，保留HTML并将脚本插入其他位置，但是它没有呈现地图。在Chrome开发工具下查看您的测试页面显示JS正在这一行消失：

jQuery（function（$）{var replaced=$（$h2”）.html（）.replace（'View Project'，'View Coupon'）；$（$h2”）.html（replaced）哦！aa这是我的错——试图改变一些措辞，而不必修改主题的另一部分。我得把这个拿出来。谢谢哇，我都没注意到。（当我看到一大块剧本时，我的眼睛都呆呆了。）这让事情变得简单多了。。。
    <?php
$mapAddress = ot_get_option( 'map_address' );
$mapHeight = ot_get_option( 'map_height' );
$mapContent = ot_get_option( 'map_content' );
?>
<section id="block-map-wrapper">
    <div id="block-map" class="clearfix">       
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
        <script>
        jQuery(document).ready(function(){

        // Map Options
        var mapOptions = {
            zoom: 15,
            scrollwheel: false,
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL,
                position: google.maps.ControlPosition.TOP_LEFT
            },
            mapTypeControl: true,
            scaleControl: false,
            panControl: false,

            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        // The Map Object
        var map = new google.maps.Map(document.getElementById("map"), mapOptions);

        var address = "";
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({ "address" : "<?php echo $mapAddress; ?>" }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                address = results[0].geometry.location;

                map.setCenter(results[0].geometry.location);

                var marker = new google.maps.Marker({
                position: address, 
                map: map,
                clickable: true,
                animation: google.maps.Animation.DROP
                });

                var infowindow = new google.maps.InfoWindow({ content: "<?php echo $mapContent; ?>" });
                google.maps.event.addListener(marker, "click", function() {
                infowindow.open(map, marker);
                });

            }
        });

        });
        </script>

        <div id="map" class = "map" style = "width: 100%; height: <?php echo $mapHeight; ?>px"></div>
    </div><!-- #block-map -->
<div class="shadow-bottom"></div>
</section><!-- #block-map-wrapper -->

    <section id="block-map-wrapper">
    <div id="block-map" class="clearfix">       
        <div id="map" class = "map" style = "width: 100%; height: <?php echo $mapHeight; ?>px"></div>
    </div><!-- #block-map -->
<div class="shadow-bottom"></div>
</section><!-- #block-map-wrapper -->