Berikut adalah tampilan peta Konteks Lokal dasar tanpa penyesuaian.
Kami menentukan properti wajib khusus Library Konteks Lokal
placeTypePreferences dan maxPlaceCount, serta properti Map dasar
center dan 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>
Sebagai ganti class google.maps.Map,
Peta Konteks Lokal direpresentasikan oleh
class google.maps.localContext.LocalContextMapView. Tiga parameter wajib konstruktor LocalContextMapView adalah
elemen dalam Document Object Model (DOM) yang akan menjadi penampung
untuk tampilan peta, daftar jenis tempat yang akan disertakan, dan jumlah maksimum hasil
tempat yang akan ditampilkan.
Batas locationRestriction default untuk penelusuran tempat ditentukan oleh
area pandang peta. Area pandang peta ditetapkan setelah panggilan pertama ke
google.maps.localContext.LocalContextMapView.map.setOptions() saat pusat
dan tingkat zoom ditentukan untuk pemuatan peta.