Is there any way to load language in the map options field?
Something like this:
var mapOptions = {
center : new google.maps.LatLng(43.97918, 53.716647),
zoom : 10,
mapTypeId : google.maps.MapTypeId.ROADMAP,
language : 'fr'
};
Found it!
Using google script https://www.google.com/jsapi
google.load('maps', '3.x', {
'other_params' :
'sensor=true&libraries=geometry&language=' + langCode,
'callback' : mapsLoadeds
});
mapsLoaded executes the common code for creating maps.
You can use the language parameter in the url of google maps :
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&language=ja">
</script>
Related
I'm using a code similar the one below to display buildings KML Layer. Click event works and i get name and HTML. What i need to do is, I want to change style of the clicked polygon/line. Let say I want to change border width. How can i do that?
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {
lat: 41.876,
lng: -87.624
}
});
var ctaLayer = new google.maps.KmlLayer({
url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
map: map
});
ctaLayer.addListener('click', function(kmlEvent) {
//need to change style of the clicked element here.
});
}
You can't change the styling of a KmlLayer using the API.
Options:
use a FusionTablesLayer (import your KML into a FusionTable, you can dynamically style polylines from a FusionTable).
use a 3rd-party KML parser, like geoxml3 or geoxml-v3 to render the KML as native Google Maps JavaScript API v3 polylines, then modify those. Note that the 3rd-party parsers are subject to the same domain security policy for the KML, so can only access KML from other domains through a proxy.
example using geoxml3 (polylines change to yellow on mouseover)
How can i modify a V3 map's mapOptions (after the initial map has been loaded)?
Specifically, I would like to be able to flip the
draggable: false
option to
draggable: true
When an action (such as a click on a div) is triggered.
Addition: I have tried loading jquery-ui-map and using:
$('#map').gmap('option', 'draggable', true);
However this seems to reload the map and forget all the other existing options. I could redefine them all, but that seems a bit hackish.
Any pointers appreciated.
Thanks!
Found that I don't even need jQuery for this – it's already part of the Google Maps API. Simply do:
map.set('draggable', true);
Too easy! Hope it helps someone.
======
2020 update - you should use:
map.setOptions({ draggable: true });
Google Maps JavaScript API V3.25 update
Note that map.set() does not work in newer versions of Maps API. You have to use map.setOptions()
Source: Google Maps Reference
If you have already created the map previously, you can set several options ( https://developers.google.com/maps/documentation/javascript/reference#MapOptions ) at once like this:
var myOptions = {
zoom:11,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: false
};
map.set(myOptions);
I made a google map app use google map api v3 and kml file. However, sometime it work, and sometime it always zoom to the max level and center is not mine options.center(near Africa).
Why is it?
And my kml file was uploaded to mine Google Map account.
function initialize1() {
var myLatlng = new google.maps.LatLng(30.566991,114.315491);
var myOptions = {
zoom: 10,
center: myLatlng,
overviewMapControl:true,
overviewMapControlOptions: {
opened:true
},
scaleControl:true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map1= new google.maps.Map(document.getElementById("map_canvas1"), myOptions);
var nyLayer = new google.maps.KmlLayer('https://maps.google.com/maps/ms? **************',
{suppressInfoWindows: true});
nyLayer.setMap(map1);
google.maps.event.addListener(nyLayer, 'click', function(kmlEvent) {
var text = kmlEvent.featureData.description;
showInDiv(text);
});
}
Thanks very much,
That behavior occurs when the kml file doesn't exist/can't be found. You haven't provided the URL of the file to allow testing that.
Another thing to check would be the validity of the file:
http://www.feedvalidator.org/
You could also check the KmlLayerStatus provided by the API to see what it reports.
I have a google map embedded in a site that loads a kml file at https://www.getstable.org/who-can-help/therapist-map-kml using KmlLayer. Sometimes the map doesn't load up, I presume because google maps has a strict timeout, and often some of the pins on the map aren't clickable but some are with no clear reason why. Does anyone know what the timeout limit is on kmlLayer and how to increase it? Also is there any reason why sometimes some of the pins aren't clickable (ie no InfoWindow appears when you click a pin and the cursor doesn't change to a hand)?
Here's the code that shows it (some of the fields are templated):
<div id="map_canvas" style="width: 856px;height: 540px;">Loading...</div>
<script type="text/javascript" src="{protocol}://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var the_map = {
options : {
zoom:{embed:zoom_level},
center:new google.maps.LatLng({embed:latitude},{embed:longitude}),
mapTypeId: google.maps.MapTypeId.ROADMAP
},
geocoder : null,
map : null,
init : function() {
this.geocoder = new google.maps.Geocoder();
$('#map_canvas').delegate('a', 'click', function(event) {
window.location.href=$(this).attr('href');
return false;
});
},
load_map : function() {
this.map = new google.maps.Map(document.getElementById("map_canvas"), this.options);
query = encodeURI('{site_url}{embed:map_url}');
var ctaLayer = new google.maps.KmlLayer(query,{
preserveViewport:true
});
ctaLayer.setMap(this.map);
}
}
$(document).ready(function() {
the_map.init();
the_map.load_map();
});
</script>
The Google Servers have an unspecified timeout, but testing shows it to be 3-5 seconds. This timeout is not something you can affect. The solution is to make your server respond faster. This issue almost always comes down to a file that is too big (yours isn't) or from dynamically generating the KML. You need to optimize this and that may mean finding a way to create a static KML file.
Features that are not clickable are almost certainly a problem with your KML. You can validate your KML to check for this:
Feed Validator
KML Validator
You can also test your KML by loading it at maps.google.com.
How to use own map database to display map on a website and use that map to find route and do other stuff ?
You should try the Google Maps API. http://code.google.com/apis/maps/index.html
You can store locations or routes in your database and use the Maps API to display them. Not sure if this is what you're looking for, but I've found their API really easy to use.
That is an absolutely massive task, I'm not sure I understand your question correctly... You've tagged this with Javascript, Web-development and map - so presumably you want to know how to implement a front-end that renders a map to a web page, and then performs custom pathfinding and other logic. Surely I'm misunderstanding you! :D
The O'rielly RESTful Web Services book uses a map service as its operative example throughout the book, so you may find it useful, at least for the design of your service front end. It doesn't delve into the implementation very deeply, particularly the actual mechanics of map image generation, as it is primarily concerned with the design of the service interface from an HTTP perspective. It also doesn't treat very much with the client-side logic that would be involved in dragging, zooming and the like.
You have two options in order to calculate routes depending on your database.
If your database has clean and accurate address names then you can easily use the google maps API that can be found here: https://developers.google.com/maps/documentation/directions/.
Bare in mind that you can only execute 2500 requests per day with the free version.
On the other hand if you have a network defined on your db (have the roads in a nodes and arcs manner) then you can implement Dijsktra's algorithm.
Have a look here: http://www.vogella.com/articles/JavaAlgorithmsDijkstra/article.html
Because of the fact that the network should be loaded from the database in order to calculate the best route I suggest the singleton pattern.
An OpenSource way to do this, which I would recommend in most cases, is using GeoServer and OpenLayers.
GeoServer can read gegraphic data from all the major databases and be used as host for the widely used standard GeographicgWebServices WMS and WFS.
OpenLayers is a JavaScript API to show your map on the webpage.
I recently implemented something like this. I realize it is an old question but Google has the javascript api v3 out for Google Maps and it works great.
https://developers.google.com/maps/articles/phpsqlajax_v3
This page helped me implement the entire system. Works great. You can also use php to update and edit the entries on the map.
You need xml pages and others but here is the map html page just to give you an idea of the javascript it entails.
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>PHP/MySQL & Google Maps Example</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.6145, -122.3418),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
</head>
<body onload="load()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>