Remove option from Google Maps embedded

Question

frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/directions?origin=rishra&destination=kolkata&key=MY-API-KEY&zoom=12" allowfullscreen>

Results> enter image description here

Want to remove that box which shows location of two points and more options

Answer 1

You are using a Directions mode of Maps Embed API and it seems that the origin and destination information is part of the API and can't be removed. If you would only like to show the directions of your origin and destination, you can opt to use Maps Javascript APIs Directions Service. This API will enable you to make more dynamic changes in your map.

Here's a sample code and code snippet below:

function initMap() {
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer();
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 17,
    center: {
      lat: 22.572646,
      lng: 88.363895
    },
  });

  directionsRenderer.setMap(map);
  calculateAndDisplayRoute(directionsService, directionsRenderer);

}

function calculateAndDisplayRoute(directionsService, directionsRenderer) {
  directionsService
    .route({
      origin: 'rishra',
      destination: 'kolkata',
      travelMode: google.maps.TravelMode.DRIVING,
    })
    .then((response) => {
      directionsRenderer.setDirections(response);
    })
    .catch((e) => window.alert("Directions request failed due to " + status));
}