npm install
- Rename
pages/_google-maps-api-key.js
topages/google-maps-api-key.js
and insert your Google API Key or ask Asa for one. npm run dev
- Open up
pages/components/maps.js
- Find the map dimensions variable and increase the size.
const containerStyle = {
width: '400px',
height: '400px'
};
Find the map center variable and change the coordinates.
Find the map zoom variable and change the coordinates.
Add the following code at the top of the MapComponent
function.
const [location, setLocation] = useState({
lat: 0,
lng: 0,
});
const onClickMap = (event) => {
const location = event.latLng.toJSON();
setLocation(location);
}
Then add the following code inside the <GoogleMap>
component:
<Marker position={location} />
Now click a location on the map.
Replace the code you just added with:
const [locations, setLocations] = useState([]);
const rows = locations.map((location) => {
return <li key={`${location.lat},${location.lng}`}>
{location.lat}, {location.lng}
</li>;
});
const markers = locations.map((location) => {
const key = `${location.lat}, ${location.lng}`;
return <Marker key={key} position={location} />;
});
const onClickMap = (event) => {
const location = event.latLng.toJSON();
setLocations(locations.concat([location]));
}
Now use the markers
and rows
variables to actually render the information.