Google Maps Localization

shape 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.

Localization

shape 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.

Localization languages

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.

shape Example

The example below demonstrate the main scheme of Localization in Google Maps API Which display the Maps API application in Korean language.

<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>

Here in the code, added &language=ko to the <script> tag.

Bi-directional text

shape 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.

shape Example

The example below display the Google Map for Egypt, Cairo using Arabic language.

<!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>

Google Maps languages

shape 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

Summary

shape 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.

shape 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.