Basic LocalContextMapView

Below is the basic Local Context map view with no customizations. We specify the Local Context Library-specific required properties of placeTypePreferences and maxPlaceCount and the basic Map properties of center and zoom.

View source code

TypeScript

let map: google.maps.Map;

function initMap() {
  // @ts-ignore beta feature not in type declarations
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: ["restaurant", "tourist_attraction"],
    maxPlaceCount: 12,
  });

  map = localContextMapView.map;

  map.setOptions({
    center: { lat: 51.507307, lng: -0.08114 },
    zoom: 14,
  });
}index.ts

JavaScript

let map;

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: ["restaurant", "tourist_attraction"],
    maxPlaceCount: 12,
  });
  map = localContextMapView.map;
  map.setOptions({
    center: { lat: 51.507307, lng: -0.08114 },
    zoom: 14,
  });
}
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;
}
style.css

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Local Context Basic</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=localContext&v=beta"
      defer
    ></script>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>sample.html

All

<!DOCTYPE html>
<html>
  <head>
    <title>Local Context Basic</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=localContext&v=beta"
      defer
    ></script>
    <style type="text/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;
      }
    </style>
    <script>
      let map;

      function initMap() {
        const localContextMapView = new google.maps.localContext.LocalContextMapView(
          {
            element: document.getElementById("map"),
            placeTypePreferences: ["restaurant", "tourist_attraction"],
            maxPlaceCount: 12,
          }
        );
        map = localContextMapView.map;
        map.setOptions({
          center: { lat: 51.507307, lng: -0.08114 },
          zoom: 14,
        });
      }
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>
inline.html

let map; function initMap() { const localContextMapView = new google.maps.localContext.LocalContextMapView({ element: document.getElementById("map"), placeTypePreferences: ["restaurant", "tourist_attraction"], maxPlaceCount: 12, }); map = localContextMapView.map; map.setOptions({ center: { lat: 51.507307, lng: -0.08114 }, zoom: 14, }); }

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

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

Understand the code

Local Context map options

Instead of the google.maps.Map class, a Local Context Map is represented by the google.maps.localContext.LocalContextMapView class. The three required parameters of the LocalContextMapView constructor are the element in the document object model (DOM) that will be the container for the map view, the list of place types to include, and a maximum number of place results to display.

TypeScript

// @ts-ignore beta feature not in type declarations
const localContextMapView = new google.maps.localContext.LocalContextMapView({
  element: document.getElementById("map"),
  placeTypePreferences: ["restaurant", "tourist_attraction"],
  maxPlaceCount: 12,
});index.ts

JavaScript

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  element: document.getElementById("map"),
  placeTypePreferences: ["restaurant", "tourist_attraction"],
  maxPlaceCount: 12,
});index.js

Defining the Local Context map viewport

The default locationRestriction bounds of the place search are defined by the map viewport. The map viewport is established upon the first call to google.maps.localContext.LocalContextMapView.map.setOptions() when the center and zoom level are defined for the map load.

TypeScript

map.setOptions({
  center: { lat: 51.507307, lng: -0.08114 },
  zoom: 14,
});index.ts

JavaScript

map.setOptions({
  center: { lat: 51.507307, lng: -0.08114 },
  zoom: 14,
});index.js

Subsequent calls to setOptions() will not refresh the featured places shown by Local Context Library.

Basic LocalContextMapView

View source code

TypeScript

JavaScript

CSS

HTML

All

Understand the code

Local Context map options

TypeScript

JavaScript

Defining the Local Context map viewport

TypeScript

JavaScript

Try the sample