Optimizing Location Services: A Google Maps API Case Study

Google Maps has evolved into a crucial application accessible not only to tech enthusiasts but also to those less tech-savvy. The previous blog provides a detailed, step-by-step guide on integrating the Google Maps API into your Magento 2 website, outlining numerous advantages in streamlining location-based services.

To provide a practical perspective, this blog will explore a case study that analyzes the practical application of the Google Maps API. It will specifically spotlight key features, shedding light on its real-world implications.

The application of the Google Maps API to the Magento website

Overall, integrating Google Maps API on the Magento website optimizes navigation, enhances service precision, and contributes to a more user-friendly and efficient platform.

The following are notable features that can be effortlessly implemented on your website.

1. Collecting Address Data and Saving Lat, Long

Our application ensures accuracy in location data by allowing users to input an address or harness the power of the GG Maps API to obtain exact coordinates (Latitude and Longitude).

You can get address information (Latitude and Longitude) from input address by map.Geocoder()

const geocodeInput = {
  address: "bangkok",
  componentRestrictions: {
      country: 'TH'
  }
}
const geocoder = new maps.Geocoder();
geocoder.geocode(geocodeInput, (results, status) => {
    if (status === maps.GeocoderStatus.OK) {
        const location =
            results[0] &&
            results[0].geometry &&
            results[0].geometry.location;
        const lat = location.lat();
        const lng = location.lng();
        // do any thing
    }
});

2. Customer Location Detection

The app can determine a customer’s location, either through the GPS on their mobile device or by entering an address. To allow location services, the Google Maps API (GG Map API) can retrieve your current address.

navigator.geolocation.getCurrentPosition(
    position => {
        const currentCenter = {
            lat: position.coords.latitude,
            lng: position.coords.longitude
        };
        // do anything
    },
    err => {
        // do anything
    }
);

3. Interactive Map with Pin Manipulation

Users can interact with a map interface, allowing them to move a pin and specify an exact delivery location, ensuring precision and convenience. This feature adds a level of precision and convenience for both users and delivery personnel.

You can also drag and drop the points address in GG Map to fill in address details. 

4. Address and Location Search on Maps

The application facilitates easy search for addresses and locations on the map, making it effortless for users to find where they want to send or receive deliveries.

5. Data Extraction from Google Maps API

Data retrieved from the GG Maps API helps maintain up-to-date customer addresses. Our app prompts users to provide complete address details in cases of mismatched or missing data.

You can enter an address, GG Map API will suggest some address mapping with your enter address.

const autocompleteForm = new mapApis.maps.places.Autocomplete(
      DOMElement,
      {
          componentRestrictions: { country: 'th' }
      }
  );
  autocompleteForm.bindTo('bounds', mapApis.map);

You can use address_components of results GG Map API to autocomplete the form address.

const geocodeInput = {
  address: "bangkok",
  componentRestrictions: {
      country: 'TH'
  }
}
const geocoder = new maps.Geocoder();
geocoder.geocode(geocodeInput, (results, status) => {
    if (status === maps.GeocoderStatus.OK) {
        const location = results[0].address_components;
        // do anything
    }
});

6. Distance-Based Shipping Rate Support

The app offers a shipping rate calculation based on the distance between the origin and destination points, measured in kilometers. This provides users with upfront knowledge of the delivery cost.

To calculate the round distance from 2 points in Google Maps, you can use the following code.

let directionsService = new google.maps.DirectionsService();
let directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setMap(map); // Existing map object displays directions// Create route from existing points used for markers
const route = {
    origin: dakota,
    destination: frick,
    travelMode: 'DRIVING'};

directionsService.route(route, function(response, status) {
    // anonymous function to capture directions    if (status !== 'OK') {
        window.alert('Directions request failed due to ' + status);
        return;
    } else {
        directionsRenderer.setDirections(response); // Add route to the map        
        var directionsData = response.routes[0].legs[0]; // Get data about the mapped route        
        if (!directionsData) {
            window.alert('Directions request failed');
            return;
        } else {
            document.getElementById('msg').innerHTML +=
                ' Driving distance is ' +
                directionsData.distance.text +
                ' (' +
                directionsData.duration.text +
                ').';
        }
    }
});

Conclusion

The utilization of the Google Maps API has significantly improved the user experience within this delivery application. It has empowered customers to determine addresses effortlessly, pinpoint specific locations, and calculate shipping rates with ease. The result is a more efficient and user-friendly delivery process that benefits both service providers and recipients.

Incorporating GG Maps API into delivery applications is a testament to how technology can enhance the logistics industry, making it more accessible and user-centric. It underscores the importance of leveraging location data for businesses aiming to provide top-notch delivery services. Tigren has achieved success in implementing Google Maps API to optimize online presence. If you need help, Tigren is always here to support you.