Add Google Maps to WordPress: Easy Code Snippet Guide

Code

<?php
// Function to enqueue Google Maps API script
function wp_dudecom_enqueue_google_maps_api() {
    // Replace 'YOUR_GOOGLE_MAPS_API_KEY' with your actual Google Maps API key
    $api_key = 'YOUR_GOOGLE_MAPS_API_KEY';
    wp_enqueue_script('google-maps-api', 'https://maps.googleapis.com/maps/api/js?key=' . esc_attr($api_key), array(), null, true);
}
add_action('wp_enqueue_scripts', 'wp_dudecom_enqueue_google_maps_api');

// Shortcode function to display Google Maps
function wp_dudecom_google_maps_shortcode($atts) {
    // Extract shortcode attributes
    $atts = shortcode_atts(
        array(
            'latitude' => '37.7749', // Default latitude
            'longitude' => '-122.4194', // Default longitude
            'zoom' => '10', // Default zoom level
            'width' => '100%', // Default width
            'height' => '400px' // Default height
        ),
        $atts,
        'google_map'
    );

    // Generate a unique ID for the map container
    $map_id = 'wp-dudecom-map-' . uniqid();

    // Output the map container and initialization script
    ob_start();
    ?>
    <div id="<?php echo esc_attr($map_id); ?>" style="width: <?php echo esc_attr($atts['width']); ?>; height: <?php echo esc_attr($atts['height']); ?>;"></div>
    <script type="text/javascript">
        function initMap() {
            var mapOptions = {
                center: new google.maps.LatLng(<?php echo esc_js($atts['latitude']); ?>, <?php echo esc_js($atts['longitude']); ?>),
                zoom: <?php echo intval($atts['zoom']); ?>
            };
            var map = new google.maps.Map(document.getElementById('<?php echo esc_js($map_id); ?>'), mapOptions);
        }
        google.maps.event.addDomListener(window, 'load', initMap);
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('google_map', 'wp_dudecom_google_maps_shortcode');
?>