I want to display a couple of routes on a map, but I would prefer to first draw them with google maps. For example, I got directions from Seattle to San Diego, then moved things a bit, and the link looks like this.
I know that I can use the DirectionsRenderer to draw a polyline connecting Seattle and San Diego like this:
function renderDirections(result) {
var directionsRenderer = new google.maps.DirectionsRenderer;
directionsRenderer.setMap(gMap);
directionsRenderer.setDirections(result);
}
var directionsService = new google.maps.DirectionsService;
function requestDirections(start, end) {
directionsService.route({
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.BICYCLING
}, function(result) {
renderDirections(result);
});
}
requestDirections('Seattle, WA', 'San Diego, CA');
What I would like to know is if there is a way to pass in the link as the directions request. The link contains waypoints, my modifications to the default route.
It is possible and you are on the right track. It is hard to understand the API. I believe that you have to set the waypoints in the DirectionRequest object of the DirectionsService when you call the route method. I don't think you can pass in a link, but you can create an object or Array of waypoints first.
If you want, you can also specify the optimizeWaypoints boolean.
Check out the DirectionsRequest Object.
waypoints Array. Array of intermediate waypoints. Directions will be calculated from the origin to the destination by way of each waypoint in this array. Optional.
Yes, you can use the DirectionsRenderer so long as you pass your start and end points into a DirectionsRequest, and pass that into a DirectionsService object. Once you call .setDirections it'll draw the polyline for you. From the API documentation at.
Set the renderer to use the result from the DirectionsService. Setting a valid set of directions in this manner will display the directions on the renderer's designated map and panel.
If what you were getting at was drawing the polyline yourself (though I don't see why it would be necessary), the individual points in the path can be derived -- DirectionsResult contains an array of DirectionsLegs which contains an array of DirectionsSteps which contains a .path property, which is an array of latlngs. (whew!)
Related
I have problem during working in Google Earth Engine. I was processing some vector files. And i am getting below code:
The geometry has too many vertices. You can try to simplify it using:
// Get a feature collection and subset the first feature.
var feature = ee.FeatureCollection("TIGER/2018/States").first();
// Simplify the feature - think of max error as resolution.
// Setting to 100 means that the geometry is accurate to
// within 100 meters, for example.
var featureSimple = ee.Feature(feature).simplify({maxError: 100});
or for a ee.FeatureCollection:
// Get a feature collection.
var featureCol = ee.FeatureCollection("TIGER/2018/States");
// Simplify each feature in the collection, by mapping the
// .simplify() function over it.
var simplifiedCol = featureCol.map(function(feature) {
return feature.simplify({maxError: 100});
});
Google Maps Api: I have the objects like (sure just part of code...):
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var result = directionsDisplay.getDirections();
I need to know the start and destination address(string format) of the route.
For instance I can get LatLng like:
result.routes[0].overview_path[0]
For that you probably want to use the DirectionsLeg.start_address and DirectionsLeg.end_address values.
See https://developers.google.com/maps/documentation/javascript/directions#Legs
So result.routes[0].legs[0].start_address for the starting address of the first leg of the directions route.
And result.routes[0].legs[result.routes[0].legs.length-1].end_address
for the ending address of the last leg of the directions route.
I'm using Google Maps to get an autocomplete list of cities.
I used to use item.geometry.location.kb as the longitude and item.geometry.location.jb as the latitude, but they are not defined since today/yesterday.
Apparently, one has to use item.geometry.location.lng() and .lat() instead.
I didn't know that and I have an app using item.geometry.location.kb and jb in Google Play and the App Store.
So my apps are not working any more.
Why has a change has been made and how can I revert to kb and jb?
autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addListener(autocomplete, 'place_changed', function(event) {
var item = autocomplete.getPlace();
curLon = item.geometry.location.kb;
curLat = item.geometry.location.jb;
// ...
Don't use undocumented properties of the Google APIs. They can and do change with every release.
geometry.location is a google.maps.LatLng object, and the documented methods to get latitude and longitude are .lat() and .lng().
I've a layout template with a left sidebar where I show information of Location passed entities as an array.
Also in this template, I show a object Map with all of this locations.
I want to do click on a Location of my sidebar and then on the same template show another object Map replacing the previous with information of this Location. Keeping the sidebar with the information and not doing new queries on the database.
How to achieve this?
Ajax? Conditional layout?
I read this article but I don't understand how to solved my problem: http://twig.sensiolabs.org/doc/recipes.html#overriding-a-template-that-also-extends-itself
PD: I'm using Twig template and Symfony2
You could have a separate template for printing object map and, as you guessed, this would have to be done using AJAX. You would pass the data you want to show on map (not id as you don't want to query database again) and the controller would return formatted HTML.
However, this seems to me a bit overkill. I would always consider doing JS (with optional framework) in order to swap the content of sidebar with Map object.
It really depends on which map API do you use. If it could be controlled via JS I would look no further. It it could not, well then, AJAX is your natural choice....
UPDATE:
OK, what you should do is create initial Map object that will be modified later on:
var theMap = null;
function initializeMap(){
var mapOptions = {
center: new google.maps.LatLng(some_latitude, some_longitude),
zoom: 8, // goes from 0 to 18
mapTypeId: google.maps.MapTypeId.ROADMAP
};
theMap = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
// you must have some element with ID = 'map_canvas'
}
some_latitude and some_longitude are fairly unimportant as you will most likely set new coordinates in a few moments.
Now assuming (but not crucial at all) that you use some of the JS frameworks (I prefer jQuery) you could bind click event to those location links:
var onlyMarker = null;
$('.location').click(function(){
var $t = $(this);
var newLatLang = new google.maps.LatLng($t.attr('data-lat') ,$t.attr('data-lng'));
if ( onlyMarker == null ) {
onlyMarker = new google.maps.Marker({
position: newLatLang
map: theMap,
title: $t.attr('title')
});
}else{
onlyMarker.setPosition(newLatLang);
}
});
Now, relying on HTML5's 'data-*' attibutes is not good idea in particular as if you use any other version lower you will most likely end-up with invalid markup. The workaround is to for link (<a>) to carry id/key to LatLng object, for example:
// initially generated from `AJAX` or in `Twig` loop
var allLatlangs = [
new google.maps.LatLngf(some_latitude, some_longitude),
new google.maps.LatLngf(some_latitude, some_longitude),
new google.maps.LatLngf(some_latitude, some_longitude),
];
$('.location').click(function(){
var id = $(this).attr('id');
var newLatLang = allLatLang(id);
//....
// everything else is the same
// ....
});
Don't forget to include Maps API with proper API key:
https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&sensor=true
In order to obtain valid API key follow this link: API KEY HOW-TO
This link basically covers key steps that I have described here so study it and it should all come together nicely.
Also, if you're unsure how to retrieve some things from Maps you should consult reference:
REFERENCE which has every method call described pretty good
Remember not to execute any of this code until everything is being loaded.
Hope this helped a bit :)
Based on the Google Maps JavaScript API v3 documentation, google.maps.Polygon class's getPath() function returns an MVCArray. In a straightforward case, a Polygon's path can be a single array of LatLngs that are converted to the MVCArray type upon being passed into the google.maps.Polygon class's setPath() function.
The above case is what I'm dealing with currently. I pass in an array of LatLngs, and return (what I assume is) an MVCObject when I call getPath() on my Polygon object. My question is: How do I convert this MVCObject back into a single array of LatLngs that form the Polygon's shape? Is there some built in Google Maps API v3 way that I'm missing? I feel like there has to be some sort of obvious built in conversion function or something in the API that's eluding me.
Any help would be appreciated.
When you call Polygon.getPath()api-doc, the return is an MVCArrayapi-doc of LatLng instances that represent the first path of the Polygon. You can directly get to the members of the MVCAarray in two ways:
Call MVCAarray.getArray, which will return the underlying JavaScript Array that contains LatLng members.
Use MVCArray.getAt( index ), which will return whatever is at that index in the MVCArray (a LatLng in this case). This provides you a way to setup a JavaScript for loop to iterate over the members of the array.
You can also indirectly work with the members of the MVCArray by using the forEach(callback:function(*, number)) function. In this case, you must pass a callback function that accepts two parameters:
The actual member element of the MVCArray.
The array index where that element is located.
var polygonBounds = polygon.getPath();
var bounds = [];
for (var i = 0; i < polygonBounds.length; i++) {
var point = {
lat: polygonBounds.getAt(i).lat(),
lng: polygonBounds.getAt(i).lng()
};
bounds.push(point);
}