How to Embed Google Maps Efficiently in WordPress with ACF

Adding a Google Map to your WordPress site is a great way to show a location, storefront, event venue, or office address. But if you’re using the Google Maps JavaScript API, you might be loading more than you need—especially if your map is just for display, not interaction.

In this tutorial, we’ll walk through how to embed a Google Map using the lightweight Embed API instead of the full JavaScript API. This method is easier, faster, and avoids unnecessary API billing. We’ll also show how to display the map based on custom field values (like latitude, longitude, or Place ID) and include a fallback if no data is available.

Why Use the Embed API?

The Google Maps Embed API is designed for simpler use cases where users just need to view a map—not interact with it.

Benefits:

• ✅ Free for most use cases
• ✅ Lighter and faster to load
• ✅ No JavaScript coding required
• ✅ Easier to lazy load and responsive by default

If your site only needs to show a location without needing user interaction, this is a better choice.

Example: Embedding a Map Based on Custom Fields

Let’s say you have a WordPress page or post with custom fields containing the location’s place_id, latitude, and longitude.

Here’s a sample implementation that:

• Retrieves those values (using any method: ACF, meta fields, theme options, etc.)
• Checks if values are available
• Outputs a map using the Embed API
• Shows a fallback message if no location is set

✅ Full PHP Example

<?php
// Prevent direct access
if (!defined('ABSPATH')) {
    exit;
}

// Example: Retrieve map data from custom fields
$map = array(
    'lat' => get_post_meta(get_the_ID(), 'map_lat', true),
    'lng' => get_post_meta(get_the_ID(), 'map_lng', true),
    'place_id' => get_post_meta(get_the_ID(), 'map_place_id', true),
);

// Check if coordinates and place ID exist
if (!empty($map['lat']) && !empty($map['lng']) && !empty($map['place_id'])) :
    $google_maps_api_key = defined('GMAPS_API_KEY') ? GMAPS_API_KEY : 'YOUR_API_KEY';
    ?>

    <div class="acf-map" data-zoom="10">
        <div class="marker"
             data-lat="<?php echo esc_attr($map['lat']); ?>"
             data-lng="<?php echo esc_attr($map['lng']); ?>">
        </div>
    </div>

    <iframe
        width="100%"
        height="400"
        frameborder="1"
        style="border:#ccc solid 1px;"
        src="https://www.google.com/maps/embed/v1/place?key=<?php echo esc_attr($google_maps_api_key); ?>&q=place_id:<?php echo esc_attr($map['place_id']); ?>"
        allowfullscreen>
    </iframe>

    <style>
        .acf-map {
            width: 100%;
            height: 400px;
            border: #ccc solid 1px;
        }
    </style>

<?php else : ?>

    <p><strong>Location not set.</strong> Please add a valid map location in your custom fields.</p>

<?php endif; ?>

Replace the get_post_meta() lines with whatever logic you use to store your location data—this could be ACF, a theme settings page, or a WooCommerce vendor field.

Where to Get Your Place ID

You can use Google Maps to find your Place ID by searching for a location and using their developer tool.

Best Practices

• Store your Google Maps API key securely (preferably as a constant in wp-config.php)
• Avoid hardcoding lat, lng, or place_id directly in templates—use flexible meta fields
• Add fallback messages or default maps if no data is found
• Only load full JavaScript Maps API if you need interactive features like search, directions, or drawing

FAQs on Using the Google Maps Embed API

Q1: Do I need a billing-enabled Google Cloud account?

Yes. Google requires billing for all Maps APIs, including the Embed API, but most simple display use cases remain free within the monthly quota.

Q2: What happens if my Place ID is incorrect or missing?

The map will fail to load properly. Always verify your Place ID using Google’s Place ID Finder tool.

Q3: Can I use just latitude and longitude without a Place ID?

Yes. Use the view endpoint with center=LAT,LNG in your iframe source if you don’t have a Place ID.

Q4: Is the Embed API mobile-friendly and responsive?

Yes. The iframe adapts well to most screen sizes by default, especially when styled with width: 100% and a fixed height.

Q5: When should I use the full JavaScript API instead?

Use the JavaScript API if you need advanced features like autocomplete, custom markers, popups, directions, or drawing tools.

Conclusion

If your WordPress site just needs to show a map without interactive features, the Google Maps Embed API is the fastest, simplest, and most cost-effective solution.

By switching from the heavier JavaScript Maps API to an iframe-based embed, you reduce your site’s load time, improve SEO performance, and avoid usage fees—without sacrificing user experience.