Google Maps - Localization

Google Maps - Localization

By default, Google Maps displays place names, labels, and UI controls in the user’s preferred language setting (often determined by browser settings) or English. Localization allows you to explicitly set the language and regional formatting for your map.

Why Localize?

• User Experience: Presenting the map in the user’s native language improves usability and comfort.
• Consistency: Ensures the map language matches the language of your website or application.
• Regional Relevance: Can influence how certain boundaries or place names are displayed based on regional perspectives (using the region parameter).

How to Localize

Localization is configured when you load the Maps JavaScript API by adding parameters to the script URL:

• language Parameter: Specifies the language to use for labels, controls, and textual information. Uses BCP 47 language codes (e.g., ja for Japanese, es for Spanish, zh-CN for Simplified Chinese).
• region Parameter: Specifies a regional bias (optional). Uses two-character ISO 3166-1 Alpha-2 country codes (e.g., JP for Japan, ES for Spain, CN for China). This primarily affects:

• - How map tiles are biased towards features within that region.

• - Behavior of applications using external services like Geocoding (biases results towards the region).

Example: Loading the API for Japanese Language (ja) in Japan (JP)

<script
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&language=ja&region=JP"
  async defer>
</script>

Example: Loading the API for Spanish Language (es) without specific region bias

<script
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&language=es"
  async defer>
</script>

Supported Languages

Google Maps supports a wide range of languages. Refer to the official documentation for the complete, up-to-date list:

• List of Supported Languages

If a language is specified but not fully supported for map tiles in a specific area, the API may fall back to a closely related language or the default (English).

Example: Displaying a Map Localized to Chinese (Simplified)

This example loads a map centered on Beijing, explicitly requesting Simplified Chinese language and the China region.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Localized Map (Chinese)</title>
    <style>#map { height: 400px; width: 100%; } html, body { height: 100%; margin: 0; padding: 0; }</style>
</head>
<body>
    <div id="map"></div>
    <script>
        async function initMap() {
            const position = { lat: 39.9042, lng: 116.4074 }; // Beijing
            const { Map } = await google.maps.importLibrary("maps");

            const map = new Map(document.getElementById("map"), {
                center: position,
                zoom: 11,
                mapId: "DEMO_MAP_ID",
                mapTypeId: 'roadmap'
            });
        }
    </script>
    <!-- Load API with language and region -->
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&language=zh-CN&region=CN" async defer></script>
</body>
</html>

Expected Output: A map of Beijing where place names (like ‘北京市’), UI controls (like zoom buttons), and copyright information appear in Simplified Chinese.

Important Considerations

• Right-to-Left (RTL) Languages: The API automatically handles layout adjustments for RTL languages like Arabic (ar) or Hebrew (iw) when specified.
• Content: Localization only affects text provided by Google (labels, controls). Any custom content you add (e.g., in InfoWindows) needs to be translated separately within your application.
• Testing: Always test your chosen language/region combination to ensure it behaves as expected, especially regarding place names and regional nuances.

Further Reading:

• Official Documentation on Localization