没有插件的WordPress中的Google Map API?

时间:2012-07-24 19:13:14

标签: wordpress

我希望简单地使用谷歌地图api将谷歌地图添加到我在WordPress中的一个页面。是否有一种简单的方法可以简单地复制并粘贴“Hello,World”谷歌地图代码,以便在页面上显示地图?

感谢

1 个答案:

答案 0 :(得分:9)

是的,没有必要为这样的插件添加插件。首先,您将在header.php中包含Google地图脚本,或者您可以将其排队;

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>

然后我通常在header.php中添加以下内容 - 这会将条件代码添加到仅包含地图的页面的标记中(在本例中为第374页);

<body <?php if (is_page(374)) { echo 'onload="initialize()" onunload="GUnload()"'; } ?>> 

然后我会为联系页面创建一个自定义模板(因为这是地图通常所在的页面),并且该页面的模板包含如下内容。是的,代码示例可能有点长,但我只是给你一个真实的例子,其中包含一个动画标记,可以点击它来显示你的客户地址。您可以更改内嵌尺寸以适合您的设计,并且您还可以偏移地图,以便标记在其中间不正确。

    <div id="contact-content">

            <script type="text/javascript">
            function initialize() {

                var leeds = new google.maps.LatLng(53.80583, -1.548903);

                var firstLatlng = new google.maps.LatLng(53.80583, -1.548903);              

                var firstOptions = {
                    zoom: 16,
                    center: firstLatlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP 
                };

                var map = new google.maps.Map(document.getElementById("map_leeds"), firstOptions);

                firstmarker = new google.maps.Marker({
                    map:map,
                    draggable:false,
                    animation: google.maps.Animation.DROP,
                    title: 'Your Client',
                    position: leeds
                });

                var contentString1 = '<p>The Address<br />Of your client<br />in<br />here</p>';


                var infowindow1 = new google.maps.InfoWindow({
                    content: contentString1
                });

                google.maps.event.addListener(firstmarker, 'click', function() {
                    infowindow1.open(map,firstmarker);
                });

            }
            </script>

            <div class="map">

                <div id="map_leeds" style="width: 600px; height: 600px"></div>  

            </div>

        </div>  

如果其他人以不同的,更好的方式做到这一点,那么我会热衷于看到它,但我已经在很多网站上使用过它,而且效果非常好。