Google Api in JavaScript
Google Maps API in JavaScript
Google maps are very important for web apps.
They can help your web visitors get directions to your business.
Google maps can also help you work with location-accurate data which is good for the growth of your business.
In this article, we will be discussing how to use the Google Maps API (Application Programming Interface) using JavaScript and React.
Get the API Key
Open the following URL on your web browser and click the “Credentials” tab:
https://console.developers.google.com/apis
Click the “+ CREATE CREDENTIALS” button to get the API key and choose “API Key”.
Copy the API key that is generated and store it in a safe place.
Render the Map
We will use the React Google Maps API to render the map.
You can install the API using npm by running the following command:
npm i -S @react-google-maps/api
Or using yarn:
yarn add @react-google-maps/api
After the installation, let’s import GoogleMap
and useLoadScript
.
import { GoogleMap, useLoadScript } from '@react-google-maps/api';
Next, let’s use useLoadScript
to create the Map()
function to render the map on DOM (Document Object Model).
For this to work, you MUST have a valid API key:
function Map() {
const {isLoaded, loadError} = useLoadScript({
googleMapsApiKey: "YOUR_GOOGLE_API_KEY:"
});
const mapRef = React.useRef();
const onMapLoad = React.useCallback((map) => {
mapRef.current = map;
}, []);
if(loadError) return "Error";
if(!isLoaded) return "Maps";
return (
)
}
Note that you must replace “YOUR_GOOGLE_API_KEY” with your actual Google Maps API key.
Next, we should set the width and the height for the map so that it can be rendered on the web page:
const containerStyle = {
width: '450px',
height: '450px'
};
Note that you can use a width and height of your size.
Next, we should set the center for the map, which is the place that will be displayed when the map is loaded on the DOM.
In my case, I will use the latitude and longitude values for Nairobi:
const center = {
lat: -1.286389,
lng: 36.817223,
} // Nairobi
The code renders the following map on my web page:
The map has been rendered, but when you click it, you’ll realize that something is wronmg!
With Google maps, we can palce markers after clicking on a certain location, but our map can’t do that!
The reason is that we haven’t added any onClick
event to the map.
Add a Marker
First, let’s import Marker
from the React Google Maps API:
import { GoogleMap, useLoadScript, Marker } from '@react-google-maps/api';
The following code will make it work:
const [markers, setMarkers] = React.useState([]);
const onMapClick = React.useCallback((event) => {
setMarkers(() => [{
lat: event.latLng.lat(),
lng: event.latLng.lng(),
time: new Date()
}]);
}, []);
{markers.map((marker) => (
))}
We’ve created the function that will run when the map is clicked and given it the name onMapClick
.
The event.latLng.lat()
and event.latLng.lng()
were defined inside this function to locate and set the latitude and longitude values for the marker.
We’ve added time so that each marker can have a unique key.
You can add an icon to the into the component if you need to style your marker and add an onClick
event to the marker:
Congratulations!
That’s it!
You now have a Google Map rendered on the DOM.
Anytime you click a location inside the map, it will use latitude and longitude to place a marker over there.
You can add functions to the map using Google APIs like Directions, Places, and Routes.