I've successfully implemented google map direction service api : https://developers.google.com/maps/documentation/javascript/directions with 'draggble' option enabled. Is it possible to change the text label of Drag button (screenshot attached) on hovering the route ? At present it says: 'Drag to change route'. I need to modify it. I checked the documentation: https://developers.google.com/maps/documentation/javascript/reference, but couldn't find anything for this.
The current code is similar to: https://developers.google.com/maps/documentation/javascript/examples/directions-draggable
Please help me. Thanks in advance!
Update: I just got a down vote for: "There are either too many possible answers, or good answers would be too long for this format. Please add details to narrow the answer set or to isolate an issue that can be answered in a few paragraphs.". The code is available in the provided url and I think there can be only one solution available using google map api. If there's any additional information needed, please add a comment.
Probably my answer will be downvoted, but maybe it will be useful for you. Let's say it's just an idea. So you may change the tooltip of the route after the direction has been changed.
directionsDisplay.addListener('directions_changed', function() {
directionsDisplay.gd.b.setTitle('This is your new tooltip for the route.');
});
But unfortunately at the time of the directions_changed event there are no markers yet, so somehow you should delay setting their title:
for (var i = 0; i < directionsDisplay.b.G.length; i++){
directionsDisplay.b.G[i].setTitle('Marker ' + i + ' tooltip');
}
UPDATE:
A more general code:
directionsDisplay.addListener('directions_changed', function() {
setRouteTitle(directionsDisplay, 'The new tooltip');
});
function setRouteTitle(dirsDispl, newTitle){
var ddObjKeys = Object.keys(dirsDispl);
for (var i = 0; i < ddObjKeys.length; i++){
var obj = dirsDispl[Object(ddObjKeys)[i]];
var ooObjKeys = Object.keys(obj);
for (var j = 0; j < ooObjKeys.length; j++){
var ooObj = obj[Object(ooObjKeys)[j]];
if ((ooObj) && (ooObj.hasOwnProperty('title')) && (ooObj.hasOwnProperty('shape')) && (ooObj.shape.type == 'circle')){
ooObj.setTitle(newTitle);
}
}
}
};
Hope this helps.
Related
I have seen a few examples on Google Groups which demonstrate how to modify the css of the infobox. In this particular example, javascript is used to append a css link to the head of the document:
https://groups.google.com/forum/#!topic/cesium-dev/f0iODd42PeI
var cssLink = frameDocument.createElement("link");
cssLink.href = buildModuleUrl('Path/To/Your/CSS/File.css');
cssLink.rel = "stylesheet";
cssLink.type = "text/css";
viewer.infoBox.frame.contentDocument.head.appendChild(cssLink);
This, however, has not resulted in any changes to the style of my markup.
At best, I have been able to wrap the contents of the infobox by iterating through the entities in the .then function call subsequent to loading a geoJson dataset. When wrapping the contents, I can set style values which are readily apparent in the resulting markup.
var dataSource = Cesium.GeoJsonDataSource.load('../data/mGeoJson.json').then(function(data) {
viewer.dataSources.add(data);
var entities = data.entities.values;
for (var i = 0; i < entities.length; i++)
var entity = entities[i];
if (entity.properties.hasOwnProperty("description")) {
entity.description = '<div style="height: 360px;">' + entity.properties.description
+ '</div>';
}
}
}
This is useful, but does not completely satisfy the requirements of my app.
Could someone provide additional insight into overriding the theme of the infobox, without having to iterate over entities to modify the value of their description properties?
The original solution here wasn't working, because the infoBox is an iframe that has not yet asynchronously loaded when you were trying to modify it.
Instead, you can add an load listener to the iframe, like this:
var viewer = new Cesium.Viewer('cesiumContainer');
var frame = viewer.infoBox.frame;
frame.addEventListener('load', function () {
var cssLink = frame.contentDocument.createElement('link');
cssLink.href = Cesium.buildModuleUrl('Path/To/Your/CSS/File.css');
cssLink.rel = 'stylesheet';
cssLink.type = 'text/css';
frame.contentDocument.head.appendChild(cssLink);
}, false);
This waits for the iframe to become ready to receive the modification, and then applies it.
For what it's worth, I've found success in modifying the theme of the infobox by simply importing my css files in the head of the document. I'm not sure why I wasn't able to modify it directly with stylesheets, as it wasn't previously affecting the infobox's appearance, and this issue was mirrored in the posts that I found in the cesium-dev Google Group. Regardless, it seems to be working just fine now.
I'm hoping someone can help a javascript noob with a caching problem. I'm making a site in Wordpress and I've got a caching plugin installed. I need one div (that's on the sidebar of every page) NOT to be cached as it contains an image and text that is randomly generated on each page load. I've done a lot of reading and testing out of various online solutions, but I can't get one to work. I read that the best way to get around this is to give the div a random ID via Date.now(), but I can't get that to work either. So I found something close, yet it, too, doesn't work (posted below). The div doesn't show on screen, yet its contents show up fine in my source code.
Can anyone fix it for me or suggest something? I am a complete noob when it comes to javascript. Thank you for reading! :)
<script type='text/javascript'>
function randomString(length) {
var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');
if (! length) {
length = Math.floor(Math.random() * chars.length);
}
var str = '';
for (var i = 0; i < length; i++) {
str += chars[Math.floor(Math.random() * chars.length)];
}
return str;
}
var randomId = "x" + randomString(8);
document.write('<div id="' + randomId + '">[autonav display="images,title, page, excerpt" pics_only="0" postid="11" attachment="1" orderby="rand" count=1]</div>');
</script>
I'm trying (with no results) to aply a simple custom width to this validator message:
How can i do it ?
UPDATE: I mean, the message which says "Please select an item from the list" we can supose it has, by default, a width=100px . How can i change this default width to 300px?
This question has already been answered. You can find the answer here. For ease of access the code you'll need is below.
::-webkit-validation-bubble
::-webkit-validation-bubble-arrow-clipper
::-webkit-validation-bubble-arrow
::-webkit-validation-bubble-message
This is Chrome's implementation of styling, however it is not officially standard. Hence consider creating your own popup.
Setting content of bubble
Please consider adding what you have already attempted and what results you would expect.
$(document).ready(function() {
var elements = document.getElementsByTagName("INPUT");
for (var i = 0; i < elements.length; i++) {
elements[i].oninvalid = function(e) {
e.target.setCustomValidity("");
if (!e.target.validity.valid) {
e.target.setCustomValidity("This field shouldn't be left blank/please select an option!");
}
};
elements[i].oninput = function(e) {
e.target.setCustomValidity("");
};
}
})
I am working on integrating Google Maps into a web application and I have a question of possibility.
I am using ASP .Net 4.0 as the basis for the code, but i suspect i will have to use JavaScript to achieve most of this, which is. Basically I want to display a bunch of markers on a map from Lat Long locations i have stored in a database, then have the user be able to draw a box on the map with the mouse, then get back the lat long of the four corners of the box.
If anyone knows how i could do this this would be of great help to me!
Thanks
The complexity of the Google Maps API has kept me scared for years. Recently I stumbled upon a jQuery plugin called GMap3 that does a lot of the heavy lifting for you.
I would suggest that after initializing and all that, you print a Javascript block from your .NET code, with something like this:
var markersFromDatabase = [
[60.164967,24.94758],
[59.956495, 10.764599]
//etc. This array should be printed from your serverside code
];
var markersToBeAdded = [];
jQuery.each(markersFromDatabase, function(indexOfItem, valueOfItem){
markersToBeAdded.push({
lat:valueOfItem[0],
lng:valueOfItem[1],
options: {
draggable: false,
icon: "img/your_awesome_icon.png",
title: "This is an icon from my database!"
}
});
});
jQuery("#map_canvas").gmap3(
{ action: 'addMarkers',
markers: markersToBeAdded
}
);
Edit: I realize now that I only answered half of your question. I'm afraid I have no apparent answer to the selection box. I suspect that you can use addRectangle or, in a worst case scenario, addFixPanel that lets you add a transparent <div> over your map canvas (and then trigger mouse events for that).
Here is one way to do it with Google Maps API 3's overlay editable feature.
Google Maps Overlay Editable
If your question is "How to select multiple markers with a rectangle", you can do something like this:
var markers = []; // This array must be filled with your data
var rectangles = [];
var triggeredMarkers = [];
google.maps.event.addListener(drawingManager, 'rectanglecomplete', updateSelection);
function updateSelection(rectangle){
var lat_max = rectangle.getBounds().getNorthEast().lat();
var lat_min = rectangle.getBounds().getSouthWest().lat();
var lng_max = rectangle.getBounds().getNorthEast().lng();
var lng_min = rectangle.getBounds().getSouthWest().lng();
rectangles.push(rectangle);
for(var i=0;i<markers.length;i++){
if((lat_min < markers[i].getPosition().lat() ? (markers[i].getPosition().lat() < lat_max ? true:false):false)
&& (lng_min < markers[i].getPosition().lng() ? (markers[i].getPosition().lng() < lng_max ? true:false):false)){
triggeredMarkers.push(markers[i]);
}
}
}
The rectangles array is used to hold rectangles in order to be able to erase them later.
But if you just want a simple function that handle Polygons, there is this one that really can be helpful for you. It can be used like this:
var markers = [];
var polygones = [];
var triggeredMarkers = [];
google.maps.event.addListener(drawingManager, 'polygoncomplete', updateSelection);
function updateSelection(polygon){
polygones.push(polygon);
for(var i=0;i<markers.length;i++){
if(google.maps.geometry.poly.containsLocation(markers[i].getPosition(),polygon)){
triggeredMarkers.push(markers[i]);
}
}
}
For rectangles and circles there's this answer that can help you.
I have tried to draw Polygon using Drawing Manager and send the Polygon Coordinates to PHP script(to store in Database).
1)i have coded editable option as 'true' for polygon. But i am not to
edit the polygon.I am not to find what i did wrong?
2)Also i try to get
Polygon paths using getPaths method..it is returned as array..How do i
check this coordinates are correct. If i put in alert in displays as
'Object[] Object'.Please help me to solve these problems.
You need to set the drawing mode to true (to enable map interactions). the following code will do the trick :)
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
drawingManager.setDrawingMode(null);
});
with regards to the 2nd part im currently working on that now. use console.log instead of alert.
For the path:
var thisPath=polygon.getPath();
for(i=0;i<thisPath.length;i++){
var latlng=thisPath.getAt(i);
pathString= pathString+', '+ latlng.lat()+' - '+ latlng.lng()+'\n'
}
alert (pathString);
For part 2, sharingStuff code would work, I preferred for the path to be a json object,
vertices = this.polygon.getPath();
var points = [];
// Iterate over the vertices.
if(this.polygon.getMap() == null){
return false;
}
for (var i =0; i < vertices.length; i++) {
var xy = vertices.getAt(i);
points.push(xy.lat() +"," + xy.lng());
}
return JSON.stringify({points: points});
either method is fine, just thought I'd give you another option. :)