Google Maps Api V3 How Show The Direction From A Point A To Point B Blue Line

Google Maps API V3 is a powerful tool that allows developers to integrate custom maps and location services into their applications. One common use case is displaying directions between two points on a map using a blue line to indicate the route. In this article, we will walk you through the steps to achieve this functionality in an easy-to-follow manner.

To begin, you will need to obtain an API key from Google by creating a project in the Google Cloud Platform console. Once you have your API key, you can start by embedding the Google Maps JavaScript API in your web page by adding the following script tag to your HTML file:

Replace `YOUR_API_KEY` with the API key you obtained earlier. This script tag loads the Google Maps API library and allows you to use its functions in your web application.

Next, you need to create a map object and display it on your web page. You can do this by adding the following JavaScript code to your HTML file:

let map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: { lat: 37.774929, lng: -122.419416 },
    zoom: 10
  });
}

In this code snippet, we create a new Google Maps object centered at the coordinates `{lat: 37.774929, lng: -122.419416}` with an initial zoom level of 10. You can adjust these values to center the map on your desired location.

Now comes the exciting part - displaying directions between two points on the map with a blue line. To achieve this, you can use the `DirectionsService` and `DirectionsRenderer` classes provided by the Google Maps API. Add the following code to your JavaScript file:

let directionsService = new google.maps.DirectionsService();
let directionsRenderer = new google.maps.DirectionsRenderer({ polylineOptions: { strokeColor: 'blue' } });

function displayRoute() {
  directionsService.route(
    {
      origin: 'San Francisco, CA',
      destination: 'Mountain View, CA',
      travelMode: 'DRIVING'
    },
    function(response, status) {
      if (status === 'OK') {
        directionsRenderer.setMap(map);
        directionsRenderer.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    }
  );
}

In this code snippet, we create a `DirectionsService` object to fetch directions between two points (origin and destination). We then create a `DirectionsRenderer` object that will display the directions on the map using a blue line. The `displayRoute` function initiates the process by sending a request to the `DirectionsService` and renders the directions on the map.

Finally, call the `displayRoute` function after the map is initialized to show the directions on your map:

google.maps.event.addDomListener(window, 'load', initMap);
google.maps.event.addDomListener(window, 'load', displayRoute);

By following these steps, you can easily show the direction from Point A to Point B on a Google Map with a blue line using the Google Maps API V3. Experiment with different options and settings to customize the map according to your requirements and enrich the user experience of your web application. Happy mapping!