Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
A continuación, se muestra la vista básica del mapa de Contexto local sin personalizaciones.
Especificamos las propiedades requeridas para la Biblioteca de Contexto local de placeTypePreferences y maxPlaceCount, y las propiedades básicas Map de center y zoom.
/*
* 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 Basic</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>
En lugar de la clase google.maps.Map, el mapa de Contexto local se representa mediante la clase google.maps.localContext.LocalContextMapView. Los tres parámetros obligatorios del constructor LocalContextMapView son el elemento en el Modelo de objetos del documento (DOM) que será el contenedor de la vista de mapa, la lista de tipos de lugares que se incluirán y una cantidad máxima de resultados de lugares para mostrar.
Cómo definir el viewport del mapa de Contexto local
Los límites locationRestriction predeterminados de la búsqueda de lugares se definen mediante el viewport del mapa. Este elemento se establece en la primera llamada a google.maps.localContext.LocalContextMapView.map.setOptions() cuando se definen el centro y el nivel de zoom para la carga del mapa.