Я сделал эту карту с несколькими локациями. В редакторе Tryit это работает как шарм, когда я пытаюсь поместить его в пост WordPress, я получил только пустое место вместо карты.
Типы стилей карты
/ * Всегда устанавливайте высоту карты явно, чтобы определить размер div
* элемент, который содержит карту. /
#карта {
высота: 100%;
}
/ Необязательно: заставляет образец страницы заполнить окно. * /
html, body {
высота: 100%;
поле: 0;
отступы: 0;
}
// Добавить маркеры var местоположения = [['Merry Me Lebuh Victoria
\
107, Лебух Виктория, Джорджтаун, 10300 Джорджтаун, Пулау Пинанг, Малайзия
Get
Directions ', 5.4121273,100.3344853, 6],
['Dan Cafe
\
107, Лебух Виктория, Джорджтаун, 10300 Джорджтаун, Пулау Пинанг, Малайзия
\ Get
Directions ', 5.423763, 100.333819, 5],
[Ome by Spacebar Coffee
\
1, Лоронг Тох Ака, Джорджтаун, 10100 Джорджтаун, Пулау Пинанг, Малайзия
\ Get
Directions ', 5.4134173,100.3346264, 4],
['Потрясающая столовая
\
164A-B, Лебух Виктория, Джорджтаун, 10300 Джорджтаун, Пулау Пинанг, Малайзия
\ Get Directions ',
5.4137987,100.3371051, 3], ['China House
\'
153, Бич-стрит, Джорджтаун, 10300 Джорджтаун, Пенанг, Малайзия
\ Get
Directions ', 5.4148292,100.3366301, 2],
['Bricklin Cafe Bar
\
31А, Джалан Гурдвара, 10300 Джорджтаун, Пулау Пинанг, Малайзия
\ Get
Directions ', 5.4122543,100.3260137, 1]];
функция 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; для (count = 0; count , количество , местоположения [количество] [2]),
карта: карта,
значок: изображение,
title: location [count] [0]
}); google.maps.event.addListener (маркер, «клик», (функция (маркер, количество) {
return function () {
infowindow.setContent (места [число] [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>