Google Maps is a device carrier that permits customers to provide maps to their target market. It’s sooner than embedded maps and, in case you’ve built-in it with Divi, it’s more uncomplicated to make use of. The Divi Builder comprises two Map Modules that make presenting Google Maps a easy procedure. On this put up, we’ll see the right way to upload Google Maps for your website online the use of the Google Maps API Key and the Divi Map Module.

Let’s get began!

Preview

First, let’s have a look at what we’ll construct on this put up. I’ll upload a Map Module to a present Divi structure and elegance it with components from the structure.

Google Maps Desktop

Google Maps Telephone

How Google Maps and APIs Paintings

Whilst it’s conceivable to easily embed a Google Map right into a Divi web page or template, the Google Maps API provides builders extra management. Maps that use the Google Maps API load sooner and you’ll observe customized colours, create customized markers, and extra.

To stop unauthorized get entry to, the Google Maps Platform makes use of API keys. Acquiring and the use of a Google Maps API is modest. To create a key, cross to the Google Maps Platform Credentials page and choose or create a venture. This venture will probably be used to include your Google Maps API, so you should definitely give it a reputation that’s simple to grasp.

Subsequent, click on Create Credentials on the most sensible of the web page and choose API Key from the menu. The Credentials hyperlink gained’t seem till you may have a venture decided on.

Subsequent, you’ll see a modal together with your API Key. You’ll be able to replica your API Key and shut the modal. You’ll be able to additionally prohibit the important thing. This assists in keeping others from the use of it. I like to recommend limiting the API Key to forestall unauthorized use. Click on Edit API Key.

Beneath API Restrictions, click on Limit Key, make a choice which key to limit, and reserve it. Replica the important thing within the higher correct nook of the web page. You’ll be able to now paste the API key into Divi.

Combine Google Maps in Divi

To combine your Google Maps API Key into Divi, cross to Divi > Theme Choices within the WordPress dashboard. Within the Normal tab, you’ll see a box categorised Google API Key. Paste the important thing into the sector and save the settings.

Google Maps is now built-in into Divi, and you’ll upload a Google Map for your Divi web page or template. Your Map Modules routinely get entry to the important thing, so that you gained’t want to upload it once more. It is possible for you to to exchange the important thing for every module if you need.

Upload a Google Map to Your Web page or Template

You’ll be able to upload the Google Map for your Divi pages and templates in different tactics. The most suitable choice with probably the most options is to make use of the Map Modules. Divi has two Map Modules to make a choice from and the method of including the map is similar. Each come with map pins and styling options.

Since we’ve added the API to Divi’s Theme Choices, the Map Modules already include your Google Maps API. All we want to do is upload an cope with and the pins we would like.

The method is modest. Input the cope with you need to turn within the heart of the map and choose To find. The map will fill in.

Let’s upload a map to a web page to look the way it works.

Common Map Module vs the Fullwidth Map Module

We will use the common Map Module or the Fullwidth Map Module. The paintings is similar. Each glance superb and the only you select simply is dependent upon the design you need. The common Map Module permits you to taste the background and simply upload different modules to the Row.

The Fullwidth Map Module makes use of all of the width. It’s proven right here with common sections above and beneath it.

Upload Google Maps to Your Divi Web page

Now, let’s see the right way to upload a Google Map to a web page or template. The paintings is similar for each pages and templates. I’ll create a web page the use of the Touch web page from the free Photography Studio Layout Pack that’s to be had inside of Divi.

For reference, right here’s the unique web page. I’ll upload a brand new segment for the map between the 2 sections the use of design cues from the structure pack.

Upload a Common Segment and Row

First, upload a Common Segment between the 2 sections. That is the place we’ll upload the map.

Open the Segment’s settings, cross to Background, and alter the Background Colour to #f6f5ee. Shut the settings.

• Background Colour: #f6f5ee

Subsequent, upload a single-column Row to the Segment.

Upload a Textual content Module

Subsequent, we’ll upload a Textual content Module to create a identify for the map.

Content material

Trade the Content material-type to Heading 4 and upload the identify to the frame content material space.

• Content material-Sort: Heading 4
• Frame: Location

Heading Textual content

Subsequent, click on at the Design tab and scroll all the way down to Heading Textual content. Select Heading Degree 4 and choose Inter for the Font. Set the Weight to Daring and the Taste to TT.

• Heading Degree: H4
• Font: Inter
• Weight: Daring
• Taste: TT

Trade the Font Colour to #ff5a17, the Dimension to 14px, the Letter Spacing to 1px, and the Line Top to at least one.4em. That is it for the identify. We will now shut this module.

• Colour: #ff5a17
• Dimension: 14px
• Letter Spacing: 1px
• Line Top: 1.4em

Upload a Map Module

Now it’s time so as to add a Map Module to our structure. Upload the module within the Row below the Textual content Module. In my case, the icon so as to add a module seems below the Row icon. There’s a very simple manner round this. Merely right-click (for Home windows customers, control-click for Mac) and choose Cross To Layer. This opens a Layers View that’s simple to navigate and use.

Open the Segment, Row, and Column to look the Textual content Module. Click on the plus icon subsequent to the Textual content Module so as to add a brand new module.

This opens the usual module modal the place you’ll choose your modules. Upload the Map Module as standard and shut the Layers view. The Map Module seems below the Textual content Module simply as we would have liked.

You’ll see the Google Maps API Key already entered and in a position to make use of. Subsequent, input the cope with you need to turn within the Map Heart Cope with box. Click on the To find button to inform the module to look the map for this cope with. For those who do want to use a distinct API Key than what you’ve entered because the default key within the Divi Theme Choices, choose Trade API Key.

• Map Heart Cope with: the cope with of the positioning you need to show

The module will seek for the positioning and show it at the map. If there’s an error, go back to the Google Maps Platform to look any problems together with your API Key.

Border

Subsequent, cross to the Design tab and scroll all the way down to Border. Trade the Width to 2px and set the Colour to black. Shut the module and save your settings.

• Width: 2px
• Colour: #000000

Effects

This was once a easy design, however it works neatly with the structure.

Google Maps Desktop

Google Maps Telephone

Finishing Ideas

That’s our have a look at the right way to upload Google Maps for your Divi website online. The Google Maps API Secret’s simple so as to add to Divi. As soon as the API Secret’s added to Divi, each Map Module routinely accesses the important thing. You’ll be able to even trade the API Key on a per-module foundation if you need. All you’ll ever want to do is upload the cope with you need your Map Module to show. It rather a lot sooner than embedding, supplies a whole lot of styling choices, and you’ll display any selection of maps on your Divi pages and templates.

We wish to pay attention from you. Have you ever added the Google Maps API for your Divi website online? Tell us about your enjoy within the feedback.

The put up How to Add Google Maps to Your Divi Website seemed first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more