How to Localize the Map?

Introduction:

This example generates a Japanese-language map independent of the user’s browser settings. The region is also set to Japan, skewing the geocoding findings to that country.

You can tailor your map to a specific country or region by doing the following:

• Change the language settings to something other than English.
• Enter a region code to change the map’s behavior based on a specific country or territory.

When displaying textual information such as control names, copyright notices, driving directions, and labels on maps, the Maps JavaScript API employs the user’s preferred language option as indicated in the browser by default. In most circumstances, it is best to adhere to the browser’s preferences. If you want the Maps JavaScript API to ignore the browser’s language setting, you can force it to display information in a specific language by adding a language parameter to the script> element when the Maps JavaScript API code is loaded.

The language option influences the names of controls, copyright notices, driving instructions, and control labels, as well as replies to service inquiries. The impact on services is less visible. For example, when geocoding street level addresses, the country name is returned in the language you requested, but the remainder of the address is particular to the place you are geocoding. Postal and political results, on the other hand, are returned in the language requested.

Code:

// This example displays a map with the language and region set
// to Japan. 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.
function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 8,
      center: { lat: 35.717, lng: 139.731 },
    }
  );
}

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

Explanation:

• The function initMap() is created to set the properties of the map.
• 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 ‘centre’ attribute defines where the map should be centered with the help of the latitude and longitude coordinates).

center: { lat: 35.717, lng: 139.731 },

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

zoom: 8,

• Lastly, the function is called and executed.

window.initMap = initMap;

Conclusion:

In this tutorial we learned of how to create a map that’s localized in Japanese, regardless of the user’s browser settings. The region is also set to Japan, which biases the geocoding results to that region.

Live Example