Adding Translations to Google Maps Iframe Embed with Query Parameters
When embedding a Google Maps iframe on a website, you might want to provide a localized experience by automatically translating map information based on the user's language preference.
Fortunately, Google Maps allows for localization by adjusting a few parameters in the iframe’s src URL.
Google Maps allows us to control the language through the pb query string instead. The language can be set by adjusting specific language parameters within the query.
Here's a breakdown of how this works and the code:
How Language Translation Works in Google Maps Embed URL
The Google Maps iframe URL has 5m2!1s{language_code}!2s{region_code} within the query string, where:
The {language_code} (like en, ta, hi) sets the language.
The {region_code} (like in for India) specifies the region.
Code Implementation
In your React component, you can make this dynamic by setting the {language_code} part of the pb string to ${locale}, so users can see the map in their preferred language.
<iframe
src={`https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d124429.51674082068!2d80.0030849!3d12.9448011!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a528ba6ba597489%3A0x266f1a52d95c4f1e!2sSundar%20Clinic!5e0!3m2!1s${locale}!2sin`}
width="100%"
height="320"
style={{ border: 0 }}
allowFullScreen
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
title="Sundar Clinic Location"
></iframe>
Setting locale based on user preference or browser language (like en, ta, hi) ensures Google Maps loads with labels and information in that language. For example:
- locale = 'en' shows labels in English.
- locale = 'ta' shows labels in Tamil.
This technique provides a smoother, more accessible experience, especially for multilingual websites.
Managing the locale Variable
To populate the locale variable, you can use methods such as:
- Detecting the user’s browser language via
navigator.language. 1 - Setting the language based on user preferences stored in a state or configuration file.
Other References
- Code implementation at Sundar Clinic's Website: Footer.tsx#L86