Оптимизируйте свои подборки
Сохраняйте и классифицируйте контент в соответствии со своими настройками.
В этом примере мы применили к базовой карте Вайкики (штат Гавайи) собственную цветовую гамму с насыщенными тропическими цветами. Мы также установили для maxPlaceCount значение 18, чтобы показать на карте больше объектов.
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<html>
<head>
<title>Local Context Styles</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises.
See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=localContext&v=beta"
defer
></script>
</body>
</html>
Доступ к базовой карте выполняется с помощью свойства map объекта google.maps.localContext.LocalContextMapView. Эта карта – обычный объект класса google.maps.Map, и поэтому к ней можно применять все параметры и методы, доступные для этого класса. Например, вы можете добавить собственные маркеры и прослушиватели событий.
var marker = new google.maps.Marker({position: center, map: localContextMapView.map});
Поскольку стили google.maps.localContext.LocalContextMapView.map по умолчанию отличаются от стандартных стилей Map, вы можете либо переопределить значения по умолчанию, либо объединить свои настройки с библиотекой локального контекста. Подробнее…
В примере ниже показано, как задать пользовательские стили из массива stylesArray поверх стилей LocalContextMapView по умолчанию.
В примере ниже показано, как поставить в центральную точку карты значок отеля вместо значка по умолчанию (красного маркера). Узнайте, как создать собственный маркер, изменив свойства label и icon объекта Marker.
По умолчанию собственные маркеры отображаются под маркерами POI библиотеки локального контекста. Чтобы избежать перекрытия, задайте для свойства маркера zIndex более высокое значение, чем у maxPlaceCount.
TypeScript
// Add a marker at the center point
new google.maps.Marker({
position: center,
map: map,
icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAdUlEQVR4AWMYOWAU/AfhYWMBCxA3A/FlIN4MxN7I6gjg80DcD8QC+CzIxqIxH6aOSHwfYQmmBZexuQymjgTcj8uCz1gUHybDgvO4LFiMRXE4GRb8x2UBDxCXQ8PxPdSrLNSxAD+g3ALCeNQCKoHhZcHAg1EAAM3cyWj3TGxhAAAAAElFTkSuQmCC",
zIndex: 30,
});
// Add a marker at the center point
new google.maps.Marker({
position: center,
map: map,
icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAdUlEQVR4AWMYOWAU/AfhYWMBCxA3A/FlIN4MxN7I6gjg80DcD8QC+CzIxqIxH6aOSHwfYQmmBZexuQymjgTcj8uCz1gUHybDgvO4LFiMRXE4GRb8x2UBDxCXQ8PxPdSrLNSxAD+g3ALCeNQCKoHhZcHAg1EAAM3cyWj3TGxhAAAAAElFTkSuQmCC",
zIndex: 30,
});