Google Map API in WordPress without a plugin?

2019-01-22 10:20发布

站内问答 / 前端开发
777 1 5

I'm looking to simply add a google map using google maps api to one of my pages in WordPress. Is there a simple way of simply copy and pasting the "Hello, World" google maps code somewhere to have the map displayed on a page?

thanks

标签： wordpress
举报
1条回答
唯我独甜
2楼-- · 2019-01-22 10:54

Yes, there's no need for a plugin for something like this. First of all you would include the Google maps script in header.php or you could enqueue it;

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

Then I normally add the following in header.php - this adds conditional code to the tag for the page containing the map only (in this case page 374);

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

And then I would create a custom template for the contact page (as that's the page the map is normally on) and in the template for that page include something like the following. Yes, it's probably a bit long for a code sample but I'm just giving you a real example which contains an animated marker which can be clicked on to show your client's address. You could change the inline dimensions to suit your design, and you can also offset the map so the marker isn't right smack in the middle of it.

    <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>

If anyone else does it a different, better way then I'd be keen to see it, but I've used this on loads of sites and it works really well.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)