Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
En este ejemplo, aplicamos el diseño de mapa personalizado al mapa base. Este mapa muestra Waikiki en Hawái y tiene un diseño con un esquema de colores tropicales. También establecimos el valor de maxPlaceCount en 18 para mostrar más lugares de interés.
/*
* 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>
Se puede acceder al mapa base como la propiedad map de un objeto google.maps.localContext.LocalContextMapView. Este mapa es un objeto google.maps.Map normal y se puede personalizar con todos los parámetros y métodos disponibles para esa clase. Por ejemplo, puedes agregar objetos de escucha de eventos y marcadores personalizados.
var marker = new google.maps.Marker({position: center, map: localContextMapView.map});
Dado que un google.maps.localContext.LocalContextMapView.map tiene diseños predeterminados diferentes a los de un Map estándar, puedes anular los valores predeterminados o combinar tu diseño personalizado con las opciones predeterminadas de la Biblioteca de Contexto local. Consulta el artículo Cómo aplicarle diseño al mapa para obtener más detalles.
Para combinar los diseños predeterminados de LocalContextMapView con los diseños personalizados (stylesArray), usa este código:
En este ejemplo, se usa un ícono de hotel para distinguir el punto central del marcador de pin rojo predeterminado. Obtén más información sobre las formas de personalizar un marcador mediante la modificación de las propiedades label y icon de un Marker.
De forma predeterminada, estos marcadores aparecerán debajo de los marcadores de lugares de interés de la Biblioteca de Contexto local. Para asegurarte de que los marcadores de la Biblioteca de Contexto local no oculten el marcador personalizado, configura la propiedad zIndex del marcador en un valor más alto que el de 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,
});