我制作了这个具有多个位置的自定义地图。在tryit编辑器中,它的工作原理就像一个魅力,当我尝试将其放入wordpress帖子时,我只有空白而不是map。
样式化的地图类型 / *始终明确设置地图高度以定义div的大小 *包含地图的元素。 / #map { 高度:100%; } / 可选:使示例页面充满窗口。 * / html,正文{ 高度:100%; 边距:0; 填充:0; } //添加标记var位置= [['Merry Me Lebuh Victoria
\ 107,Lebuh Victoria,George Town,10300 George Town,Pulau Pinang,马来西亚
\ Get Directions',5.4121273,100.3344853,6],
['Dan Cafe
\ 107,Lebuh Victoria,George Town,10300 George Town,Pulau Pinang,马来西亚
\ Get Directions',5.423763,100.333819,5],
['Ome by Spacebar Coffee
\ 马来西亚,槟城乔治市10100,乔治市,罗弄·托·阿卡(1)
\ Get Directions',5.4134173,100.3346264,4],
['很棒的食堂
\ 164A-B,Lebuh Victoria,George Town,10300 George Town,Pulau Pinang,马来西亚
\获取路线', 5.4137987,100.3371051,3],['China House
\ 153,Beach St,Georgetown,10300 George Town,槟城,马来西亚
\ Get Directions',5.4148292,100.3366301,2],
['Bricklin Cafe Bar
\ 马来西亚,槟城乔治市10300,Jalan Gurdwara,31A,
\ Get Directions',5.4122543,100.3260137,1]];function initMap(){
// Create a new StyledMapType object, passing it an array of styles, // and the name to be displayed on the map type control. var map = new google.maps.Map(document.getElementById('map'), { center: {lat: 5.4193918, lng: 100.3400000}, zoom: 14, mapTypeControlOptions: { mapTypeIds: [''] } }); var styledMapType = new google.maps.StyledMapType( - , {name: 'Styled Map'}); // Add marker icon var image = { url: 'data:image/png;base64,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', scaledSize: new google.maps.Size(35, 43) } var infowindow = new google.maps.InfoWindow({});
var标记,计数;为(count = 0; count
count,位置[计数] [2]), 地图: 图标:图片, 标题:locations [count] [0] }); google.maps.event.addListener(marker,'click',(function(marker,count){ 返回函数(){ infowindow.setContent(locations [count] [0]); infowindow.open(地图,标记); } })(标记,计数)); } //Associate the styled map with the MapTypeId and set it to display. map.mapTypes.set('styled_map', styledMapType); map.setMapTypeId('styled_map'); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBNIrrJSGponSo3YMGNZ_7HU6FhiQoEidQ&callback=initMap"> </script> </body> </html>
here是编辑器中的代码,您可以看到正在运行。请有人让我知道要更改什么,以便它可以在wordpress帖子中使用。我尝试使用google自定义地图示例并将我的位置放在那里,但是效果不佳。