1. Home
  2. Docs
  3. Happy Elementor Addons P...
  4. Premium Widgets
  5. Advanced Google Map

Advanced Google Map

Want to configure Google Map to your Elementor website? Check out the Happy Addons’ new Advanced Google Map widget. With this exclusive widget, you can add different types of Google Maps and also able to use the Snazzy Map to your website in a more organized way.

How To Use Happy Addons’ Advanced Google Map Widget

Pre-requisites

You need to install and activate the below plugins to your site to use that exclusive widget:

  • Elementor (Free)
  • Happy Addons (Free)
  • Happy Addons (Pro)

However, you also need the Google Map Directional API key for using the Google Map. Read the documentation and learn how to create a directional Google Map API. As it’s a premium feature make that you have a proper understanding of the Google Maps Platform Billing.

Note: You also need an authentic Credit Card when configuring the map. Whenever you call an API, it will deduct dollars from your credit card so make sure you only active the must-needed Map features.

Disable Search Engine Visibility

Note: Before configuring the Google Map API, make sure that you uncheck your website’s Search Engine Visibility option. You can find the option Settings->Reading area. Otherwise, you’ll face the JS error.

Let’s get started:

How to Add Google Map Directional API Key

After getting the Google Map API Key, you have to connect the key with the Happy Addons. To do this, go to the Dashboard->HappyAddons->Credentials area.

Happy Dashboard Credentialss

Then scroll down and you’ll get a Google Map option where you need to paste your Google Map API key.

Insert Google Map API Key

Find & Add Advanced Google Map Widget

It’s time to add the Map to your site. Find the ‘Advanced Google Map‘ widget from the Elementor widgets panel first. Then drag & drop the widget into the suitable place on your website.

Add Advanced Google Map Widget

After adding the widget, you see an interface like the image below. In the Content area, you’ll get four different options to add your Google Map content. They are.

  • General Settings
  • Map Settings
  • Map Marker
  • Map Style
Conetnt Advamced Google Map Widget

General Settings

The General Settings has three options such as Google Map Types, Latitude, and Longitude. We’ll talk about the Google Map Types later.

Let’s see how to get the exact location on Google Map using Latitude and Longitude.

How To Find Location by Latitude and Longitude

To show your perfect location, you have to add that location’s Latitude and Longitude. Let’s see how you can find your location’s Latitude and Longitude code.

General Settings

Go to the Google Map and search for your actual location on the Map. Here, we’ve searched for Las Vegas. Now focus on the URL. You notice that two codes are visible on the URL. The first one is for Latitude and the last one is for Longitude. Now copy these two codes and paste the General Settings-> Latitude and Longitude section.

After adding the Latitude and Longitude, the Map pointer always remains in the center of the Map.

Get Map Latitude & Longitude

There are four types of Google Maps in the General Settings->Google Map Type area. They are Basic, Polyline, Polygon, and Routes.

Let’s see what do these Maps look like?

Polyline Google Map

 ​A polyline is a list of points, where line segments are drawn between consecutive points.

If you select the Map type as Polyline, you’ll get a Map like the image below. With this Map, you can easily set multiple locations on the Map. Here, you notice that we’ve added three different locations using this Map.

Google Map Polyline

Coordinate Settings

Polyline Map has an option named Coordinate Settings that allows you to add different locations. Go to the Coordinate Settings and open an item. Then you can the Title of the location and set the actual location using the Latitude and Longitude code.

Coordinate Settings

Polygon Google Map

A polygon (like a polyline) defines a series of connected coordinates in an ordered sequence. Additionally, polygons form a closed loop and define a filled region.

If you want to see your Map locations using a rectangle style like the image below, you should set the Polygon Google Map as your Google Map Type.

Like the Polyline Map, the Polygon Map also comes with the same Coordinate Settings for adding the multiple Map locations. We already mentioned in the above section about this setting.

Google Map Polygon

Routes Google Map

Routes Map automatically finds the best routes and creates a mostly used route or path to your preferred locations.

There is another Google Map type called Routes Google Map. It displays your multiple locations with a route. Using this Map, your users find your location also get a proper idea of how to visit your location.

Google Map Routes

Routes Coordinate Settings

To set the several locations, the Routes Map offers an extra option called Routes Coordinate Settings. This setting is a little bit different from the Coordinate Settings of Polyline and Polygon. Here, you are able to add the Origin location and the Destination location so that users can see the accurate road map of your location.

Routes Coordinate Settings

And finally, you can change the Travel Mode to Walking, Bicycling, and Driving. Keep in mind, it depends on google Maps’ data. If there is no route for your selected travel mode map will act wired. So choose it accordingly.

Map Settings

In the Content->Map Settings, you’ll get all the essential settings to control your Map.

Different Map Types

In the Map Settings, you’ll get four different Map types and they are.

  1. Road Map
  2. Satellite
  3. Terrain
  4. Hybrid

Let’s see how these Maps look like.

Different Map Types

Note: Satellite and Hybrid map types may not work on zoom levels greater than 12 on all locations. 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 bird’s eye map of google. 

Enable Scroll wheel zoom

If you want to control the zooming using the Mouse Scroll Wheel, you should enable this option.

Enable Scroll wheel zoom

Other Map Settings

Here are the other Map settings.

1.Info container always opened: According to your need, you can keep the Info Container always opened.
2. Zoom controls:
If you want to control Map zooming using the (+) & (-) button then enable the Zoom Control option.
3. Full screen control:
You can enable and disable the Full Screen Control using this option.
4. Show legend:
You can show & hide the Legend using this handy feature.
5. Map type control:
By enabling the May tyle option, you can control your Map types.
6. Street view control:
You can active the Street view option by enabling the feature.
7. Hide logo: You are also able to hide the Google logo on the Map.
8. Hide copyright:
Like the Google logo, you can hide the Copyright option.
9. Hide terms of use: Also, you can hide the Terms of use option of the Map.
10. Hide keyboard shortcuts: Based on your purpose, you can Hide the Keyboard Shortcuts by enabling this feature.

Other Map Settings
  • Open info container on Hover: You are able to Open Info Container on Hover.
  • Disable map drag: If you want to Disable the Map drag option, you can do it by enabling the feature.
  • Hide report a map error: You are able to hide the report a map error.

Map Marker

Go to the Content->Map Marker. Here, you can add multiple Markers on the Map by clicking the Add Item button. To add the content to the Item, you need to open it.

Choose Map Marker Image

You can insert an Image, enable Rectangular Image also set Custom marker Height and Custom Marker Width.

Choose Map Marker Image

Map Marker Description

You are able to add a Marker Title and Description. Here, we’ve added our restaurant number into the Title area and address in the Description area.

Map Marker Description

Different Map Styles

There are seven types of Map Styles you can use according to your purpose. They are.

  • Standard
  • Silver
  • Retro
  • Dark
  • Night
  • Aubergine
  • Custom

Let’s see how these Map Styles look likes.

Map Styles

How To Add Snazzy Maps

Happy Addons’ Advanced Google Map allows you to add Custom Map. You can a Snazzy Map to your site. To add a custom Snazzy Map, you need to visit its official website. After that, you need to choose a suitable Map style for your website. Then copy the Jason Code.

How To Add Snazzy Maps

Paste Snazzy Map Jason Code

You have to select the Map Style->Custom and paste the Jason Code into the Jason Code area.

Paste Snazzy Map Jason Code

That’s it.

Add Legend Conetnt

In this area, you can write the Legend Title. And add the Legend Items by clicking the ADD TEAM button. You need to open the Item first to add the Item content. Then you can insert an image and add a Title of the Item.

Add Legend Conetnt

Advanced Google Map Style Options

In the Style area, you’ll get six different options to customize the Map. They are.

  • Map
  • Market Title
  • Marker Description
  • Legend Title
  • Legend
  • Legend Items

Let’s find how these settings work.

Advanced Google Map Style Options

Style Map

In the Style->Map section, you can add Margin, set Height, and Width to the Map. Also, you are able to set the Border Type, Border Radius, Box Shadow, and add CSS Filters to the Map.

Style the Map

Style Marker Title

You are able to customize the Marker Title. Go to the Style->Marker Title and change the default style using these styling options Margin, Padding, Alignment, Typography, Color, Background Type, Border Type, Border Radius, and Box Shadow.

Style Marker Title

Style Marker Description

Like the Marker Title, you can also edit the Marker Description default design using the same styling options.

Style Marker Description

Style Legend Title

To make your Map Legend Title more cathy, you can change its style. These are options Margin, Padding, Alignment, Typography, Color, Background Type, Border Type, Border Radius, and Box Shadow that you use to customize the Legend Title.

Style Legend Title

Style Legend

You can add Legend’s Margin and Padding. You are able to set custom Height and Width. Also, change the Background Type, Border Type, Border Radius, and Box Shadow of the Legend.

Style Legend

Style Legend Items

If you want to customize the Legend Items, you can easily do it using some handy styling options. You can change the Icon Size and also add Margin, Padding, Alignment, Typography, Color, Background Type, Border Type, Border Radius, and Box Shadow to the Legend Item.

Style Legend Items

Advanced Settings

If you want to add motion effects, happy effectsbackground, or make it responsive and more intriguing, click on ‘Advanced‘ to explore those options. the ‘Advanced‘ is a default feature of Elementor.

Advanced Settings

Give a read to this Document to know more about advanced features & functions.

Final Preview

Check this below demo. Where we’ve shown how a restaurant company displays its locations using the Advanced Google Map.

gmap

That’s it.

How can we help?