Save coordinates of the billing address and show them on a map

orders-google-map.php

<?php

//Save coorindates of the billing address when order marked completed using google geocode API and save it to order meta
add_action('woocommerce_order_status_completed', function($order_id) {
    $order = wc_get_order($order_id);
    $billing_address = $order->get_formatted_billing_address();

    // Replace spaces with '+' for URL encoding
    $formatted_address = str_replace(' ', '+', $billing_address);
    $api_key = 'YOUR GOOGLE API KEY';

    // Send a GET request to the Google Geocoding API
    $response = wp_remote_get("https://maps.googleapis.com/maps/api/geocode/json?address={$formatted_address}&key={$api_key}");

    if (is_wp_error($response)) {
        // Handle error
        return;
    }

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

    if ($data['status'] == 'OK') {
        $latitude = $data['results'][0]['geometry']['location']['lat'];
        $longitude = $data['results'][0]['geometry']['location']['lng'];

        // Save the coordinates to the order meta
        $order->update_meta_data('_billing_latitude', $latitude);
        $order->update_meta_data('_billing_longitude', $longitude);
        $order->save_meta_data();
    }
});

add_action('admin_menu', function() {
    add_menu_page('Order Map', 'Order Map', 'manage_options', 'order-map', 'vp_display_order_map');
});

function vp_display_order_map() {
    // Get all completed orders
    $orders = wc_get_orders(array('status' => 'completed'));

    // Get the coordinates of the billing addresses
    $coordinates = array();
    foreach ($orders as $order) {
        $latitude = $order->get_meta('_billing_latitude');
        $longitude = $order->get_meta('_billing_longitude');
        if ($latitude && $longitude) {
            $coordinates[] = array('lat' => floatval($latitude), 'lng' => floatval($longitude));
        }
    }

    // Convert the coordinates to JSON
    $coordinates_json = json_encode($coordinates);
    $api_key = 'YOUR GOOGLE API KEY';

	?>
	<div id="map" style="height: 500px;"></div>
    <script>
    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 4,
            center: {lat: -33.865427, lng: 151.196123}, // Change this to the center of your country
        });

        var coordinates = <?php echo $coordinates_json; ?>;
        for (var i = 0; i < coordinates.length; i++) {
            new google.maps.Marker({
                position: coordinates[i],
                map: map,
            });
        }
    }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=<?php echo $api_key; ?>&callback=initMap"></script>
    <?php
}