Divi Google Maps integration

The Divi theme is a popular WordPress theme that allows you to easily create beautiful websites. One of the features it offers is the ability to integrate Google Maps into your website. This can be useful if you want to display a map with your business location or provide directions to your visitors.

To integrate Google Maps into your Divi website, you can use the built-in Divi Map module. This module allows you to customize the appearance of the map and add markers, info windows, and other elements.

Here’s an example of how you can use the Divi Map module to display a Google Map on your website:

function wpsnippets_divi_google_maps_integration() {
    if ( function_exists( 'et_pb_map' ) ) {
        echo do_shortcode( '[et_pb_map address="Your Address Here" zoom_level="15" address_lat="Your Latitude Here" address_lng="Your Longitude Here" height="300px"]' );
    }
}
add_shortcode( 'divi_google_map', 'wpsnippets_divi_google_maps_integration' );

In this example, we’re creating a custom shortcode called [divi_google_map] that will output the Divi Map module with the specified address, zoom level, latitude, longitude, and height. You can replace “Your Address Here”, “Your Latitude Here”, and “Your Longitude Here” with your own values.

To display the map on your website, simply add the [divi_google_map] shortcode to any post or page where you want the map to appear.

This code snippet can be useful if you want to easily integrate Google Maps into your Divi website without having to manually add the map code or use a separate plugin. It allows you to customize the map appearance and easily update the map settings if needed.

Examples

Example 1: Display a Google Map on a Divi page

This example demonstrates how to integrate Google Maps into a Divi page using the Divi Builder and a custom PHP function.

function wpsnippets_divi_google_maps() {
    echo '<div class="wpsnippets-google-map">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3876.626646034574!2d-122.419415685029!3d37.774929725434!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808f7e4f6c6fc7a5%3A0x8e0aee7f6d9a4c7f!2sSan%20Francisco%2C%20CA%2C%20USA!5e0!3m2!1sen!2s!4v1632442345678!5m2!1sen!2s" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
    </div>';
}

Explanation: The wpsnippets_divi_google_maps function outputs the HTML markup for embedding a Google Map into a Divi page. The map is displayed within an iframe element with a specified width and height. The src attribute of the iframe points to the Google Maps embed URL, which includes the latitude, longitude, and other parameters for the desired location.

Example 2: Customizing the Google Map appearance

This example shows how to customize the appearance of the Google Map embedded in a Divi page by modifying the iframe URL parameters.

function wpsnippets_divi_google_maps() {
    echo '<div class="wpsnippets-google-map">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3876.626646034574!2d-122.419415685029!3d37.774929725434!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808f7e4f6c6fc7a5%3A0x8e0aee7f6d9a4c7f!2sSan%20Francisco%2C%20CA%2C%20USA!5e0!3m2!1sen!2s!4v1632442345678!5m2!1sen!2s&zoom=15&maptype=roadmap&language=en" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
    </div>';
}

Explanation: In this code example, the src attribute of the iframe includes additional parameters to customize the Google Map appearance. The zoom parameter sets the initial zoom level of the map, the maptype parameter specifies the type of map to display (e.g., roadmap, satellite, terrain), and the language parameter determines the language of the map labels.

Example 3: Adding a marker to the Google Map

This example demonstrates how to add a marker to the Google Map embedded in a Divi page.

function wpsnippets_divi_google_maps() {
    echo '<div class="wpsnippets-google-map">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3876.626646034574!2d-122.419415685029!3d37.774929725434!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808f7e4f6c6fc7a5%3A0x8e0aee7f6d9a4c7f!2sSan%20Francisco%2C%20CA%2C%20USA!5e0!3m2!1sen!2s!4v1632442345678!5m2!1sen!2s&markers=color:red%7Clabel:A%7C37.774929725434%2C-122.419415685029" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
    </div>';
}

Explanation: The src attribute of the iframe includes the markers parameter, which specifies the marker’s color, label, and coordinates. In this example, a red marker with the label “A” is added to the map at the coordinates of San Francisco. The latitude and longitude values are provided in the URL-encoded format.