Responding to Local Context Events

If you have a layout that should change when the place details view is shown, use the event listeners placedetailsviewshowstart and placedetailsviewhidestart. In the sample below, there are three districts indicated by custom markers. When the user clicks one of these district markers, an InfoWindow opens describing the district. If a user clicks on a POI when an InfoWindow is open, the InfoWindow will close when that POI's place details view appears and will re-open when the user closes the place details view.

View source code

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;
    }
  });
}index.ts

JavaScript

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;
    }
  });
}
index.js

CSS

/* 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;
}
style.css

HTML

<!DOCTYPE html>
<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 src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=localContext&v=beta"
      async
    ></script>
  </body>
</html>sample.html

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; } }); }

/* 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; }

<!DOCTYPE html> <html> <head> <title>Local Context Events</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>  </head> <body> <div id="map"></div>  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=localContext&v=beta&channel=2" async ></script> </body> </html>

Try Sample

CodeSandbox.io

Stackblitz.com

GitPod.io

Google Cloud Shell

Understand the code

Managing an `InfoWindow` with place details view events

When the place details view opens and you call InfoWindow.close(), the open InfoWindow gets removed from the DOM. In order to create the effect of "re-opening" the InfoWindow, you must store the InfoWindow's properties in a variable outside the DOM so you can recreate the InfoWindow when you want to show it again. The best time to save the information to a storage variable is when the InfoWindow is created.

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,
  };
}

Later, when the place details view is closed, you can call the same InfoWindow creation function to recreate the last InfoWindow that was open.

TypeScript

localContextMapView.addListener("placedetailsviewhidestart", () => {
  if (infoStorage) {
    createInfoWindow(infoStorage.district, infoStorage.marker);
  }
});index.ts

JavaScript

localContextMapView.addListener("placedetailsviewhidestart", () => {
  if (infoStorage) {
    createInfoWindow(infoStorage.district, infoStorage.marker);
  }
});index.js

Updating the directions origin

Since there are multiple district markers on this map that the user can choose from, we update the origin for directionsOptions to the last clicked district using these lines in the marker's click listener. This demonstrates that directionsOptions can be updated even after localContextMapView has been initialized.

Responding to Local Context Events

View source code

TypeScript

JavaScript

CSS

HTML

Try Sample

Understand the code

Managing an InfoWindow with place details view events

TypeScript

JavaScript

Updating the directions origin

Try the sample

Managing an `InfoWindow` with place details view events