Google Maps integration in WordPress: A developer's guide

#Google Maps Integration in WordPress: A Developer’s Guide

Learn more about our WordPress development services to construct high-performance integrations.

#1. Why Google Maps iframe embeds hurt speed and GDPR compliance

Copying and pasting the standard HTML <iframe> snippet from Google Maps is the most common integration method. However, it introduces significant technical debt:

• Performance Degradation: A map iframe pulls in Google’s own JavaScript, styles and map tiles, which you cannot defer or trim. If placed above the fold without loading="lazy", it competes with your own content for bandwidth and main-thread time, degrading Largest Contentful Paint (LCP) and Interaction to Next Paint (INP).
• Privacy Exposure: The iframe loads content from Google servers as soon as the page opens, which sends the visitor’s IP address to Google and lets Google read or set data in the browser. Under EU rules this needs a legal basis and usually consent (see section 7).
• Zero Style Interactivity: Iframes cannot be styled programmatically. You cannot customize color schemes, cluster markers, or coordinate custom interactions based on page states.

#2. How the Maps Embed API differs from a copied iframe

There are two kinds of iframe. The snippet copied from the “Share” dialog on google.com/maps carries no API key and no contract, so you have no project, no quota and no usage report behind it. The Maps Embed API is the documented version of the same idea: an iframe whose src points to https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&PARAMETERS, where the mode is one of place, view, directions, streetview or search.

Google’s usage and billing page states that the Maps Embed API “is free to use with unlimited requests” and that there are no per-second or per-day limits. An API key is still required for every request, so the key restrictions described below apply here too. Embedded maps are not supported below 200 px in either dimension, and Google asks for a referrerpolicy attribute on the iframe so the browser sends your domain as the Referer header. Without it, a key restricted to your website will reject the request.

<iframe
  width="600" height="450" style="border:0" loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=YOUR_ADDRESS">
</iframe>

The Embed API suits a contact page with one location: no billing risk, no JavaScript to write, and native loading="lazy" on the iframe keeps it out of the initial page load. It does not remove the privacy question. The iframe still loads content from Google servers in the visitor’s browser, so the consent rules in the GDPR sections of this guide apply to it as much as to the JavaScript API. When you need custom markers, clustering, your own styling or interaction with the rest of the page, the Maps JavaScript API is the tool.

#3. How to restrict a Google Maps API key

Before writing any mapping code, you must secure your credentials in the Google Cloud Console. An unrestricted API key can be scraped from your source code and used by unauthorized third parties, resulting in unexpected billing charges.

#Google Cloud Console key restriction steps

1. Enable Constraints: Navigate to Google Cloud Console > APIs & Services > Credentials. Select your Maps API key.
2. Set Application Restrictions: Under “Application restrictions,” select HTTP referrers (web sites).
3. Configure Referrer Wildcards: Add the exact domain paths for your environments:

   https://wppoland.com/*
   https://www.wppoland.com/*
   https://staging.wppoland.com/*

4. Enforce API Restrictions: Restrict the key to only run the Maps JavaScript API and Geocoding API. This prevents a compromise of the key from granting access to other Google Cloud services (such as Cloud Storage, translation APIs, or SQL databases) linked to the same billing account.
5. Configure Quotas and Budget Alerts: Set per-minute or per-day request quotas for each API under APIs & Services, so requests fail instead of billing when usage spikes, and add a budget alert in Cloud Billing (a budget only notifies, it does not stop the API).
6. Separate Development and Production Credentials: Always create separate API keys for your local staging environments and production instances. This allows you to apply tight domain referrer bounds on the production key while keeping development keys restricted to local domains (e.g., http://localhost/* or http://127.0.0.1/*), preventing security leaks across deployment pipelines.

#How to hide the API key behind a server-side REST proxy

For highly sensitive endpoints (like geocoding queries), do not expose your API key to the client browser at all. Instead, route requests through a custom WordPress REST API proxy:

declare(strict_types=1);

namespace WPPoland\API\Proxy;

function register_maps_proxy_route(): void {
    register_rest_route( 'wppoland/v1', '/geocode', [
        'methods'             => 'GET',
        'callback'            => __NAMESPACE__ . '\\handle_geocode_proxy',
        'permission_callback' => '__return_true'
    ] );
}
add_action( 'rest_api_init', __NAMESPACE__ . '\\register_maps_proxy_route' );

function handle_geocode_proxy( \WP_REST_Request $request ): \WP_REST_Response {
    $address = sanitize_text_field( $request->get_param( 'address' ) );
    if ( empty( $address ) ) {
        return new \WP_REST_Response( [ 'error' => 'Missing address parameter' ], 400 );
    }

    $api_key = get_option( 'wppoland_google_maps_secret_key', '' );
    if ( empty( $api_key ) ) {
        return new \WP_REST_Response( [ 'error' => 'Server credentials misconfigured' ], 500 );
    }

    // Call Google APIs server-to-server
    $url = sprintf(
        'https://maps.googleapis.com/maps/api/geocode/json?address=%s&key=%s',
        rawurlencode( $address ),
        esc_attr( $api_key )
    );

    $response = wp_remote_get( $url );
    if ( is_wp_error( $response ) ) {
        return new \WP_REST_Response( [ 'error' => 'API query failed' ], 502 );
    }

    $body = wp_remote_retrieve_body( $response );
    $data = json_decode( $body, true );

    return new \WP_REST_Response( $data, 200 );
}

#What to do when a Google Maps API key leaks

A browser key is always visible in the page source, so “leak” usually means the restrictions were missing or too broad. Google’s API security best practices give the order of work:

1. Restrict first. Add an application restriction (websites, IP addresses, Android or iOS apps) and limit the key to the APIs it really calls. A website restriction accepts wildcards such as https://*.example.com, which covers every subdomain.
2. Use separate keys for separate apps and environments. If one key is compromised, you can delete or rotate it without touching the others.
3. Rotate only when restricting is not enough. Google advises regenerating keys “cautiously and only as a last resort”. Rotation creates a new key with the old key’s restrictions, and both keys work during the transition, so you can deploy the new key to WordPress before you retire the old one.
4. Before deleting a key, check in the metrics view that it has no successful traffic from production.

In WordPress, store the key in an option or in wp-config.php and print it from one place, so a rotation is one change instead of a search through theme templates and page builder widgets.

#4. How Google Maps Platform billing works after March 2025

Older tutorials, including earlier versions of this one, mention a USD 200 monthly credit. That model is gone. According to Google’s March 2025 billing changes page (accessed 2026-10-14), Google “has replaced the USD $200 monthly recurring credit with a free monthly usage threshold for each Core Services SKU”. Each SKU belongs to a category (Essentials, Pro or Enterprise), and the free threshold differs by category.

On the current pricing page, the SKUs a typical WordPress site uses sit in Essentials: Dynamic Maps (one map load in the Maps JavaScript API), Static Maps and Geocoding each have a free cap of 10,000 billable events per month, and the Embed SKU is listed as unlimited. Most Pro SKUs have a cap of 5,000 and most Enterprise SKUs 1,000. The thresholds count per SKU, so a site that loads a dynamic map and also geocodes addresses uses two separate allowances. Prices above the cap change over time; read them on the pricing page rather than from a blog post.

A billing account is still required for the Maps JavaScript API, even if you never leave the free threshold. Two controls protect you from a surprise invoice. A budget in Cloud Billing sends alerts when spending reaches thresholds you set, but it does not stop the API. A quota in “APIs & Services” caps the number of requests per minute or per day, and requests above it fail. Google’s security best practices recommend per-minute, per-user quota limits for client-side projects. Set the quota above your real peak traffic, because legitimate visitors also get errors once it is reached.

The same page from March 2025 gave Legacy status to three services: Places API, Directions API and Distance Matrix API. Legacy services get no new features, and the legacy products page says they “are not available in new Cloud projects”. A project created today has to use Places API (New) and Routes API, so code samples that call google.maps.places.Autocomplete or DirectionsService may fail in a fresh project even though they still run on old ones.

#5. Lazy load Google Maps with a map facade

A Map Facade is a placeholder element that mimics a live map but loads only static assets. The heavy JavaScript libraries are requested only when a visitor clicks the placeholder, optimizing initial page load times.

#Map facade shortcode in PHP

Add this code to your theme’s functions.php file to register a map facade shortcode:

declare(strict_types=1);

namespace WPPoland\Mapping;

/**
 * Registers a shortcode to output a lightweight Map Facade.
 */
function render_map_facade_shortcode( array $atts ): string {
    $args = shortcode_atts( [
        'lat'             => '54.5189',
        'lng'             => '18.5305',
        'zoom'            => '14',
        'width'           => '100%',
        'height'          => '400px',
        'marker_title'    => 'WPPoland Headquarters',
        'static_fallback' => 'true'
    ], $atts );

    $unique_id = 'facade-' . wp_unique_id();
    $api_key   = get_option( 'wppoland_google_maps_api_key', '' );
    
    // Choose static image preview as background
    $background_style = '';
    if ( 'true' === $args['static_fallback'] && ! empty( $api_key ) ) {
        $static_url = sprintf(
            'https://maps.googleapis.com/maps/api/staticmap?center=%s,%s&zoom=%d&size=800x400&key=%s&style=feature:all|saturation:-80',
            $args['lat'],
            $args['lng'],
            (int) $args['zoom'],
            esc_attr( $api_key )
        );
        $background_style = sprintf( 'background-image: url(%s); background-size: cover; background-position: center;', esc_url_raw( $static_url ) );
    }

    ob_start();
    ?>
    <div 
        id="<?php echo esc_attr( $unique_id ); ?>" 
        class="wppoland-map-facade" 
        data-lat="<?php echo esc_attr( $args['lat'] ); ?>" 
        data-lng="<?php echo esc_attr( $args['lng'] ); ?>" 
        data-zoom="<?php echo esc_attr( $args['zoom'] ); ?>" 
        data-title="<?php echo esc_attr( $args['marker_title'] ); ?>" 
        style="width: <?php echo esc_attr( $args['width'] ); ?>; height: <?php echo esc_attr( $args['height'] ); ?>; <?php echo $background_style; ?> position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 8px; overflow: hidden;"
    >
        <!-- Overlay shield to dim background static tiles -->
        <div style="position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.3); z-index: 1;"></div>
        
        <div class="map-interactive-trigger" style="position: relative; z-index: 2; text-align: center; background: rgba(255, 255, 255, 0.95); padding: 20px 30px; border-radius: 6px; box-shadow: 0 4px 15px rgba(0,0,0,0.15);">
            <svg width="40" height="40" viewBox="0 0 24 24" fill="#E53E3E" style="margin: 0 auto 10px; display: block;">
                <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
            </svg>
            <span style="color: #2D3748; font-weight: 600; font-family: sans-serif; font-size: 15px;">Click to load map</span>
        </div>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode( 'wppoland_map', __NAMESPACE__ . '\\render_map_facade_shortcode' );

#6. Load Google Maps only after GDPR cookie consent

To comply with privacy laws, you must block external scripts from loading until the user has accepted your marketing cookie policy. This requires interfacing directly with popular Consent Management Platforms (CMPs).

#How to load the map on Borlabs Cookie, Cookiebot or Usercentrics consent

Instead of polling cookie strings, hook into CMP JavaScript callback events to trigger map loading automatically when users grant permission:

document.addEventListener('DOMContentLoaded', () => {
  const mapFacades = document.querySelectorAll('.wppoland-map-facade');

  mapFacades.forEach((facade) => {
    facade.addEventListener('click', () => {
      if (!checkConsentRegistry('marketing')) {
        requestConsentPrompt();
        return;
      }
      initiateMapLoading(facade);
    });
  });

  // 1. Borlabs Cookie integration callback
  if (window.BorlabsCookie && typeof window.BorlabsCookie.onConsentChange === 'function') {
    window.BorlabsCookie.onConsentChange((consent) => {
      if (consent.statistics || consent.marketing) {
        triggerAllPendingMaps();
      }
    });
  }

  // 2. Cookiebot dynamic consent callback
  window.addEventListener('CookiebotOnAccept', () => {
    if (window.Cookiebot.consent.marketing) {
      triggerAllPendingMaps();
    }
  });
});

function checkConsentRegistry(category) {
  // Cookiebot Registry
  if (window.Cookiebot && window.Cookiebot.consent) {
    return window.Cookiebot.consent[category];
  }
  // Usercentrics Registry
  if (window.UC_UI && typeof window.UC_UI.getConsents === 'function') {
    const ucConsents = window.UC_UI.getConsents();
    const marketingConsent = ucConsents.find(c => c.id === 'google-maps');
    return marketingConsent && marketingConsent.status === true;
  }
  // Custom Fallback Cookie Check
  const consentCookie = document.cookie.split('; ').find(row => row.startsWith('custom_consent='));
  return consentCookie && consentCookie.split('=')[1] === 'accepted';
}

function requestConsentPrompt() {
  if (window.Cookiebot) {
    window.Cookiebot.show();
  } else if (window.BorlabsCookie) {
    window.BorlabsCookie.showCookiePreference();
  } else {
    alert('Please enable marketing cookies inside settings to load Google Maps.');
  }
}

function triggerAllPendingMaps() {
  const mapFacades = document.querySelectorAll('.wppoland-map-facade');
  mapFacades.forEach((facade) => {
    if (facade.querySelector('.map-interactive-trigger')) {
      initiateMapLoading(facade);
    }
  });
}

#7. Which legal basis covers Google Maps under GDPR

Two separate rules meet on a page with a Google map. The ePrivacy Directive (2002/58/EC, Article 5(3)) requires consent before information is stored on or read from the visitor’s device, unless it is strictly necessary for a service the visitor explicitly requested. The GDPR then governs the personal data itself, starting with the IP address that every request to Google servers exposes.

The role of the site owner was settled by the Court of Justice of the EU in Fashion ID (C-40/17), decided on 29 July 2019. The case was about a Facebook “Like” button, but the reasoning covers any embedded third-party content: the website operator can be a joint controller for the collection and transmission of visitors’ data to the third party, though not for what that party does afterwards. Where consent is the legal basis, the operator has to obtain it for those operations, and has to inform visitors at the time of collection.

Google’s own contract points the same way. In the Google Maps Platform Terms of Service, Google and the customer agree to the Controller-Controller Data Protection Terms, so Google acts as a separate controller for the data visitors send to it, not as your processor. The terms also oblige you to comply with privacy laws “regarding Services that store and access Cookies on End Users’ devices”. If your billing account address is in the European Economic Area, the separate EEA Terms of Service govern your use. For transfers to the United States, the European Commission adopted its adequacy decision for the EU-U.S. Data Privacy Framework on 10 July 2023, which covers transfers to US companies certified under the framework.

In practice this means: the map loads after consent or after a click on a clearly labelled placeholder, the privacy policy names Google as a recipient and links to Google’s privacy policy, and the consent tool lists the map under the category that blocks it. This is general information, not legal advice; your data protection officer or lawyer decides the legal basis for your site.

#How to handle the “my location” button

A store locator often has a button that centres the map on the visitor. The browser asks for permission before navigator.geolocation returns anything, but the Maps Platform terms add their own requirements. Your site has to notify visitors in advance what location data it collects and why, and it “will not obtain or cache any End User’s location except with the End User’s express, prior, revocable consent”. So the browser prompt alone is not the whole job: explain the button next to it, do not store coordinates in cookies or user meta without that consent, and always offer a postcode or city field as an alternative for visitors who refuse.

#8. OpenStreetMap fallback with Leaflet in WordPress

If your Google Maps API key reaches its monthly quota or encounters network errors, displaying a blank container degrades user experience. To prevent this, build a fallback system that loads OpenStreetMap (OSM) via Leaflet.js if the Google API is unavailable.

#Configuring high-DPI (Retina) custom markers and polygons in Leaflet

When rendering OpenStreetMap fallbacks, you should customize Leaflet’s default markers and add custom polygons overlays (e.g., to mark delivery zones or local service area shapes):

function initiateMapLoading(container) {
  const lat = parseFloat(container.dataset.lat);
  const lng = parseFloat(container.dataset.lng);
  const zoom = parseInt(container.dataset.zoom, 10);
  const title = container.dataset.title;

  const googleApiKey = 'YOUR_GOOGLE_MAPS_API_KEY';
  
  // Timeout wrapper to fallback to Leaflet if Google fails to load within 3 seconds
  let googleLoadTimeout = setTimeout(() => {
    console.warn('Google Maps API failed to respond. Falling back to OpenStreetMap.');
    loadLeafletFallback(container, lat, lng, zoom, title);
  }, 3000);

  if (!window.google || !window.google.maps) {
    const script = document.createElement('script');
    script.src = `https://maps.googleapis.com/maps/api/js?key=${googleApiKey}&callback=initGoogleMap`;
    script.async = true;
    script.defer = true;
    document.head.appendChild(script);

    window.initGoogleMap = () => {
      clearTimeout(googleLoadTimeout);
      renderActiveGoogleMap(container, lat, lng, zoom, title);
    };
  } else {
    clearTimeout(googleLoadTimeout);
    renderActiveGoogleMap(container, lat, lng, zoom, title);
  }
}

/**
 * Loads Leaflet.js and OpenStreetMap dynamically
 */
function loadLeafletFallback(container, lat, lng, zoom, title) {
  container.innerHTML = ''; // Clear fallback markup

  // Inject Leaflet CSS
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'https://unpkg.com/[email protected]/dist/leaflet.css';
  document.head.appendChild(link);

  // Inject Leaflet JS
  const script = document.createElement('script');
  script.src = 'https://unpkg.com/[email protected]/dist/leaflet.js';
  document.head.appendChild(script);

  script.onload = () => {
    const lMap = L.map(container).setView([lat, lng], zoom);
    
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© OpenStreetMap contributors'
    }).addTo(lMap);

    // Setup custom retina-aware markers
    const customIcon = L.icon({
      iconUrl: '/wp-content/themes/wppoland/assets/images/custom-pin.png',
      iconRetinaUrl: '/wp-content/themes/wppoland/assets/images/[email protected]',
      shadowUrl: '/wp-content/themes/wppoland/assets/images/pin-shadow.png',
      iconSize: [32, 32],
      iconAnchor: [16, 32],
      popupAnchor: [0, -32],
      shadowSize: [41, 41]
    });

    L.marker([lat, lng], { icon: customIcon }).addTo(lMap)
      .bindPopup(title)
      .openPopup();

    // Inject custom delivery service zone polygon overlay
    const polygonPoints = [
      [lat + 0.01, lng - 0.01],
      [lat + 0.01, lng + 0.01],
      [lat - 0.01, lng + 0.01],
      [lat - 0.01, lng - 0.01]
    ];
    
    const polygon = L.polygon(polygonPoints, {
      color: '#E53E3E',
      fillColor: '#FEB2B2',
      fillOpacity: 0.4,
      weight: 2
    }).addTo(lMap);
    
    polygon.bindPopup('Our Core Service Zone');
  };
}

This hybrid solution ensures that your users can always access mapping and directions, even if your API key restrictions or billing quotas block Google Services.

#9. Show hundreds of map markers with GeoJSON

For directory sites with hundreds of physical locations, creating independent markers for each coordinates pair degrades rendering performance. Instead, load location coordinates dynamically using a GeoJSON data layer.

#Loading GeoJSON from a WordPress REST endpoint

function loadLocationsGeoJson(map) {
  // Fetch GeoJSON coordinates
  map.data.loadGeoJson('/wp-json/wppoland/v1/map-locations');
  
  // Apply uniform styling
  map.data.setStyle({
    icon: {
      url: '/wp-content/themes/wppoland/assets/images/custom-pin.png',
      scaledSize: new google.maps.Size(32, 32)
    }
  });

  // Attach info windows dynamically
  const infoWindow = new google.maps.InfoWindow();
  map.data.addListener('click', (event) => {
    const name = event.feature.getProperty('storeName');
    const address = event.feature.getProperty('address');
    
    infoWindow.setContent(`<div><strong>${name}</strong><br>${address}</div>`);
    infoWindow.setPosition(event.latLng);
    infoWindow.setOptions({ pixelOffset: new google.maps.Size(0, -30) });
    infoWindow.open(map);
  });
}

This method is highly scalable, handling thousands of location coordinates efficiently while keeping data separate from layout scripts.

#10. How to replace the deprecated google.maps.Marker

Most WordPress snippets, plugins and older tutorials create pins with new google.maps.Marker(). Google’s deprecations page lists google.maps.Marker as deprecated since February 2024 and names google.maps.marker.AdvancedMarkerElement as the replacement. The old class still works, but new features land only in advanced markers.

Advanced markers have one hard requirement: the map needs a map ID. Google’s advanced markers guide says that without a map ID “advanced markers cannot load”. You create the ID in the Cloud Console under map management and pass it as mapId, the same ID that carries cloud-based styling.

async function initMap(el, lat, lng) {
  const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
    google.maps.importLibrary('maps'),
    google.maps.importLibrary('marker'),
  ]);
  const map = new Map(el, { center: { lat, lng }, zoom: 15, mapId: 'YOUR_MAP_ID' });
  new AdvancedMarkerElement({ map, position: { lat, lng }, title: 'Office' });
}

The loading pattern changed as well. Google’s loading guide describes the dynamic library import: you add the inline bootstrap loader and call importLibrary() only for the libraries you use. If you keep the classic script tag, add loading=async to its URL; the documentation calls it “highly recommended” for performance. Load libraries in parallel, as above, and not with separate await lines in sequence. The language and region parameters on the loader decide the language of controls and copyright notices and bias results towards a country, which matters on a multilingual WordPress site where each language version should load the map in its own language.

The same applies to address search. The legacy Autocomplete widget belongs to the Places API (legacy), which new Cloud projects cannot enable. The current widget is google.maps.places.PlaceAutocompleteElement from Places API (New), which you create and append to the page as a single element.

#11. LocalBusiness schema with GeoCoordinates for map locations

To help search engines index your business location correctly, inject structured JSON-LD data into your page headers. If your page lists multiple company branches or locations, use a parent ItemList containing nested LocalBusiness structures to avoid search engine index pollution:

declare(strict_types=1);

namespace MyTheme\SEO\Schema;

/**
 * Injects LocalBusiness schema data with precise GeoCoordinates.
 * Name, phone, address and coordinates come from the site's own settings.
 */
function inject_business_geo_schema(): void {
    $schema = [
        '@context' => 'https://schema.org',
        '@type'    => 'LocalBusiness',
        'name'     => get_bloginfo( 'name' ),
        'image'    => esc_url( get_option( 'business_logo_url' ) ),
        'telephone'=> get_option( 'business_phone' ),
        'geo'      => [
            '@type'     => 'GeoCoordinates',
            'latitude'  => get_option( 'business_lat' ),
            'longitude' => get_option( 'business_lng' ),
        ],
        'address'  => [
            '@type'           => 'PostalAddress',
            'streetAddress'   => get_option( 'business_street' ),
            'addressLocality' => get_option( 'business_city' ),
            'postalCode'      => get_option( 'business_postcode' ),
            'addressCountry'  => get_option( 'business_country' ),
        ],
    ];

    printf(
        "\n" . '<script type="application/ld+json">%s</script>' . "\n",
        wp_json_encode( $schema, JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT )
    );
}
add_action( 'wp_head', __NAMESPACE__ . '\\inject_business_geo_schema' );

/**
 * Injects schema markup for a collection of local business coordinates.
 */
function inject_multiple_locations_schema( array $locations ): void {
    $list_items = [];
    foreach ( $locations as $index => $loc ) {
        $list_items[] = [
            '@type' => 'ListItem',
            'position' => $index + 1,
            'item' => [
                '@type' => 'LocalBusiness',
                'name' => $loc['name'],
                'geo' => [
                    '@type' => 'GeoCoordinates',
                    'latitude' => $loc['lat'],
                    'longitude' => $loc['lng']
                ]
            ]
        ];
    }
    
    $schema = [
        '@context' => 'https://schema.org',
        '@type' => 'ItemList',
        'itemListElement' => $list_items
    ];
    
    printf( 
        "\n" . '<script type="application/ld+json">%s</script>' . "\n", 
        wp_json_encode( $schema, JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT ) 
    );
}

#12. How to fix common Google Maps errors in WordPress

When a map stays grey or shows “This page can’t load Google Maps correctly”, the cause is written in the browser console as Google Maps API error: ERROR_CODE followed by a link. Google’s error messages reference lists the codes. The ones that come up on WordPress sites:

Two WordPress-specific causes do not show up as error codes. A caching or optimisation plugin that combines or delays JavaScript can run your init code before the Maps loader has finished, so exclude the map scripts from combining. And a map container with no height renders as an empty strip: give the wrapper an explicit height or aspect ratio in CSS, which also prevents layout shift when the map appears.

#13. 90-day plan to optimize Google Maps in WordPress

Follow this timeline to optimize, secure, and monitor your site’s mapping integrations:

• Days 1-30: Audit your website for blocking iframe map embeds, replace them with map facades, and apply strict referrer restrictions in the Google Cloud Console.
• Days 31-60: Integrate privacy controls to block Google Scripts until marketing cookies are accepted, and build the Leaflet/OpenStreetMap fallback handler.
• Days 61-90: Transition complex location lists to GeoJSON data layers, inject structured GeoCoordinates schemas into your page headers, and configure budget quotas in the Cloud Console.

Need help building performant, privacy-compliant maps for your site? Our WordPress development team can audit your setup, write custom API integrations, and secure your credentials. Contact us to discuss your project requirements.