Just like you visit maps.google.com.tw or maps.google.co.kr or maps.google.co.jp, you can see their own language shown on every country. Is there any property that I can use in Google Maps API to dynamically set google maps using specific language to display?
In Google Maps API v3, add "language" attribute to script tag. For example, the following will set map to display Russian in location names and navigation buttons:
<script
src="http://maps.google.com/maps/api/js?sensor=false&language=ru-RU"
type="text/javascript"></script>
Result:
In Google Maps v3, you can use the "language" parameter:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
Language codes list: https://developers.google.com/maps/faq#languagesupport
More info: http://googlegeodevelopers.blogspot.com/2009/10/maps-api-v3-now-speaks-your-language.html
For the V2 Maps API:
You can add an optional hl parameter to the <script> tag when including the Google Maps API, specifying the domain language to use, as in the following example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Localization of the Google Maps API</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&hl=ko"
type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<div id="map_canvas" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(36.48, 128.00), 7);
map.setUIToDefault();
</script>
</body>
</html>
Screenshot:
You may also want to check out the following resources for further reading:
Supported list of domain languages
Localization of the Google Maps API
language code is IETF language code:
http://en.wikipedia.org/wiki/IETF_language_tag
<script
src="http://maps.google.com/maps/api/js?sensor=false&language=ru-RU"
type="text/javascript"></script>
Related
I'm creating a web aplication in JAVA/SPRING/HTML5 with Thymeleaf that makes a map with markers based on a H2 Database with latitude and longitude of all customers. I was successful in the backend x front integration. The Java controller send a object to HTML page with Thymeleaf, that page import a javascript file with a google map generate function, consuming the object and executing the function. But the problem is: the map do not generate on the page
I debug the code and dont figure out whats the problem.
HTML CODE (I reduce the code to focus on the problem):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Mapa do cliente</title>
</head>
<body>
<div class="mapa"
th:attr="data-latitude=${customer.latitude},data-longitude=${customer.longitude}"
id="map" style="width: 100%; height: 100%"></div>
<script src="https://jquery.gocache.net/jquery-3.5.1.min.js"
type="text/javascript"></script>
<script src="/webjars/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=&v=weekly"></script>
<script src="/js/mapFunctions.js"
type="text/javascript"></script>
</body>
</html>
JAVASCRIPT CODE:
let map;
var lat = $('.mapa').attr('data-latitude')
var lng = $('.mapa').attr('data-longitude')
function initMap(lat, lng) {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat, lng },
zoom: 8
});
}
initMap(parseFloat(lat), parseFloat(lng))
I print the 'lat' and 'lng' variables in console and they are ok. Im not a expert in javascript and english, so excuse-me whatever not good pratice.
Have you tried $( document ).ready() ? The DOM may not render your map element when you call initMap(parseFloat(lat), parseFloat(lng))
Appears to be a style problem. How was not renderizing the map, i tryed to change the height and witdh of 100% to 500px in <div id="map">, and the maps showed up. So, the code above really attends its purpose, if the change are make. Sure there is better prattices, but for didatic way i think its a valid contribution. Thanks for the help guys.
I have a question about optimally integrating leaflet into the HTML document.
I have read this: Where should I put <script> tags in HTML markup?
If I interpret this information correctly, then if possible, you should include JavaScript with the attribute async or defer. And if possible you should put the Js-files into the -element.
The Leaflet.js must be fully loaded for a map to be displayed. Therefore, I can not use the attribute "async". But I can use the attribute "defer". The best place for integrating the leaflet.js is the -element.
After that I have to integrate my individual JavaScript code with the defer-attribute, so that it executes after leaflet.js.I have to put this js-file after the div that holds my map.
Is this correct or could there be a problem with using defer and is there a better place to integrate the js-files?
I ask this question, because I do not see this attributes async or defer in the examples on the website http://leafletjs.com/examples/.
Thank you for an answer.
This is my example code that runs without error:
<html>
<head>
<title>Eine OSM Karte mit Leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.1.0/dist/leaflet.css" />
</head>
<body>
<script src="https://unpkg.com/leaflet#1.1.0/dist/leaflet.js" defer></script>
<div id="map" style="width: 600px; height: 400px"></div>
<script src="mymap_99.js" defer></script>
</body>
</html>
Where the file mymap_99.js is a short test map:
var map = L.map('map',
{
center: [50.27264, 7.26469],
zoom: 10
});
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
Crossposting: https://groups.google.com/forum/#!topic/leaflet-js/fRC9ElCtFaY
You’re right in that your second script depends on the first being loaded but that does not mean you can’t use async.
if you wait for the load event to fire, you can be sure the leaflet library has loaded before trying to use it:
<html>
<head>
<title>Eine OSM Karte mit Leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.1.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.1.0/dist/leaflet.js" async></script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
<script>
window.addEventListener('load', function() {
var map = L.map('map',
{
center: [50.27264, 7.26469],
zoom: 10
}
);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
}, false);
</script>
</body>
</html>
I think if at all possible it’s better to use async than defer (because async scripts give the browser more flexibility for when to load and when to execute). In this case you could use async for both scripts (provided you wait for the load event before drawing the map).
Yesterday api was working. Today an error occurs:
Uncaught ReferenceError: amd is not defined
Can someone help me please?
<!DOCTYPE html>
<html>
<head>
<title>loadMapAsyncHTML</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
</head>
<body>
<div id='printoutPanel'></div>
<div id='myMap' style='width: 100vw; height: 100vh;'></div>
<script type='text/javascript'>
var map;
function loadMapScenario() {
map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'Your Bing Maps Key'
});
}
</script>
<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release&callback=loadMapScenario' async defer></script>
</body>
UPDATE
This error was fixed by Bing Team.
The team is investigating the root cause as it appears something has changed in the hosting platform which is causing this issue. No code was changed in any of the Bing Maps branches. In the mean time, many have implemented the workaround that David referenced.
Update: A hotfix is being rolled out. You should start seeing Bing MAps V8 loading again as as the hotfix rolls our across our data centers/servers.
If you license Bing Maps (i.e. are a paying customer), make sure you have logged an incident with the Bing Maps Enterprise support team. This will allow them to send you an incident report in the next week or so with details on this incident. If you do not have contact details for the support team, you can find them here: https://www.microsoft.com/maps/support.aspx
https://social.msdn.microsoft.com/Forums/en-US/31063241-34a2-4787-82ba-8e58bf1a2800/uncaught-referenceerror-amd-is-not-defined?forum=bingmaps
found a fix, add:
<script type="text/javascript">
window.amd = function(){};
window.amd.define = function(){};
</script>
<script type='text/javascript' src='//www.bing.com/api/maps/mapcontrol?branch=release'></script>
I am trying the new Bing Maps v8.
I follow one of the firsts examples:
http://www.bing.com/api/maps/sdk/mapcontrol/isdk#loadMapSync+HTML
It works. But when I add a text, like test, it stops showing the map:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
</head>
<body>
test
<div id='printoutPanel'></div>
<div id='myMap'></div>
<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol'></script>
<script type='text/javascript'>
function loadMapScenario()
{
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'Your Bing Maps Key'
});
}
window.onload = loadMapScenario;
</script>
</body>
</html>
The word test in the 7th line makes it to stop working.
Any idea?
The doctype shouldn't be the cause for failure here, in fact it should reduce issues as that is the doctype used for HTML5, which the map uses.
The code you provided should work. Looking into this I found that the width of the map is never being set, and as such it ends up being 0. When no width or height is specified for the map, the map tries to use the dimensions of it's parent. It appears that adding the text into body is causing the calculation to be incorrect. I'll have the dev team look into this.
Also, I would only use the Sync method of loading the map if you were migrating old code that needed to run synchronously. If you are creating a new app you should load the map control asynchronously as it will allow your page to load faster. http://www.bing.com/api/maps/sdk/mapcontrol/isdk#loadMapAsync+HTML
Hey there, I have an issues/bug when trying to have a v3 and v2 google maps on the page at the same time.
The core of our application uses v2 of the API and adding some new functionality we decided to use v3 of the api since v2 is deprecated. So I'm dynamically loading the v3 version of the api in another "tab" on the application.
The problem is if you click on the v3 map and then click on the v2 map the v2 map starts following the mouse cursor around as if you had clicked to start dragging but never released the mouse button. And basically bugs out till you reload the page
Heres an example, with simple instructions on how to replicate
http://jsbin.com/googlemapv3v2/1
The weird thing is if you click/play around with the v2 map first then click/play around with the v3 map it all works nicely.
So I've tried "tricking" it by firing custom click/mousedown events on the v2 map once the v3 api is loaded see http://jsbin.com/googlemapv3v2/2
But no luck there, anyone got any ideas?
EDIT: Should note, it only seems to be happening in chrome, firefox, safari havent tried opera.
I don't think the two APIs are meant to co-exist on the same page. I tried a very basic example, which happens to have the same problem as yours. Tested in Chrome 5.0 and Firefox 3.6.6 (both for Mac):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps v2 and v3 on same page</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false"
type="text/javascript"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map_v3" style="width: 500px; height: 400px;"></div>
<div id="map_v2" style="width: 500px; height: 400px; margin-top: 50px;"></div>
<script type="text/javascript">
var map3 = new google.maps.Map(document.getElementById('map_v3'), {
zoom: 6,
center: new google.maps.LatLng(-41.00, 174.00),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var map2 = new GMap2(document.getElementById('map_v2'));
map2.addControl(new GLargeMapControl3D());
map2.setCenter(new GLatLng(-41.00, 174.00), 6);
</script>
</body>
</html>