Changing origin and destination value on click on Google Maps v3 - google-maps-api-3

I want to change my origin and destination (Lat and Lng) on click, this is my atual code
ser.route({ 'origin': new google.maps.LatLng(-23.563594, -46.654129), 'destination': new google.maps.LatLng(
-23.563672, -46.640396), 'travelMode': google.maps.DirectionsTravelMode.DRIVING},function(res,sts) {
if(sts=='OK')ren.setDirections(res);
})
I want to change this values to draw a path, for example, I click on one point, them click in another point, so it get this values and draw a path.
I have a path but only with point A and B, I want to create this points clicking on map.
Here is my test with the full code, if needed.

Add a MapsEventListenter listening for the click on the map.
The Map click event has a latLng property. Capture the first one for your start location, the second for your end address (you will probably want to add some logic to either let your user drag them or delete them if they get them wrong).

Related

Javafx How to undo shape drawings on another shape

I am implement a screenshot app with javafx, like lightshot. I am done with almost all the functionalities, but I am now stuck at the undo operation. I am adding the free draw, line arrows, rectangles etc on a rectangle like this :
selection.setCursor(Cursor.CROSSHAIR);
Arrow arrow = new Arrow();
selection.setOnMousePressed((evt) -> {
rootPane.getChildren().remove(arrow);
arrow.setStartX(evt.getX());
arrow.setStartY(evt.getY());
arrow.setEndX(evt.getX());
arrow.setEndY(evt.getY());
arrow.setStyle("-fx-background-color:red");
rootPane.getChildren().add(arrow);
});
selection.setOnMouseDragged((evt) -> {
arrow.setEndX(evt.getX());
arrow.setEndY(evt.getY());
});
selection.setOnMouseReleased((evt) -> {
arrow.setEndX(evt.getX());
arrow.setEndY(evt.getY());
});
drawtype = "arrow";
});
Selection is the rectangle that I have drawn, this is an example of how I am adding the arrow. I have tried researching online but I cant seem to get something to point me in the right direction, anyone who can help out here please? Remember, I am not using Canvas or GraphicsContext.
If you want to be able to undo the actions, you need to store the state of your 'drawing'.
In your case undoing the creation of your Arrow element, would be simple rootPane.getChildren().remove(arrow);
You just need to create a Data Structure where you store all actions done by the user (or at least a few). And each action can get reversed.
Example:
ActionType.Add -> action: getChildren().add(xyz) -> reverse: getChildren().remove(xyz)
ActionType.Move -> arrow.setEndX(evt.getX()) -> arrow.setEndX(oldX)
Each action should contain all information needed to reverse it. (The node involved, what was done and how it was before)

List of Soundcloud iframe parameters?

I'm working on a CMS, and want to let users embed Soundcloud tunes and playlists.
I'd like to avoid fiddling with the API - since it doesn't appear to be necessary: )
Instead I just piece together an iframe-src-url with the appropriate parameters.
I was unable to find an official list anywhere, so I've collected my own, from various posts here and elsewhere:
&color=FF4444 // play-button and equalizer graphic (if not &visual=true)
&auto_play=false // shouls be obvious
&show_artwork=true // show the artist-graphic on the left
&show_comments=true // show fans commenst under equalizer
&show_playcount=true // number of times played # bottom right
&hide_related=true // don't force user over to Soundcloud after play
&show_user=false // don't show uploaders name # top left
&show_reposts=false // ?
&liking=fals‌​e // dont show [Like] button
&visual=true // use artist-graphic for background (way cooler)
&buying=false // no Buy (iTunes) button
&sharing=false // no [Share] button
&download=false // no download button
&start_track=4 // start at specific track (for lists)
And guesed : )
&following=false (removes [Follow] when mouseover artwork)
What parameters am I missing?
What I really want is Next and Previous buttons for lists. Do they even exist?
You're missing:
download=true // Show/hide download buttons
sharing=true // Show/hide share buttons/dialogues
start_track=0 // Preselects a track in the playlist, given a number between 0 and the length of the playlist.
Found in the docs.
It looks like next() and prev() and skip(index) are all methods on the widget rather than parameters. You can get around this by keeping an index of the current track and pass in a value to the start_track parameter as a way to get to the next and previous tracks.

How to get longitude and latiitude from Mapcomponent in codenameone?

How to get longitude and latiitude of the point from Mapcomponent in codenameone when user click on certain on the component ?
I have to take user's location(longitude , latitude ,...) when user double click on map and please suggest me how to do it?
You can use getCoordFromPosition(x, y) which will return a Coord object from which you can extract the lat/lon values. Notice that you can also use the new native maps API which is a bit different http://www.codenameone.com/3/post/2014/03/mapping-natively.html

Google map how to display a dragable marker based on coordinates and return new coordinates

I have to write a script for Google Maps V3 which will do the following:
Place a marker on a map based on a set of coordinates and possbibly change the address after the page has been loaded
Allow the user the drag the mark to replace it elsewhere
Collect the new coordinates once the marker has been moved.
The first part is basic enough and should be fine, changing the address after the page is loaded should only be a matter of calling back the same function?
I am not sure where to start on the draggable marker and collecting hew coordinates.
Would anyone know of scripts / API's or where in the doc should I start?
Have you checked the Google Maps Javascript API V3 Reference to see whether the google.maps.Marker class has :
a draggable option
an dragend event
a getPosition method
Hint: The answer might just be "yes" to all three, and you don't need much else to solve your problem.

google maps api v3 exporting kml file of current map

I have a google map component in my application that allows the user to draw polygons, lines, and marker. Now I want to implement a button that allows the user to export a kml file of the stuff that he/she draw in the map.
Any suggestion for the best approach to do so.
Your comments and contribution is highly appreciated
I'll summarize my idea as storing coordinates as the user draws, then when the "Output KML" button is clicked, format the saved coordinate data and place it in a textarea to be copied (unless there's a way to prompt as a download?).
Here's how I save data when the user completes a drawing element:
http://jsfiddle.net/8bwG2/
(I don't know a good way of detecting edits.)
First, add event listeners for each drawing type (line, polygon, marker), to fire when it is complete. You need a separate event listener for each type. Here's one for Polylines, and each listener will return the type of drawing element that was just completed.
google.maps.event.addDomListener(drawingManager, 'polylinecomplete', function(line) {
path = line.getPath();
document.getElementById("action").value += "#polyline\n";
for(var i = 0; i < path.length; i++) {
document.getElementById("action").value += path.getAt(i) + "\n";
}
});
I am placing the coordinates straight into a shared textarea but they should instead go into an array of arrays variable, with one variable for polygons, one for polylines and one for markers.
When reading from these internal variables, convert the Google Maps LatLngs to KML format long,lat,altitude. You will have to get creative with each element's name and description.
Finally, when the KML is requested, loop through the markers, line, and polygon variable to generate KML formatted elements, such as Point-coordinates, LineString, and Polygon-outerBoundaryIs

Resources