Is it possible during dragable routing we can get latitude and longitude value along the routing way
If it have please leave me a link or solution
Thank for help
Use the dragend event.
Add a listener to the route
when the dragend event fires get the points out of the route.
Example of how to iterate through the coordinates in a dragged route (look at the getPolylineXml function)
See my example to get LatLng for all points in route
directionsRenderer.addListener("directions_changed", function() {
var lat = [];
var lng = [];
result = directionsRenderer.getDirections()
var myroute = result.routes[0];
for (var i = 0; i < myroute.legs.length; i++)
{
//console.log(myroute.legs[i].start_location.lat())
lat[i] = myroute.legs[i].start_location.lat();
lng[i] = myroute.legs[i].start_location.lng();
}
i=myroute.legs.length-1;
lat[i+1] = myroute.legs[i].end_location.lat();
lng[i+1] = myroute.legs[i].end_location.lng();
console.log(lat)
console.log(lng)
});
Related
I have a google spreadsheet with processed data nice graphs that can be updated with different source data.
I have a script that can create a google document from a template and populate it with data (with search and replace).
However, I like to add the graphs from the google spreadsheet to the google document.
I've been googling a lot, but can't find a script that I can use/modify to pull of this thing.
A basic start would be highly appreciated.
Update:
I've made some progress
function test() {
SpreadsheetApp.flush();
var Grafieken = SpreadsheetApp.getActiveSheet().getCharts();
var targetDoc = DocumentApp.openById(anID);
var DBody = targetDoc.getBody();
for (var i in Grafieken) {
var Grafiek = Grafieken[i];
var plaatje = DBody.appendImage(Grafiek);
}
However I encountered two issues:
- most importantly, the graphs do not look like in the spreadsheet
- not all the graphs are added (e.g. mixed diagrams are skipped)
UPDATE2
This almost works, I need to know which graph is which.
function test() {
SpreadsheetApp.flush();
var Grafieken = SpreadsheetApp.getActiveSheet().getCharts();
var targetDoc = DocumentApp.openById(DOC_id);
var DBody = targetDoc.getBody();
var Grafiek;
for (var i in Grafieken)
Grafiek = Grafieken[i];
var locatie = DBody.findText('%Grafiek'+i+'%').getElement().getParent().asParagraph().appendInlineImage(Grafiek);
}
}
Almost done:
function test() {
SpreadsheetApp.flush();
var Grafieken = SpreadsheetApp.getActiveSheet().getCharts();
var targetDoc = DocumentApp.openById(DOC_id);
var DBody = targetDoc.getBody();
var Grafiek;
for (var i in Grafieken)
Grafiek = Grafieken[i];
var locatie = DBody.findText('%Grafiek'+i+'%').getElement().getParent().asParagraph().appendInlineImage(Grafiek);
}
}
I use Places library to autocomplete address input. Search is limited to only one city, and I get output like this:
"Rossiya, Moskva, Leninskiy prospekt 28"
How to hide "Rossiya, Moskva"? ...
My query:
function() {
// Search bounds
var p1 = new google.maps.LatLng(54.686534, 35.463867);
var p2 = new google.maps.LatLng(56.926993, 39.506836);
self.options = {
bounds : new google.maps.LatLngBounds(p1, p2),
componentRestrictions: {country: 'ru'},
};
var elements = document.querySelectorAll('.address');
for ( var i = 0; i < elements.length; i++) {
var autocomplete = new google.maps.places.Autocomplete(elements[i],
self.options);
}
You can but you have to replace the value of the input field in two places.
Example:
var autocomplete = new google.maps.places.Autocomplete(input, placesOptions);
var input = document.getElementById('searchTextField');
inside the 'place_changed' event you need to do the following:
placeResult = autocomplete.getPlace();
//This will get only the address
input.value = placeResult.name;
This will change the value in the searchtextfield to the street address.
The second place is a bit tricky:
input.addEventListener('blur', function(){
// timeoutfunction allows to force the autocomplete field to only display the street name.
if(placeResult){ setTimeout(function(){ input.value = placeResult.name; }, 1); } });
The reason why we have to do this is because if you only add the event listener for blur, google places will populate the input field with the full address, so you have to 'wait' for google to update and then force your change by waiting some miliseconds.
Try it without the setTimeout function and you will see what I mean.
EDIT
You can't. I had it the other way around, that you were just looking for a city. There is no way to only print out the street name (I'm assuming that's a street name) from the address component.
OPPOSITE OF WHAT WAS ASKED
From the docs:
the (cities) type collection instructs the Place service to return results that match either locality or administrative_area3.
var input = document.getElementById('searchTextField');
var options = {
bounds: defaultBounds,
types: ['(cities)']
};
autocomplete = new google.maps.places.Autocomplete(input, options);
in result u have hash and from it u can get part what u want:
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
now from "place" u can get it
place.geometry.location.lat()
and for address
place.address_components[0] or place.address_components[1] ...
depends on what u want to get
I had a very similar problem which indeed was solvable. This in an Angular 2 project but it should be applicable elsewhere as well. I filter my results for establishments, and wanted to show only the name and hide the address part of the result. This did the trick for me, a function executing once you select a suggestion:
getAddress(place: Object) {
this.zone.run(() => {
this.establishment = place['name'];
});
where zone is an NgZone component injected in the constructor and this.establishment is the variable tied to [(NgModel)] in the input field.
Inside place_changed set a timeout function:
var streetString = place.address_components[0] or place.address_components[1];
window.setTimeout(function() {
$('input').val(streetString);
}, 200);
This solution worked for me.
I'm using Google Maps and Google Geocoding service for my location service application. I use Google Geocoding service for translating address to lat/lng position. My problem is how to automatically find an appropriate zoom for a certain address like the maps.google.com does.
For example, when I search a street in maps.google.com (e.g. Cisitu Baru, Bandung), it will show the street in smaller zoom. When I search a region (e.g. Bandung), it will show larger zoom. And a larger zoom for province (e.g. Jawa Barat / West Java), and so on.
I have tried both
var geocoder = new google.maps.Geocoder();
geocoder.geocode( {
'address': someAddress
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
console.dir(results);
//cut
map.panToBounds(results[0].geometry.bounds); //setting bound
//cut
}
});
and
//cut
map.panToBounds(results[0].geometry.viewports); //setting bound
//cut
(Honestly, I still don't know what's the difference between bounds and viewport and what are their uses from code.google.com/apis/maps/documentation/javascript/geocoding.html)
but both still don't display the map in appropriate zoom.
Right now, I use a small hack like this
var tabZoom = {
street_address: 15,
route: 15,
sublocality: 14,
locality: 13,
country: 10
};
//cut
map.setCenter(results[0].geometry.location);
if (tabZoom[results[0].types[0]] != undefined){
map.setZoom(tabZoom[results[0].types[0]]);
} else {
map.zetZoom(10);
}
//cut
Is there other solution? (Or anything from Google Map API that I don't know yet?)
Thanks!
use GLatLngBounds class
an example:
// map: an instance of GMap2
// latlng: an array of instances of GLatLng
var latlngbounds = new GLatLngBounds( );
for ( var i = 0; i < latlng.length; i++ )
{
latlngbounds.extend( latlng[ i ] );
}
map.setCenter( latlngbounds.getCenter( ), map.getBoundsZoomLevel( latlngbounds ) );
^
The trick is to add the list of all points that need to be visible on the map simultaneously into a GLatLngBounds object. The Google Maps API can do the rest of the maths.
or in v3 you can use LatLngBounds class (similar to GLatLngBounds in v2), link: http://code.google.com/apis/maps/documentation/javascript/reference.html#LatLngBounds
for an example
better check this out: http://unicornless.com/code/google-maps-v3-auto-zoom-and-auto-center
use viewport of the result geometry. if your search result does not have specific bounds, you will get an error with geometry.bounds
viewport gives you best view for the result.
map.fitBounds(results[0].geometry.viewport);
I want to remove an individual marker from Google map. I am using version 3 API. I know how I can remove all the markers by maintaining a markerArray and setting map null for all.
For removing one by one, I am thinking to make a key value pair combination. So that I give a key and remove the particular marker. I need help over this.
Following is the code, that I use to dram marker:
function geoCodeAddresses(data) {
var markerInfo = {addressKey: '', marker:''};
for (var i = 0; i < data.length; i++) {
myLocation = data[i];
geocoder.geocode({"address":myLocation}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({map:map, position:results[0].geometry.location});
// checkpoint A
alert(myLocation);
/*
markerInfo.addressKey = myLocation;
markerInfo.marker = marker;*/
//mArray.push(markerInfo);
}
});
}
}
I will search for addresskey and remove the marker from mArray. But I get last value every time in geocode callback method. And one object got pushed every time. the var myLocation always give me the address of the last index of my array. If I alert it at check point A.
My approach is right?
Your problem is this line:
mArray.push(markerInfo);
That doesn't push the values of markerInfo into your array. It pushes a reference to markerInfo into your array. Now, on your next iteration of the loop, when you change the value of markerInfo, it changes the value pointed at by the references in the array too. So your array ends up having elements that all have the same value.
Try this instead:
mArray.push({addressKey:myLocation,marker:marker});
If that doesn't work, then this:
mArray.push({addressKey:data[i],marker:marker});
This question already has an answer here:
google maps api v3 - nearest streetview
(1 answer)
Closed 9 years ago.
I'm using ipinfodb.com for a while to get the Latitude and Longitude from the user IP to view the google streetview. But recently ipinfodb has changed their database, and most the latitude/longitude values are changed, because of which I dont get the streetview.
I'm using "Google Maps Javascript API V3 Services" but not sure on how to the next and nearest possible GoogleStreetview. Could you please suggest.
Regards
The API has a getPanoramaByLocation method in StreetViewService Class
Below is an example of how to get a streetview within a given radius around the given latLng position, note that if the radius is less than 50 meters the nearest panorama will be returned
var streetViewService = new google.maps.StreetViewService();
streetViewService.getPanoramaByLocation(latLng, radius, function(data, status)
{
if (status == google.maps.StreetViewStatus.OK)
{
var nearStreetViewLocation = data.location.latLng;
//...
}
});
radius doesn't guarantee the closest street view point. For example: if the view point is 10m away but you define your radius as 1000 then the closest isn't selected. So if you have several points (some really close, some really far) then I would still use iteration:
var streetViewService = new google.maps.StreetViewService();
var radius = 10;
streetViewService.getPanoramaByLocation(latLng, radius, handler);
function handler(data, status) {
if (status == google.maps.StreetViewStatus.OK) {
var nearStreetViewLocation = data.location.latLng;
//...
} else {
radius += 50;
streetViewService.getPanoramaByLocation(latLng, radius, handler);
}
};