Map route not working in Titanium Appcelerator - google-maps

i'm having some trouble with Maps Route y Maps V2 on Android. So the problem is when i put a route, like this:
var cord1= {
latitude:29.078685,
longitude:-110.971205,
};
var cord2= {
latitude:29.081496,
longitude:-110.959232,
};
var route1 = [cord1, cord2];
var route = MapModule.createRoute({
points : route1,
color : "red",
width : 5.0
});
$.mapview.addRoute(route);
And yeah, now i have a map route in my map, but the route is straight, totally straight
Picture of the map route!
The route is not using the streets, is just a straight line, not sable at all, can you help me?
My specifications:
Mac OS Maverick
Module: Ti.map (API V2)
Titanium SDK 3.2.2.GA
Titanium Studio, build: 3.2.1.201402041146
(c) Copyright 2012-2013 by Appcelerator, Inc. All rights reserved.
Build: jenkins-titanium-rcp-master-95 (origin/master)
Date: 04 February 2014, 11:47:38

You need more coordinates not just a start an end but many points in between. Since this is just one route, your coordinates must be stored in an array consecutively. That array should be used for the points property when creating a route. Here's an example from appecelerator's documents and the route examples are at the very bottom of the page: http://docs.appcelerator.com/titanium/3.0/#!/guide/Native_Maps_and_Annotations
Like this:
var _points = []; // The array used to contain the points in a route
//Your coordinates
var cord1= {
latitude:29.078685,
longitude:-110.971205,
};
_points.push(cord1);
var cord2= {
latitude:29.081496,
longitude:-110.959232,
};
_points.push(cord2);
// Create your route
var route = MapModule.createRoute({
points : _points,
color : "#f00",
width : 5.0
});
// Add route to map!
$.mapview.addRoute(route);

In titanium if you provide only two points in route then it will draw a straight line between those points. If you want to make more accurate route, then try to provide more [cords] points.
try KitchenSink

I too was stuck with the same problem But find a solution to this . The solution is using a Google Places API that provides you points between your starting and destination points as a result a more accurate route is drawn on the map!!!!Hope this works for you .

Related

Loading geoJSON to Cesium does not work but I get no errors

I try to pass data from PostGIS to Cesium, I believe the simpler way is to use GeoJSON.
To test it I do a query to my PostGIS to get some geoJSON data
SELECT ST_AsGeoJSON(mygeom)
FROM mytable where id = 370;
then I copy the result to a cesium sandcastle to see how it works
var viewer = new Cesium.Viewer('cesiumContainer');
const greenPolygon = viewer.entities.add({
name: "Green extruded polygon",
polygon: {
hierarchy : Cesium.GeoJsonDataSource.load({"type":"MultiPolygon","coordinates":[[[[386788.842267334,4204512.29371444],[386804.47751787,4204512.29371444],[386804.47751787,4204510.66293459],[386788.854170836,4204510.66293459],[386788.842267334,4204512.29371444]]]]}),
extrudedHeight: 100000.0,
material: Cesium.Color.YELLOW.withAlpha(0.5),
outline : true,
outlineColor : Cesium.Color.BLACK,
closeTop: true,
closeBottom: true
},
});
viewer.zoomTo(viewer.entities);
I get no errors in the cesium sandcastle console, but I also see no polygon on the map. The geometry in my PostGIS table is geometry(MultiPolygon,2100), I dont know if this is the issue.
Please advice
Thanks
CesiumJS will not understand your coordinates(ex 386788.842267334,4204512.29371444) defined in your custom spatial reference system.
You must specify coordinates using geographic latitude, and longitude.

Cannot find POI via google-places-api that can be found on google-maps and google-plus

I am trying to find a specific listing via the google-maps-places API, but I don't get any results. This is strange to me, as there is a Google+ page and also a google-maps entry.
Let's take a look at the links:
Google+:
https://plus.google.com/115673722468988785755/about
Maps:
https://www.google.de/maps/place/AMWAY+Beratung+%26+Vertrieb+Haegebarth/#53.171976,9.465828,17z/data=!3m1!4b1!4m2!3m1!1s0x47b106116fc69d69:0xe17811ab2780c71d
If I use the very same coordinates from the maps entry in my nearby search and use the name from the entry as the keyword (or location for what it's worth) the results is empty.
Places-API (with exact same coordinates):
https://maps.googleapis.com/maps/api/place/nearbysearch/json?sensor=false&radius=2000&name=amway&location=53.171976,9.465828&language=de-DE&key=YOURKEY
I can of course imagine that the db for the Google+ POIs is a different one. But then again I don't see how the maps api does not find what I can find on the maps web app.
Thanks a lot for any help!
Try something like this:
map.places.nearbySearch({
location: latLng,
rankBy: google.maps.places.RankBy.DISTANCE,
types: ['shop'], // optional
name: "AMWAY Beratung & Vertrieb Haegebarth" // optional
},function(results, status){
if (status == google.maps.places.PlacesServiceStatus.OK) {
// The thing you need should be result[0]
// console.log(results[0]);
if (results[0].name == "AMWAY Beratung & Vertrieb Haegebarth") { // optionally check the type
// You have your place :)
}
}
}
What a workaround! Rumours are that the Google Maps JS API v3.20 or later will allow us to trigger click events on POIs, thereby getting Place objects directly.

How to have physical location using google map api

I am relatively new to web development. I am trying to extract a physical location from the longitude and latitude using google map (i think google.map would be right for this). I have already written this code in JADE which gives me lat and long. How can i use this value to see the exact physical location. Thanks !
if (navigator.geolocation) {
console.log('Geolocation is supported!');
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
startPos = position;
jQuery("#location_latitude").append(startPos.coords.latitude);
jQuery("#location_longitude").append(startPos.coords.longitude);
console.log(startPos.coords.latitude);
console.log(startPos.coords.longitude);
});
}
A am sure you will find solution looking in the source:
http://html5demos.com/geo
You have to create the map and then locate a marker on it.

Google Maps Custom Projection

I have created a custom Google Maps projection using the Google Maps Javascript API V2. It looks like this, as per the API specification:
function PProjection(levels) {
this.fromLatLngToPixel = function(latlng, zoom) {
...
};
this.fromPixelToLatLng = function(pixel, zoom) {
...
};
this.tileCheckRange = function(tile, zoom, tilesize) {
...
};
this.getWrapWidth = function(zoom) {
...
};
}
Previously, I had my version of the API set to 2.147 and everything worked fine. However, Google recently made the lowest version available 2.193. This new version breaks my projection. Whenever I try to add a marker, I get the following error in Firebug:
d.getNearestImage is not a function
According to this post a new method called
GProjection.getNearestImage(pixel,zoom,centrepixel)
was added in version 2.148, so it kind of makes sense that this problem would occur if I used a version of the API above 2.147. However, there is no note in the reference manual of an official change in the API. I added a dummy method of this name to my projection, but no luck. Any ideas on how to fix my projection or on how to revert to 2.147?
You can request a specific version through this method: http://groups-beta.google.com/group/google-maps-api/web/javascript-maps-api-versioning

overlay geotagged photo in Google Maps?

I want to create a Google map with user uploaded Geotagged photos that show up on my map. I can easily create manipulate my map but I can't seem to find instruction on how to add these geotagged photos.
Here is an example of what I am try to accomplish:
http://maps.google.com/?ie=UTF8&ll=26.892794,-80.055909&spn=0.003875,0.004828&t=h&z=18&lci=lmc:panoramio
I don't have experience working with photos, but I don't think it should be really any different than placing a GMarker on the map at the appropriate coordinates of your photo, and then in the info window of the tag you would output your custom HTML which would include your photo.
Edit: Specific link leading to the GMarker class in the Google Maps API Reference: http://code.google.com/apis/maps/documentation/reference.html#GMarker
You need to create a tile, then create a tile overlay.
var tilelayer = new GTileLayer(myCopyright);
tilelayer.getTileUrl = function() { return "../include/tile_crosshairs.png"; };
tilelayer.isPng = function() { return true;};
tilelayer.getOpacity = function() { return 1.0; }
var myTileLayer = new GTileLayerOverlay(tilelayer);
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.addOverlay(myTileLayer);
The documentation is here, with a great sample map here.
You could use PHP (or another script) to create a KML or GeoRSS file (much like Flickr's KML and GeoRSS feeds) and have the Google Maps API function GGeoXML load the file as an overlay on the map.
See Google's example code here: http://code.google.com/apis/maps/documentation/examples/geoxml-rss.html
That example is actually loading a live GeoRSS feed from Flickr.