Instructions for configuring Google Map for website
![Instructions for configuring Google Map for website](https://api.dybiweb.com/Files/3c9bf57b-85b4-4995-927e-9a2e86b30174/Article/Huong-dan-cau-hinh-ban-do-Google-Map-cho-website_638533491842273149.png)
DybiWeb supports 1 address map and multiple address map (for companies or shops with multiple addresses). The GoogleMap module configuration interface is as follows:
(1): The system will automatically retrieve the address according to the address information you declared in Web information in the website management system. If you only have 1 address, priority will be given to the address you enter in the Address box (1). If you do not enter here, the system will automatically take the first address in Address information .
(3): Zoom level: depending on the distribution density of branches on the map, you choose the appropriate zoom level. If there is only 1 address displayed on the map, a zoom of about 15 is good.
(2): API Key: According to Google's new policy announcement, to use Google Map on websites and apps,... we need to have an Api Key (or Google Maps API) to be able to use Google Maps. To have Google Maps API, perform the following steps:
Step 1: Access Google API Console → Select a project ( Note: Each Project can contain many API libraries, each API library can be used for many websites, depending on your settings.)
Step 2: Add a new Project
Step 3: Fill in all information → Create
Step 4: After creating → The project you just created → APIs & Servives → Credentials
Step 5: Here → CREATE CREDENTITALS → copy Your API Key to use → Restrict Key to continue installation.
Step 6: Finally, go to edit api and edit the name information to make it easier to remember and increase security
Fill in information according to the following instructions:
- Name: Name the API for easy future management
- Application restrictions: Http referrers (web sites)
- Website restrictions Enter the following two values
- *.your-domain.com/* (Example: *.dybiweb.com/*)
- https://your-domain.com/* (Example: https://dybiweb.com/*)
- API restrictions: Don't restrict key
- Save: Save API settings
Step 7: This step is quite important.
Go to the Project you just created → APIs & Servives → Library
Import the following Libraries → Enable :
- Maps JavaScript API
- Directions API
- Maps Embed API
- Geocoding API
- Places API
Step 8: After Enable is completed → Dashboard to check the successfully installed libraries.
Thus, we have completed the Google Maps API initialization process.
Now update the Key in Step 5 into the module and you're done.