Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
Se você tem um layout que precisa mudar quando a visualização de detalhes do lugar é mostrada, use os listeners de eventos placedetailsviewshowstart e placedetailsviewhidestart. No exemplo abaixo, há três distritos indicados por marcadores personalizados. Quando o usuário clica em um desses marcadores de distrito, uma InfoWindow é aberta com a descrição. Se um usuário clicar em um PDI quando uma InfoWindow estiver aberta, a InfoWindow vai ser fechada quando a visualização de detalhes do lugar desse PDI aparecer e ser reaberta quando o usuário fechar a visualização.
Ver o código-fonte
TypeScript
let map: google.maps.Map;
let infoWindow;
let infoStorage;
const districts = {
a: {
label: "1",
location: {
lat: -1.283975,
lng: 36.818797,
},
name: "Central",
description:
"The Central Business District is a hub of economic activity during the day and a destination for great food at night.",
},
b: {
label: "2",
location: {
lat: -1.270955,
lng: 36.810857,
},
name: "Westlands",
description:
"With many high-end restaurants and a vibrant nightlife, Westlands attracts young professionals and their families. ",
},
c: {
label: "3",
location: {
lat: -1.311868,
lng: 36.838624,
},
name: "South",
description:
"Known for high-rise apartment buildings, South B and South C are in high demand.",
},
};
function initMap() {
const localContextMapView = new google.maps.localContext.LocalContextMapView({
element: document.getElementById("map"),
placeTypePreferences: [
{ type: "restaurant" },
{ type: "tourist_attraction" },
],
maxPlaceCount: 12,
});
map = localContextMapView.map!;
map.setOptions({
center: districts["a"].location,
zoom: 13,
});
// Add 3 custom markers that open InfoWindows on click
for (const key in districts) {
const district = districts[key];
const marker = new google.maps.Marker({
label: district.label,
position: district.location,
map: map,
zIndex: 30,
});
marker.addListener("click", () => {
// Close any open details or existing InfoWindows
localContextMapView.hidePlaceDetailsView();
if (infoWindow) {
infoWindow.close();
}
// Create and open a new InfoWindow
createInfoWindow(district, marker);
// Define origin as the selected marker position
localContextMapView.directionsOptions = {
origin: district.location,
};
});
}
// Set the LocalContextMapView event handlers.
localContextMapView.addListener("placedetailsviewshowstart", () => {
if (infoWindow) {
infoWindow.close();
}
});
localContextMapView.addListener("placedetailsviewhidestart", () => {
if (infoStorage) {
createInfoWindow(infoStorage.district, infoStorage.marker);
}
});
}
// Creates an infoWindow and also stores information associated with the
// InfoWindow so the InfoWindow can be restored after it has been closed
// by non-user-initiated events.
function createInfoWindow(district, marker) {
// Build the content of the InfoWindow
const contentDiv = document.createElement("div");
const nameDiv = document.createElement("div");
const descriptionDiv = document.createTextNode(district.description);
contentDiv.classList.add("infowindow-content");
nameDiv.classList.add("title");
nameDiv.textContent = district.name;
descriptionDiv.textContent = district.description;
contentDiv.appendChild(nameDiv);
contentDiv.appendChild(descriptionDiv);
// Create and open a new InfoWindow
infoWindow = new google.maps.InfoWindow();
infoWindow.setContent(contentDiv);
infoWindow.open(map, marker);
// Store key properties of the InfoWindow for future restoration
infoStorage = {
district: district,
marker: marker,
};
// Clear content storage if infoWindow is closed by the user
infoWindow.addListener("closeclick", () => {
if (infoStorage) {
infoStorage = null;
}
});
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
let map;
let infoWindow;
let infoStorage;
const districts = {
a: {
label: "1",
location: {
lat: -1.283975,
lng: 36.818797,
},
name: "Central",
description:
"The Central Business District is a hub of economic activity during the day and a destination for great food at night.",
},
b: {
label: "2",
location: {
lat: -1.270955,
lng: 36.810857,
},
name: "Westlands",
description:
"With many high-end restaurants and a vibrant nightlife, Westlands attracts young professionals and their families. ",
},
c: {
label: "3",
location: {
lat: -1.311868,
lng: 36.838624,
},
name: "South",
description:
"Known for high-rise apartment buildings, South B and South C are in high demand.",
},
};
function initMap() {
const localContextMapView = new google.maps.localContext.LocalContextMapView({
element: document.getElementById("map"),
placeTypePreferences: [
{ type: "restaurant" },
{ type: "tourist_attraction" },
],
maxPlaceCount: 12,
});
map = localContextMapView.map;
map.setOptions({
center: districts["a"].location,
zoom: 13,
});
// Add 3 custom markers that open InfoWindows on click
for (const key in districts) {
const district = districts[key];
const marker = new google.maps.Marker({
label: district.label,
position: district.location,
map: map,
zIndex: 30,
});
marker.addListener("click", () => {
// Close any open details or existing InfoWindows
localContextMapView.hidePlaceDetailsView();
if (infoWindow) {
infoWindow.close();
}
// Create and open a new InfoWindow
createInfoWindow(district, marker);
// Define origin as the selected marker position
localContextMapView.directionsOptions = {
origin: district.location,
};
});
}
// Set the LocalContextMapView event handlers.
localContextMapView.addListener("placedetailsviewshowstart", () => {
if (infoWindow) {
infoWindow.close();
}
});
localContextMapView.addListener("placedetailsviewhidestart", () => {
if (infoStorage) {
createInfoWindow(infoStorage.district, infoStorage.marker);
}
});
}
// Creates an infoWindow and also stores information associated with the
// InfoWindow so the InfoWindow can be restored after it has been closed
// by non-user-initiated events.
function createInfoWindow(district, marker) {
// Build the content of the InfoWindow
const contentDiv = document.createElement("div");
const nameDiv = document.createElement("div");
const descriptionDiv = document.createTextNode(district.description);
contentDiv.classList.add("infowindow-content");
nameDiv.classList.add("title");
nameDiv.textContent = district.name;
descriptionDiv.textContent = district.description;
contentDiv.appendChild(nameDiv);
contentDiv.appendChild(descriptionDiv);
// Create and open a new InfoWindow
infoWindow = new google.maps.InfoWindow();
infoWindow.setContent(contentDiv);
infoWindow.open(map, marker);
// Store key properties of the InfoWindow for future restoration
infoStorage = {
district: district,
marker: marker,
};
// Clear content storage if infoWindow is closed by the user
infoWindow.addListener("closeclick", () => {
if (infoStorage) {
infoStorage = null;
}
});
}
window.initMap = initMap;
/*
* 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;
}
.infowindow-content {
width: 300px;
}
.title {
font-size: x-large;
font-weight: bold;
}
<html>
<head>
<title>Local Context Events</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>
Gerenciar uma InfoWindow com eventos de visualização de detalhes do lugar
Quando a visualização de detalhes do lugar é aberta e você chama InfoWindow.close(), a InfoWindow aberta é removida do DOM. Para criar o efeito de "reabrir" a InfoWindow, é necessário armazenar as propriedades da InfoWindow em uma variável fora do DOM com o objetivo de recriar a InfoWindow quando quiser mostrá-la novamente. O melhor momento para salvar as informações em uma variável de armazenamento é quando a InfoWindow é criada.
let infoStorage;
function createInfoWindow(district, marker) {
// Build the content of the InfoWindow
let contentDiv = document.createElement('div');
...
// Create and open a new InfoWindow
infoWindow = new google.maps.InfoWindow();
infoWindow.setContent(contentDiv);
infoWindow.open(map, marker);
// Store key properties of the InfoWindow for future restoration
infoStorage = {
'district': district,
'marker': marker,
};
}
Depois, quando a visualização de detalhes do lugar for fechada, você vai poder chamar a mesma função de criação da InfoWindow para recriar a última InfoWindow que estava aberta.
Como há vários marcadores de distrito no mapa que o usuário pode escolher, atualizamos a origem de directionsOptions para o último distrito clicado usando essas linhas no listener de clique do marcador. Isso demonstra que directionsOptions pode ser atualizado mesmo depois que localContextMapView for inicializado.