Want to add Google Map to your Elementor Website in a convenient way? Google map widget of Happy Addons lets you add a map on your website and also helps you customize the map according to your company location.

So before you use this amazing widget of Happy Addons, you need to install and activate these plugins on your WordPress site:

Elementor Free
Happy Addons Free & Pro

In this video, we’ve used our imaginary Restaurant website that has chain restaurants around the cities of the US. The owner of the restaurant wants to display the important facts and deliverable places to the customers. Along with these, he wants to share the restaurant chains located on the map and the entire route of the restaurants. As you can see the map design is completely attached with the theme color.

Demonstrating this website, we’ve tried our best to convey all of these demands by using our Newest widget, Advanced Google Map. Now we’ll show how we have used the Advanced Google Map widget of Happy Addons to fulfill all demands of the restaurant owners.

Let’s see some of the important parts of this tutorial so that you can easily grasp the entire thing easily.


First of all, you need to create an API key from the Google API Console page
After you add the Advanced Google Map Widget, You can see the preview of the Google Map Widget you added. Here you’ll get four options - General Settings, Map settings, Map Marker, and Map style. Expand the General Settings. You can use four types of Google Maps - Basic, Polyline, Polygon, and Routes. The other two options are - Latitude and longitude
To collect the latitude and longitude, you need to go the Google Maps. There you need to see the address bar. After the @ you’ll get the desired Lattitude and Longitude number. The first number from @ to coma is latitude and the number from a coma to the next immediate ending coma is the longitude Just copy one by one and paste it here.
That’s it, you just added the Basic Map on using the real-time latitude & longitude from Google Map. Now this location will be always at the center of your map.
In the Map Settings, you can add different map types, Road map, satellite, Terrain, and Hybrid. You need to adjust the Map Zoom based on your website’s structure. Keep it as minimal as you can. As per our testing 12-13, the zoom level is perfect for the minimal viewport. This zoom will help you to show the concentrated area of your desired location. Others you will get the default view of the map.

Note: Google Maps Platform uses a pay-as-you-go pricing model. So Google Maps API key is not free at all. You will be charged for the API calls. And all of these necessary links will be available in the description below.

Check out the video to step-by-step learn how to use the advanced Google Map Widget of Happy Addons

Resources that you’ll need for using Google Map Widget:

01 Google Map API Console Page
[ Ссылка ]
02 How to create directional Map API
[ Ссылка ]
03 Snazzy Map
[ Ссылка ]
04 Google Map API Billing details
[ Ссылка ]


Time-stamp:

0:15 Introducing Advanced Google Map Widget
0:30 Talking about the imaginary restaurant website
0:50 Types of Maps you can use with the Advanced Google Map
1:15 Required plugins to use Advanced Google Map widget
1:30 Adding API keys from the Google Map API console page
2:25 Google Map API billing information
2:56 Initial view after adding the Advanced Google Map Widget
3:27 Collecting Lattitude and Longitude from the Google Map
4:27 Showing the available options of the Map Settings
5:45 Adding Legend on the Google Map
6:27 Talking about Map Marker settings
6:48 Showing how to add multiple Map Marker to the map
7:08 Adding Snazzy map to the Google Map
7:54 Styling the Google Map (Map, Map Marker, Marker description)
9:09 Styling the Legend
10:59 Showing how to add Polyline Map
11:58 Adding map markers to multiple locations
12:49 Adding Co-ordinate numbers to each location
14:07 Adding other map types (Polygon and Routes)
15:22 Adding the travel mode to the Map
15:44 Using the Advanced options to the Google Map
16:15 Final view of the map

For more details about Advanced Google Map Widget, please visit:

Pricing Page:
[ Ссылка ]


Don’t forget to get connected with us-

☑ Website -- [ Ссылка ]
☑ Facebook -- [ Ссылка ]
☑ Twitter -- [ Ссылка ]

свернуть