我正在尝试创建一个短代码,让您可以在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为位置的经度和纬度值创建字段。