Is there a way to remove the Directions button / link from the Google Maps embed code?

I maintain the website of an enterprise. Recently they called me to say that on the Google Map section, one of their customers complained that when he clicked on the directions button, the browser (or the app on an Android smartphone, it's not known exactly) took him to a location totally irrelevant to the actual location of the enterprise.

To check this I've tried clicking on the directions button on an Android phone and an Android tablet. On the smartphone, the link gave correct result, i.e. a highlighted road path, from my location up to the enterprise's location, but on the Android tablet, it took me to a totally irrelevant place, which makes that customer's complaint justified.

The quickest way to solve this problem seems to remove that directions button from the embed code. The customers don't actually need that link/button anyway. But it's not certain if it's possible to remove that link from the embed code.

Here is a "sample" enterprise I chose from Istanbul city: Borsa Lokantası Caddebostan embed code:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3012.6736415807336!2d29.068425400000002!3d40.9667278!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14cac719e8d59ce5%3A0x16139f99cc35a21c!2sBorsa%20lokantas%C4%B1%20caddebostan!5e0!3m2!1sen!2str!4v1682198139880!5m2!1sen!2str" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

which I got by Share >> Embed a map >> Copy HTML from the enterprise's pinned/marked location.

(The Directions button/link is marked inside the red rectangle)

Is it possible to remove that Directions link by modifying the src part of the code? Or should I do something else, such as getting the so-called google map api v3 code, in which I could write / specify the embed code? Note that I have no experience in the Google Maps.

Solution

Use Maps Javascript API for better customization of a Map

Maps embed API has its limits in terms of trying to modify what you see on the map you are trying to show. But it is working as intended. If you want more customization, it is recommended that you use Maps Javascript API.

Documentation specifically says this:

"The Maps JavaScript API lets you customize maps with your own content and imagery for display on web pages and mobile devices."

Since you have mentioned that you have no experience with Javascript, you can try out their Maps Quick Builder Solution and try out the Show Place Details sample since it seems to be similar to your use case.

But also since Javascript can be relatively easy to read and understand, I would recommend that you read through their documentation guides / tutorials like this one: https://developers.google.com/maps/documentation/javascript/adding-a-google-map

After learning the basics, you can try to play around with their Place Details Sample and modify it to match your needs.

Here's an example code that could help:

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -33.866, lng: 151.196 },
    zoom: 15,
  });
  const request = {
    placeId: "ChIJ5ZzV6BnHyhQRHKI1zJmfExY",
    // Changed the "place_id" to "rating" here.
    fields: ["name", "formatted_address", "rating", "geometry"],
  };
  const infowindow = new google.maps.InfoWindow();
  const service = new google.maps.places.PlacesService(map);
  
  // I removed the onClickListener here to instantly show the place detail 
  // on first load of the map instead of clicking on it first.
  service.getDetails(request, (place, status) => {
    if (
      status === google.maps.places.PlacesServiceStatus.OK &&
      place &&
      place.geometry &&
      place.geometry.location
    ) {
      const marker = new google.maps.Marker({
        map,
        position: place.geometry.location,
      });
      
      // Uncomment the console log below to see what's inside the `place` result.
      // console.log(place)
      const content = document.createElement("div");
      const nameElement = document.createElement("h2");

      nameElement.textContent = place.name;
      content.appendChild(nameElement);
      
      // I changed the placeID result here to rating since this is what's on your sample.
      const ratingElement = document.createElement("p");

      ratingElement.textContent = "Rating: " + place.rating;
      content.appendChild(ratingElement);

      const placeAddressElement = document.createElement("p");

      placeAddressElement.textContent = "Address: " + place.formatted_address;
      content.appendChild(placeAddressElement);
      infowindow.setContent(content);
      infowindow.open(map, marker);

    }
  });
}

window.initMap = initMap;

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<html>
  <head>
    <title>Place Details</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=places&v=weekly"
      defer
    ></script>
  </body>
</html>

This code is just a modified sample from the documentation and what I changed are the following:

Removed the click event listener to load the place detail info window on first map load.
Changed the place_id field to rating since that is what's on your sample above. (Added some comments on the code for you to notice)

With this, you can try implementing this in your website and see if it works with your use case.

If you need help with regards to setting up your account to be able to run the Maps Javascript (ex. API keys and etc.), you should contact Maps Technical Support.

Hope this helps!