npm install- Rename
pages/_google-maps-api-key.jstopages/google-maps-api-key.jsand 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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent