Falls sich das Layout ändern soll, wenn die Ansicht mit den Details zum Ort zu sehen ist, verwenden Sie die Event-Listener placedetailsviewshowstart und placedetailsviewhidestart. Im Beispiel unten sind drei Bezirke durch benutzerdefinierte Markierungen gekennzeichnet. Wenn der Nutzer auf eine der Markierungen klickt, wird ein InfoWindow geöffnet, in dem der Bezirk beschrieben wird. Wenn ein Nutzer auf einen POI klickt, während das InfoWindow geöffnet ist, wird das InfoWindow geschlossen, sobald die Ansicht mit den Ortsdetails des POIs eingeblendet wird. Schließt der Nutzer die Ansicht, wird das Infofenster wieder angezeigt.
Quellcode ansehen
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>
InfoWindow mit Ereignissen der Ortsdetailansicht verwalten
Wenn die Detailansicht des Ortes geöffnet wird und Sie InfoWindow.close() aufrufen, wird das geöffnete InfoWindow aus dem DOM entfernt. Damit das InfoWindow wieder geöffnet wird, müssen die Attribute von InfoWindow in einer Variablen außerhalb des DOMs gespeichert werden, damit das InfoWindow neu erstellt werden kann, wenn es wieder zu sehen sein soll. Wir empfehlen, die Informationen beim Erstellen von InfoWindow in einer Speichervariablen zu hinterlegen.
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,
};
}
Wenn die Ansicht mit den Ortsdetails geschlossen ist, können Sie dieselbe InfoWindow-Erstellungsfunktion aufrufen, damit das zuletzt geöffnete InfoWindow noch einmal angezeigt wird.
Da auf dieser Karte mehrere Bezirksmarkierungen für den Nutzer zur Auswahl stehen, wird der Ursprung für directionsOptions auf den zuletzt angeklickten Bezirk aktualisiert. Dazu werden die Zeilen im Klick-Listener der Markierung genutzt. directionsOptions lässt sich also auch nach der Initialisierung von localContextMapView aktualisieren.
