I'd like to localise the map generated by Gmaps4rails, so I can show place names in the users desired language. Google documents how to do this here: https://developers.google.com/maps/documentation/javascript/examples/map-language
I'm using a fairly standard (and currently functional) implementation of Gmaps4rails, which you can see here.
handler = Gmaps.build('Google');
handler.buildMap({
provider: { styles: mapStyle },
internal: {id: 'map'}
}, function(){
markers = handler.addMarkers(<%=raw #hash.to_json %>);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
});
Rendering to the html...
<div class="map-container">
<div id="map"></div>
</div>
I just need to find out where to define the language code. I've tried adding it as an option to the provider, with no joy (e.g. provider: { styles: mapStyle, language: 'zh-TW' }).
I've scoured the documentation (and source), but can't seem to find any info on this. Any help would be appreciated!
You have to indicate the language in the script.
For example in the Maps API v3 Now Speaks Your Language:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=pt-BR">
You can find the list of languages here.
Here is the code sample:
<!DOCTYPE html>
<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>
// This example displays a map with the language and region set
// to Japan. These settings are specified in the HTML script element
// when loading the Google Maps JavaScript API.
// Setting the language shows the map in the language of your choice.
// Setting the region biases the geocoding results to that region.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: 35.717, lng: 139.731}
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&language=ja®ion=JP"
async defer>
</script>
</body>
</html>
As you can see in this code line, key=YOUR_API_KEY&callback=initMap&language=ja®ion=JP, language is set to jp = Japanese.
Also check their working sample with a dynamic language setting.
Hope this helps!
Related
Hi all i have task to create monitoring of 200 ip addresses and for each of this ip we have location latitude/longitude. Now for the monitoring purpose i have perl script runing which pings all 200hosts and update their status in MySql database.
Now i want to display these 200 locations on google maps and change marker color depending on status Green = online, Red = offline.
Also i have loaded kml fille with location of the connections and street cabling ( This is fixed and no changes are needed )
How can i generate markers dynamically and display them all together with already loaded kml fille?
Or if there is any other solution i am willing to consider it.
Here is a sample where i am loading my kml fille:
<!DOCTYPE html>
<html>
<head>
<title>KML Layers</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=MY API&callback=initMap&libraries=&v=weekly"
defer
></script>
<style type="text/css">
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
"use strict";
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: {
lat: 35.928926,
lng: 14.462688
}
});
const ctaLayer = new google.maps.KmlLayer({
url: "MY KML ADDRESS",
map: map
});
}
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
I ended up using
MySql to Maps
recently started messing with Google Maps API, and wanted to create a custom map with certain countries highlighted (I know - classic problem). There are multiple topics on this in here already and I went through them already.
When I try to do this using 'country' tables, their polygon data is horrible. The output becomes something like this:
I came across with another dataset today called Geocodezip. And here is the code I use (inherited from another post here and tweaked a little) and the output I see when I draw it (deleted the API key from the code)
<html>
<head>
<title>Test</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 40, lng: 25},
zoom: 6
});
layer = new google.maps.FusionTablesLayer({
map: map,
heatmap: { enabled: false },
query: {
select: "col38",
from: "19lLpgsKdJRHL2O4fNmJ406ri9JtpIIk8a-AchA",
where: "col2 in ('GRC')"
},
options: {
styleId: 9,
templateId: 8
}
});
layer.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=__my_API_key_here__&callback=initMap"
async defer></script>
</body>
</html>
The difference is overwhelming, and I'd like to proceed with the second map. Yet it has state borders in it as well as the country border. I only need the country border.. Is there a way to use the second dataset country borders only? How do I eliminate them?
P.S.: Also can you tell me how to edit the drawing color? Couldn't find styleID descriptions for Geocodezip
Ok, figured out the answer on my own after looking into source code of the other example I discovered. Turns out what I look for is on another table:
from: "419167",
where: "sovereignt in ('Greece')"
Just changed the two lines above and it's working perfectly.
It may be because of how the server is setup? I don't really know and I'm lost. I can only access the data on the ArcGIS server while on the network the server is on, so that may be the issue.
I'm brand new to using Javascript and ArcGIS server so I'm learning as I go and there really has not been a lot online to self teach this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>FeatureLayer</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">
<script src="https://js.arcgis.com/3.22/"></script>
<style>
html, body, #map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/map",
"esri/layers/FeatureLayer",
"dojo/domReady!"
],
function(
Map,
FeatureLayer
) {
var map = new Map("map", {
basemap: "hybrid",
center: [ -74.026879,40.168342],
zoom: 17
});
/****************************************************************
* Add feature layer - A FeatureLayer at minimum should point
* to a URL to a feature service or point to a feature collection
* object.
***************************************************************/
// Carbon storage of trees in Warren Wilson College.
var featureLayer = new FeatureLayer("http://wlb-gis-01.monmouth.edu:6080/arcgis/rest/services/Lake_Como/Lake_Como_test/MapServer/0");
map.addLayer(featureLayer);
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Indeed, the URL is not public, must be accessible from the local network.
You can ask the network admin if the server can be accessible from internet.
This question already has an answer here:
Google Maps Api V3 - Styling countries or cities
(1 answer)
Closed 5 years ago.
I want to show in my website only certain places using GoogleMap.It shouldn't show any small places.Only major places should be visilble in map.What is procedure to obtain this?
Set your lat/lon to the location of a post office (or other city indicator).
Then, use the zoom property to fix to the level you want to encompass.
See: https://developers.google.com/maps/documentation/javascript/examples/marker-simple
Here is the code form the example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
Try that script at map.zoom = 16. Should be close to city view. London I think.
You can also set map bounds, but that is a lot harder. You would need to find your location, then plot geometry around that area, define the points, and then, zoom all points into view.
All of this is possible, but you showed me no code, so I'm not showing any back.
Hope you found something useful,
I'm trying to migrate my application to latest version of Google map API and found that Google appends it's own items by default from Google Places directory to the map.
It does not look right together with my own records as it creates duplicate items on the map which can be placed in correctly.
Is there an option how to hide this local businesses or to control what is shown and what is not?
here is sample code:
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<style type="text/css">
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
function initialize() {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(37.422833333333,25.323166666667),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
As you can see on map, there are few tiny icons, which you can click on and information would appear in bubble. I need to hide this icons or at least disable on click event for this items.
Just a pointer - this seems possible with custom styled maps. If I'm not mistaken, the feature type you're looking for would be poi.business, whose visiblity you would turn off.
There's a wizard to help you build the options array.
You can remove it by adding the following code:
var styles = [
{
featureType: "poi",
stylers: [
{ visibility: "off" }
]
}
];
var styledMap = new google.maps.StyledMapType(styles,{name: "Styled Map"});