How to set Right-to-left languages?

Introduction:

In this tutorial we will learn to create a map that renders a map of Cairo, Egypt in Arabic.

This example displays a map with the language set to Arabic and the regions set to Egypt. These settings are specified in the HTML script element when loading the Google Maps JavaScript API. Setting the language shows the map in the language of your choice. Setting the region biases the geocoding results to that region. In addition, the page’s html element sets the text direction to right-to-left.

Code:

// This example displays a map with the language set to Arabic and the
// regions set to Egypt. These settings are specified in the HTML script
// element when loading the Google Maps JavaScript API.
// Setting the language shows the map in the language of your choice.
// Setting the region biases the geocoding results to that region.
// In addition, the page's html element sets the text direction to
// right-to-left.
function initMap(): void {
  const cairo = { lat: 30.064742, lng: 31.249509 };

  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      scaleControl: true,
      center: cairo,
      zoom: 10,
    }
  );

  const infowindow = new google.maps.InfoWindow();

  infowindow.setContent("القاهرة");

  const marker = new google.maps.Marker({ map, position: cairo });

  marker.addListener("click", () => {
    infowindow.open(map, marker);
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
export {};

Explanation:

• The function initMap() is created which consists of the map properties.
• The variable cairo is assigned with the longitude and the latitude coordinates.

const cairo = { lat: 30.064742, lng: 31.249509 };

• Next, the line, “map = new google.maps.Map(document.getElementById(“map”)”; creates a new map inside the <div> element with the help of the mentioned id which is ‘map’ as an HTMLElement.

const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,

• The scalecontrol is set to True.

scaleControl: true,

• The ‘centre’ attribute defines where the map should be centered with cairo.

center: cairo,

• The ‘zoom’ attribute specifies the map’s zoom level.

 zoom: 10,

• The InfoWindow is created. An InfoWindowdisplays content (usually text or images) in a popup window above the map, at a given location.

const infowindow = new google.maps.InfoWindow();

• Next, the new marker() is created. A map marker denotes a specific location. A standard picture is used by default for a marker. Markers can show bespoke pictures, in which case they are known as “icons.” Markers and icons are both Marker objects.

const marker = new google.maps.Marker({ map, position: cairo });
  marker.addListener("click", () => {
    infowindow.open(map, marker);
  });
}

• Lastly, the function is called and executed.

window.initMap = initMap;

Conclusion:

Thus, we learned to create a map that renders a map of Cairo, Egypt in Arabic.

Live Example