我正在尝试创建一个短代码,让您可以在wordpress页面的任何位置嵌入google地图。
短代码必须能够传递两个属性(纬度和经度)
下面是已编辑的问题(我没有编辑整个问题,因为上面的问题有答案)
在我的案例中,添加短代码并不合适,因为有多个位置(地图上的标记)。
因此,我需要创建一个可以加载多个位置的地图。
这不是唯一的问题,有三个位置(例如,位置1、位置2、位置3),每个位置都包含子位置。页面加载时,地图应加载place1位置;单击其他位置选项卡(如place2)时,地图应隐藏place1位置并加载place2位置,place3也是如此。最后还有一个选项卡,用于加载所有位置和各自的位置。
google.maps.event.addDomListener(window, \'load\', init);
        function init() {
            // Basic options for a simple Google Map
            // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
            var mapOptions = {
                // How zoomed in you want the map to start at (always required)
                zoom: 6,
                // The latitude and longitude to center the map (always required)
                center: new google.maps.LatLng(62.1630198, 12.9895886), // New York
                // How you would like to style the map. 
                // This is where you would paste any style found on Snazzy Maps.
                styles: [{"featureType":"administrative","elementType":"all","stylers":
                [{"saturation":"-100"}]},{"featureType":"administrative.province",
                "elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape",
                "elementType":"all","stylers":[{"saturation":-100},{"lightness":65},
                {"visibility":"on"}]},{"featureType":"poi","elementType":"all","stylers":
                [{"saturation":-100},{"lightness":"50"},{"visibility":"simplified"}]},
                {"featureType":"road","elementType":"all","stylers":[{"saturation":"-100"}]},
                {"featureType":"road.highway","elementType":"all","stylers":[{"visibility":
                "simplified"}]},{"featureType":"road.arterial","elementType":"all","stylers":
                [{"lightness":"30"}]},{"featureType":"road.local","elementType":"all","stylers":
                [{"lightness":"40"}]},{"featureType":"transit","elementType":"all","stylers":
                [{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"water",
                "elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},
                {"saturation":-97}]},{"featureType":"water","elementType":"labels","stylers":
                [{"lightness":-25},{"saturation":-100}]}]
            };
            // Get the HTML DOM element that will contain your map 
            // We are using a div with id="map" seen below in the <body>
            var mapElement = document.getElementById(\'map\');
            // Create the Google Map using our element and options defined above
            var map = new google.maps.Map(mapElement, mapOptions);
            // Let\'s also add a marker while we\'re at it
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(40.6700, -73.9400),
                map: map,
                title: \'Location One\'
            });
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(43.6700, -73.9400),
                map: map,
                title: \'Location Two\'
            });
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(46.6700, -73.9400),
                map: map,
                title: \'Location Three\'
            });
        }
 我正在使用ACF为位置的经度和纬度值创建字段。