Stay organized with collections
Save and categorize content based on your preferences.
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.
/*
* 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>
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.
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.