Report points on a street - google-maps

it's a couple of days i'm struggling with this problem i cannot solve.
I have an Android application sending me a certain number of coordinates; each coordinate has a value related to it and what i need to do is to report this points on a map, visualizing different marker colors depending on this value.
I'm tryng to do it via Google maps API.
I have all the points stored in a fusion table and i'm able to build a layer with proper style, but the problem is that these points do not correspond on real streets on the map and it is obviously necessary that they do.
What i am tryng is to use the DirectionsService, as suggested here:(google maps geocoder - point on a street) and i know that gps cannot be so precise.
The way i tried til now is to put all my points in an array (without using the fusion table layer, cause i dunno how to connect the two tehings) and then for each point make a request to the DirectionsService (i know it's terribly slow, but for now i need it to be precise and if you have suggestions it's well accepted) but in this way only certain points are well represented while other have a null response from the service and are not reported at all.
Any suggestion?
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var urbino = new google.maps.LatLng(43.72333292, 12.63552457);
var mapOptions = {
zoom:10,
center: urbino
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
}
function calcRoute() {
var start, end;
var waypts = [new google.maps.LatLng(43.72333292,12.63552457), new google.maps.LatLng(43.72333292,12.63552457), new google.maps.LatLng(43.72333292,12.63552457), new google.maps.LatLng(43.72333292,12.63552457)............];
console.log(waypts.length);
$.each(waypts, function(index){
if(index < waypts.length -1){
var request = {
origin:waypts[index],
destination:waypts[index+1],
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
console.log(index);
console.log(response);
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
console.log('ok');
}
else{
console.log('non ok');
}
});
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function(){
calcRoute();
});
EDIT
Came out that supplied points were totally wrong (but that was not my job so i just took them), now with new points directionsService works fine even with just some waypoints.
The problem still remains in part, even if much smaller, cause points supplied from the fusion table are not precisely on the street on all the route. So i still need to figure out how to put pieces together, meaning using the route of the directionsService, styled with the fusion table layer. :)

Used points were totally wrong, now with right set of coordinates, the path supplied by fusion Table is almost perfect, on all the streets long, even though there are some points not really on the streets.
So, what i have to figure out now is how to put fusionTable layer (styled) with directionsService (precise).

Related

Geolocation directs to building entrance and not defined LatLng

I am currently adapting and cleaning up a very simple Google Maps application for users to get walking directions from their current location (determined by GeoLocation) to preset markers designating artworks that are defined with specific LatLng values to the sixth decimal.
There is still a lot of extraneous code in the example that needs to be removed, but the core function is working as expected - almost.
When the user selects a destination from the values supplied in a dropdown menu and hits enter, a lined path appears from where they are to the selected destination - using the calcRoute function.
However, the path is consistently directing the user to the nearest building entrance - which in some cases is several hundred feet away from the LatLng defined in the code. This does not appear to be random inaccuracy, as the path always ends at a building entrance.
I am sure this is a very simple mistake I am making, but I haven't found any posts that seem to address this odd behavior.
I am using Windows 8 and Chrome at the moment for the base development in an attempt to get a working version and then test on other browsers. I appreciate any advice, and will supply all the example code if needed. Here is a sample of some of the typical lines in this app:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true">
</script>
<script>
var locTreeWrapIII = new google.maps.LatLng(48.006640, -122.203680);
</script>
// Tree Wrap III
var markerTreeWrapIII = new google.maps.Marker({
map: map,
position: locTreeWrapIII,
title: 'Tree Wrap III'
});
var infoTreeWrapIII = new google.maps.InfoWindow({ // info window
maxWidth: 400,
content:
'<img alt="" src="https:\/thumbnail-clothespins.jpg" />' +
'<strong>' + markerTreeWrapIII.title + '<\/strong><br \/><br \/><br \/>
Read more about Tree Wrap III'
});
google.maps.event.addListener(markerTreeWrapIII, "click", function () {
document.getElementById('end').value = "(48.006500,-122.203500)";
infoTreeWrapIII.open(map, markerTreeWrapIII);
infoTreeWrapIII.setZIndex(999);
});
google.maps.event.addListener(markerTreeWrapIII, "dblclick", function () {
map.panTo(locTreeWrapIII);
});
google.maps.event.addListener(infoTreeWrapIII, "closeclick", function () {
infoTreeWrapIII.setZIndex(1);
infoTreeWrapIII.close();
});
function calcRoute() {
// Retrieve the start and end locations and create
// a DirectionsRequest using WALKING directions.
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.WALKING
};
// Route the directions and pass the response to a
// function to create markers for each step.
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
function attachInstructionText(marker, text) {
google.maps.event.addListener(marker, 'click', function () {
// Open an info window when the marker is clicked on,
// containing the text of the step.
stepDisplay.setContent(text);
stepDisplay.open(map, marker);
});
}
My guess is that the WALKING travelling mode restricts paths to sidewalks, and thus to the entrances of buildings. Your code looks fine.
According to the API documentation:
walking requests walking directions via pedestrian paths & sidewalks (where available).
so it is very likely that Google has geocoded the the specific LatLng as an address, and is attempting to deliver the walker directly to that address.
A possible, though crude, solution would be to append a final LatLng to the path returned by the Directions Service that is the desired position.

List of bus stops from Google Maps

I am trying to build web app where you input your address and it will give you list of bus stops in your area. I want to use Google Maps for this, but i can't find the way to use them for this. Is there any way to get list of points on maps in, lets say, JSON or XML format? I tried Google Maps Places API, but it didn't work this way. Only thing i found is this example - http://gmaps-samples-v3.googlecode.com/svn/trunk/localsearch/places.html but thats not what i need.
So, anyone knows?
The Google Places API does have stop information on there but you need to form your query very specifically to make it work.
The key is using the nearby search with rankby=distance and radius= and types=bus_station
The default rankby prominence rarely shows bus stations.
Sample query:
https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=49.89458,-97.14137&sensor=true&key=your_key&rankby=distance&types=bus_station
I think it can help you
<script>
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
var map;
var infowindow;
function initMap() {
var pyrmont = {lat: 38.06908229560463, lng: 46.31730562744135};
map = new google.maps.Map(document.getElementById('map'), {
center: pyrmont,
zoom: 15
});
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch({
location: pyrmont,
radius: 1000,
types: ['bus_station','transit_station']
}, callback);
}
function callback(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
</script>
Ali Seify's answer is correct except that the API document states that only the first element in the types parameter will be used by the API and the transit_station type is the correct type for bus stop.
Also, in order to get the nearest bus stop, suggest to use parameter rankBy: google.maps.places.RankBy.DISTANCE and radius parameter cannot be used in this case.
service.nearbySearch({
location: pyrmont,
rankBy: google.maps.places.RankBy.DISTANCE,
types: ['transit_station']
}, callback);
This is not a service that Google provides. They surely have all of the stuff you need on record, but they do all of their calculations internally.
One option (which might be a bit difficult) is to mine public transportation schedules for their bus stop locations. It might be an option if you have a small region (ie. a city) that your web app is to support. It's risky because if the pages change then you'll have to reconfigure the data mining application, but you'd still have the same problem trying to mine the data from Google (or somewhere else) - if you could find a way to get a bus stop list with locations and built your app around it, it could change at any time and break your application.
You could use Google Fusion Tables for this. You would have to enter the data yourself though, unless someone else already have entered it. Google maps API supports Google Fusion Tables.

what Am i doing wrong in performing reverse geocoding

I am trying reverse geocoding, I have three coordinates and I want to convert them to addresses, I have used following method.
var point1 = new google.maps.LatLng(latLng1);
var point2 = new google.maps.LatLng(latLng2);
var point3 = new google.maps.LatLng(latLng3);
where latLng1, latLng2, latLng3 are coordinates.
and then further I want to use these addresses to following code to create a path
var request = {
origin:location1,
destination:location2,
waypoints:[{location: point1}, {location: point2}, {location: point3}],
travelMode: google.maps.DirectionsTravelMode.WALKING
};
but it never displays anything.
Am I doing it right, One more thing it says in google APIv3 that we can either use string of address in waypoint or latlng. how we can use latlag in waypoint.
Are you showing your whole code here?
Please, post your latLng1 value, for example.
Also, show your directionsService call. I do like that:
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else alert(status);
});
In any case - try do alert() your request statuses, directions may not be available for these points.
By the way you don't need to reverse geocode your coordinates to addresses to get directions. You can use coordinates in waypoints, which is what you doing here.

google geocoder service

I'm trying to use Google geocoder service to get the coordinates of cities input by the user. However looks like there's some problem initializing the LatLng() object (latlngCity), and the map won't show up. The code is as following:
var map;
var latlngCity;
function initialize() {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'address': 'Lisbon, PT'}, function(results, status) {
if(status == google.maps.GeocoderStatus.OK) {
latlngCity = results[0].geometry.location;
}
});
var myMapOptions = {
zoom: 8,
center: latlngCity,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myMapOptions);
}
For simplicity, I'm inserting the address city string myself. Variables map and latlngCity are globals. Is there anything wrong with this code?
Thanks very much.
You need to move the map creation code into the geocode callback (or alternatively create the map with some default position and then re-center the map inside the callback).
In your code, latlngCity is undefined by the time of map creation while geocode is still being executed (asynchronously).
Hope this makes sense. Otherwise I'll provide some code. Let me know.

Sencha directions zoom

All,
When I use the Directions-service from Google Maps, it seems like the map always goes to zoom level 0 (I get an overview of the whole map).
When I set the code for the directions in comment, the zoom level is working well.
This is my code:
/**
* Update route
*/
updateRoute: function ()
{
// route
var start = "Belgium";
var end = "France";
var request =
{
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
directionsDisplay.setMap(this.items.items[0].map);
directionsService.route(request, function(response, status)
{
if (status == google.maps.DirectionsStatus.OK)
{
directionsDisplay.setDirections(response);
}
});
}
This is what I get:
Hopefully someone can help me with this?
Thanks in advance!
The map automatically zooms out to the range required to display the entire route.... I tried ur code.... If you select the start and origin as two places closer (preferably the same area/city) then the zoom level goes down to like 15-16 depending on the distance....
Since you've basically selected Belgium and France (both of which are really broad areas and not a single map point (so to speak) the zoom level goes down to 1 :)
Hope this helps