[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Missing the information I need"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Too complicated / too many steps"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Out of date"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Samples/Code issue"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Other"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Easy to understand"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Solved my problem"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Other"
}]
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,
});
}
/* 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;
}
/* 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;
}
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,
});
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.