Introduction
The chapter demonstrates about the Google Maps JavaScript API Localization and following topics covered.
- Localization
- Localization Languages.
- Example on localization languages.
- Bi-Directional Text.
- Example on localization languages.
- Google Maps Languages.
Description
Google Maps API application provides the user to alter both the application region code and default language settings, so that the map can be displayed with local language based on a given territory or country.
In general the Google Maps API display the map’s textual information like driving directions, labels and controller names etc. as per the settings of browser’s preferred language.
If a user want to change the Map’s API and display the information in particular language instead of default browser’s language, can do by adding an optional language parameter to JavaScript tag (
<script>) by including code and specified language. Example
The example below demonstrate the main scheme of Localization in Google Maps API Which display the Maps API application in Korean language.
[c]
<html>
<head>
<title>Localizing the Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: -34.397, lng: 150.644}
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=&signed_in=true&language=ko&callback=initMap”async defer></script>
</body>
</html>
[/c]
Here in the code, added
&language=ko to the <script> tag.
Note
Using local languages in the Map’s API will display the same language to all the users, so be sure before setting the language options.
Description
The Bi-directional text (Bidi) is supported by Google Map JavaScript API which contain both the Right-to-Left (RTL) and Left-to-Right (LTR) native languages.
The languages Hebrew, Arabic and Farsi are included in the RTL languages.
In order to use RTL languages, add
dir=’rtl’ to the <html> page element. Example
The example below display the Google Map for Egypt, Cairo using Arabic language.
[c]
<!DOCTYPE html>
<html dir="rtl">
<head>
<title>Right-to-Left Languages</title>
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var cairo = {lat: 30.064742, lng: 31.249509};
var map = new google.maps.Map(document.getElementById('map'), {
scaleControl: true,
center: cairo,
zoom: 10
});
var infowindow = new google.maps.InfoWindow;
infowindow.setContent('<b>القاهرة</b>');
var marker = new google.maps.Marker({map: map, position: cairo});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=&signed_in=true&language=ar&callback=initMap"></script></body>
</html>
[/c]
Description
The below are some of the languages supported by Google maps JavaScript API.
| Language | Language Code |
|---|---|
| Arabic | ar |
| Bulgarian | bg |
| Bengali | bn |
| Kannada | kn |
| korean | ko |
| Lithuanian | it |
| Catalan | ca |
| Lativan | lv |
| Czech | cs |
| Malayalam | ml |
| Danish | da |
| Marathi | mr |
| German | de |
| Dutch | nl |
| Greek | el |
| Norwegian | no |
| English | en |
| Polish | pl |
| English (Australian) | en-AU |
| Portuguese | pt |
| English (Geart Britain) | en-GB |
| Portuguese (Brazil) | pt-BR |
| Spanish | es |
| Portuguese (Portugal) | pt-PT |
| Basque | eu |
| Romanian | ro |
| Basque | eu |
| Romanian | ro |
| Russian | ru |
| Farsi | fa |
| Slovak | sk |
| Finnish | fi |
| Slovenian | sl |
| Filipino | fil |
| Serbian | sr |
| French | fr |
| Swedish | sv |
| Galician | gl |
| Tamil | ta |
| Gujarath | gu |
| Telugu | te |
| Hindi | hi |
| Thai | sr |
| Croatian | hr |
| Tagalog | tl |
| Hungaian | hu |
| Turkish | tr |
| Indonesian | id |
| Ukrainian | uk |
| italian | it |
| Vietnamese | vi |
| Hebrew | iw |
| Chinese (simplified) | zh-CN |
| Japanese | ja |
| Chinese(Traditional) | zh-TW |
Note
Google update the supported languages time to time so the list above may not be exhaustive.
Key Points
- Developer should ensure the correct region localization for the country or territory, in which the application to be hosted.
- The RTL and LTR languages are the main things to be remember while developing a Map’s API application.
Programming
Tips
- Copy the API key obtained from Google Maps API and paste using the JavaScript tag in the code for loading Maps.
- Set the required Map Properties for better output.
- Make sure the latitude and longitudes of the required location mentioned to be correct.
- Make sure to give correct language code before running the application.