Google Maps is a tool service that allows shoppers to offer maps to their audience. It’s faster than embedded maps and, should you occur to’ve integrated it with Divi, it’s easier to use. The Divi Builder accommodates two Map Modules that make presenting Google Maps a simple process. In this submit, we’ll see discover ways to add Google Maps for your internet web page the use of the Google Maps API Key and the Divi Map Module.

Let’s get started!

Preview

First, let’s check out what we’ll assemble in this submit. I’ll add a Map Module to a gift Divi structure and elegance it with parts from the structure.

Google Maps Desktop

Google Maps Phone

How Google Maps and APIs Artwork

While it’s possible to simply embed a Google Map appropriate right into a Divi internet web page or template, the Google Maps API supplies developers further control. Maps that use the Google Maps API load faster and also you’ll follow custom designed colors, create custom designed markers, and further.

To prevent unauthorized get right to use, the Google Maps Platform uses API keys. Obtaining and the use of a Google Maps API is inconspicuous. To create a key, transfer to the Google Maps Platform Credentials web page and make a choice or create a problem. This problem it is going to be used to include your Google Maps API, so you should definitely give it a name that’s easy to snatch.

Next, click on on Create Credentials on the most productive of the internet web page and make a choice API Key from the menu. The Credentials link won’t appear until you’ll have a problem made up our minds on.

Next, you’ll see a modal along side your API Key. You’ll copy your API Key and close the modal. You’ll moreover limit the essential factor. This helps to keep others from the use of it. I love to suggest proscribing the API Key to prevent unauthorized use. Click on on Edit API Key.

Beneath API Restrictions, click on on Prohibit Key, choose which key to restrict, and put it aside. Reproduction the essential factor throughout the upper proper corner of the internet web page. You’ll now paste the API key into Divi.

Learn the way to Mix Google Maps in Divi

To mix your Google Maps API Key into Divi, transfer to Divi > Theme Possible choices throughout the WordPress dashboard. Throughout the Commonplace tab, you’ll see a field classified Google API Key. Paste the essential factor into the sphere and save the settings.

Google Maps is now integrated into Divi, and also you’ll add a Google Map for your Divi internet web page or template. Your Map Modules robotically get right to use the essential factor, in order that you won’t need to add it over again. It’s conceivable so that you can to switch the essential factor for every module if you want.

Learn the way to Add a Google Map to Your Internet web page or Template

You’ll add the Google Map for your Divi pages and templates in a lot of ways. The most suitable option with necessarily essentially the most choices is to use the Map Modules. Divi has two Map Modules to make a choice from and the process of together with the map is the same. Every include map pins and styling choices.

Since we’ve added the API to Divi’s Theme Possible choices, the Map Modules already include your Google Maps API. All we need to do is add an take care of and the pins we want.

The process is inconspicuous. Enter the take care of you want to show throughout the middle of the map and make a choice To search out. The map will fill in.

Let’s add a map to a internet web page to appear how it works.

Commonplace Map Module vs the Fullwidth Map Module

We will use the average Map Module or the Fullwidth Map Module. The artwork is the same. Every look superb and the one you choose merely is dependent upon the design you want. The average Map Module lets you style the background and easily add other modules to the Row.

The Fullwidth Map Module uses all of the width. It’s confirmed appropriate right here with commonplace sections above and underneath it.

Learn the way to Add Google Maps to Your Divi Internet web page

Now, let’s see discover ways to add a Google Map to a internet web page or template. The artwork is the same for each and every pages and templates. I’ll create a internet web page the use of the Contact internet web page from the unfastened Images Studio Format Pack that’s available within Divi.

For reference, appropriate right here’s the original internet web page. I’ll add a brand spanking new section for the map between the two sections the use of design cues from the structure pack.

Add a Commonplace Phase and Row

First, add a Commonplace Phase between the two sections. That’s the position we’ll add the map.

Open the Phase’s settings, transfer to Background, and change the Background Color to #f6f5ee. Close the settings.

• Background Color: #f6f5ee

Next, add a single-column Row to the Phase.

Add a Text Module

Next, we’ll add a Text Module to create a reputation for the map.

Content material materials

Business the Content material material-type to Heading 4 and add the title to the body content material materials house.

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

Heading Text

Next, click on on on the Design tab and scroll all of the means right down to Heading Text. Select Heading Level 4 and make a choice Inter for the Font. Set the Weight to Bold and the Style to TT.

• Heading Level: H4
• Font: Inter
• Weight: Bold
• Style: TT

Business the Font Color to #ff5a17, the Measurement to 14px, the Letter Spacing to 1px, and the Line Top to at least one.4em. This is it for the title. We will now close this module.

• Color: #ff5a17
• Measurement: 14px
• Letter Spacing: 1px
• Line Top: 1.4em

Add a Map Module

Now it’s time as a way to upload a Map Module to our structure. Add the module throughout the Row underneath the Text Module. In my case, the icon as a way to upload a module turns out underneath the Row icon. There’s a very easy method spherical this. Simply right-click (for House home windows shoppers, control-click for Mac) and make a choice Move To Layer. This opens a Layers View that’s easy to navigate and use.

Open the Phase, Row, and Column to appear the Text Module. Click on at the plus icon next to the Text Module as a way to upload a brand spanking new module.

This opens the standard module modal where you’ll make a choice your modules. Add the Map Module as normal and close the Layers view. The Map Module turns out underneath the Text Module merely as we wanted.

You’ll see the Google Maps API Key already entered and able to use. Next, enter the take care of you want to show throughout the Map Center Maintain field. Click on at the To search out button to tell the module to appear the map for this take care of. When you do need to use a unique API Key than what you’ve entered for the reason that default key throughout the Divi Theme Possible choices, make a choice Business API Key.

• Map Center Maintain: the take care of of the web page you want to turn

The module will search for the web page and display it on the map. If there’s an error, return to the Google Maps Platform to appear any issues along side your API Key.

Border

Next, transfer to the Design tab and scroll all of the means right down to Border. Business the Width to 2px and set the Color to black. Close the module and save your settings.

• Width: 2px
• Color: #000000

Results

This was a simple design, but it surely for sure works well with the structure.

Google Maps Desktop

Google Maps Phone

Completing Concepts

That’s our check out discover ways to add Google Maps for your Divi internet web page. The Google Maps API Key’s easy as a way to upload to Divi. As quickly because the API Key’s added to Divi, every Map Module robotically accesses the essential factor. You’ll even exchange the API Key on a per-module basis if you want. All you’ll ever need to do is add the take care of you want your Map Module to turn. It reasonably a bit of faster than embedding, provides a lot of styling alternatives, and also you’ll show any selection of maps for your Divi pages and templates.

We wish to concentrate from you. Have you ever ever added the Google Maps API for your Divi internet web page? Let us know about your experience throughout the comments.

The submit Find out how to Upload Google Maps to Your Divi Web site appeared first on Sublime Topics Weblog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more