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;
}
<!DOCTYPE html>
<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 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>
<!DOCTYPE html>
<html>
<head>
<title>Local Context Basic</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></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: [
{ type: "restaurant" },
{ type: "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>
<!-- 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>
/* 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>
<!-- jsFiddle will insert css and js -->
</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=AIzaSyBIwzALxUPNbatRBj3Xi1Uhp0fFzwWNBkE&callback=initMap&libraries=localContext&v=beta"
async
></script>
</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.
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.
