Using python herepy API integration and am route_v8 version.
Calling the route API with polyline return gets me the new data but old polyline (from previos call). If I do the call again I become the new/correct one. I checked directly in the response and the result is the same polyline. Any ideas why this could happen?
Previous call results (start/end geolocation of first stop and polyline for the map):
end: {lat: 45.8223962, lng: 14.8474556}
polyline: "BGqv163Ci6t1b-..._E8VAoG8B0K8BkNAsJT6F"
start: {lat: 46.0500373, lng: 14.5069131}
Call with new route - the start and end geolocation change but the polyline stays the same/old one.
end: {lat: 46.2553703, lng: 14.1628533}
polyline: "BGqv163Ci6t1b-..._E8VAoG8B0K8BkNAsJT6F"
start: {lat: 46.0500373, lng: 14.5069131}
Tried to call 2 times and then the issue is corrected, but that means 2 calls and it is redundant.
The API worked correctly. The string compare function had an issues with the long string compare. If someone will have the same issues its most likely async calls to the polyline maps.
Related
I'm new to javascript and I'm working on a project which needs to google maps.
I need to use the text search function to find nearby veterinary request a postcode does not work and I have several questions.
Do I need an API key to use the service places?
I Copied the code documentation google maps but don't understand the callback function and i don't know if something I'm doing is wrong.
If anyone has any idea what's wrong with the code, I would greatly appreciate your response.
This is my code:
<script src="https://maps.googleapis.com/maps/api/js?callback=ini&sensor=false&libraries=places"></script>
<script type="text/javascript">
var map;
var vet= " veterinarys";
ini();
function ini()
{
var mapOptions =
{
center: new google.maps.LatLng(37.7831, -122.4039 ),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), mapOptions);
var request =
{
radius: '500',
query: vet,
type: ['veterinary_care']
};
service = new google.maps.places.PlacesService(map);
service.textSearch(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var place = results[i];
createMarker(results[i]);
}
}
}
</script>
API key is optional, but you have to pay attention to this note.
The Google Maps JavaScript API does not require an API key to function correctly. However, we strongly encourage you to load the Maps API using an APIs Console key which allows you to monitor your application's Maps API usage.
Callback parameter in the script URL is required if you load resource asynchronously. In that case as soon as Google Maps script will be loaded it will call your function. In your case to start use it you should add async attribute to the <script> tag and remove direct ini() function call from the code. Here you find documented explanation for callback param
Your code doesn't work because you specify radius param which requires location to be specified as well. It should work if you will add the same location to the request object as center param in mapOptions. Just check available options description.
You got the rest of the help from #Mihails Boturins's answer. I will answer for the question you asked in your last comment.
There is no such createMarker function defined in you code. You have to create that function just like this
Can someone help me understand how I can pass the start date into the calendar. I have created a Delivery Scheduler calendar and I display the delivery details in a table under the calends that is feed via the database. This requires me to refresh the page when a user select a calendar day to load the table information. I can figure out how to start the calendar on a starting date that is passed into the page.
Seems like this would be easy but I am doing something wrong.
$('#calendar').fullCalendar(Options);
$('#calendar').fullCalendar('gotoDate', '2012-10-21');
Sample based on documentation http://arshaw.com/fullcalendar/docs/current_date/gotoDate/
Remember that month is 0-based, so 10 means November.
$(document).ready(function () {
var calendar = $('#calendar').fullCalendar({
events:[
{ title:'All Day Event', start:new Date(2012, 10, 20)},
{ title:'Long Event', start:new Date(2012, 10, 21), end:new Date(2012, 10, 22)}
]
});
$('#calendar').fullCalendar('gotoDate', 2012, 10, 21);
});
Thank you Biesior for your helpful answer. I was able to use your suggested code to get the behavior I was looking for.
While using the approach above, I notice that Firebug's console shows two AJAX data requests being executed simultaneously, one for the view associated with the current date, and one for the view associated with the specified gotoDate.
There doesn't appear to be any additional delay from the user's perspective, and the calendar displays the requested view from the start. However, 'loading' callbacks will be called multiple times which might cause strange behavior in certain circumstances. There may also be other undesired results associated with the superfluous AJAX request for the current date.
I was able to avoid the unnecessary AJAX request by initializing the calendar without an event source, then moving to the desired date as shown by Biesior above, and then adding the event source. The sequence is shown below. I've removed some unrelated FullCalendar options and callbacks to keep it concise. There are some additional AJAX parameters, and some PHP, but the important thing to notice is when the event source is specified.
The original code results in two simultaneous AJAX requests:
$('#calendar').fullCalendar({
events: {
url:'/Services/GetEvents.php',
type: 'POST',
data: {
lat: <?=$venLatitude?>,
lon: <?=$venLongitude?>,
userID: <?=$userID?>,
distance: <?=$distance?>
}
}
})
$('#calendar').fullCalendar('gotoDate', <?=(int)substr($startDate,0,4)?>, <?=((int)substr($startDate,5,2))-1?>);
This adjustment results in only the desired AJAX request:
$('#calendar').fullCalendar();
$('#calendar').fullCalendar('gotoDate', <?=(int)substr($startDate,0,4)?>, <?=((int)substr($startDate,5,2))-1?>);
$('#calendar').fullCalendar('addEventSource', {
url:'/Services/GetEvents.php',
type: 'POST',
data: {
lat: <?=$venLatitude?>,
lon: <?=$venLongitude?>,
userID: <?=$userID?>,
distance: <?=$distance?>
}
});
Could some one point me how to draw a simple polyline between two geo coding point with custom color.
Everything you need is here:
http://code.google.com/apis/maps/documentation/javascript/examples/index.html
At a high level you want to do this:
Make two requests (using a Geocoder) to geocode two points. You will pass a function to each request that will be called back once the data is available.
You need to wait until BOTH functions complete. You could have two booleans "oneDone, twoDone" and set them to true once the function calls back.
Draw a polyline between the points using the code in the polyline-simple example.
To draw line between two points using the following function to which I pass the map and lat and long in the first point and second point.
var mapOptions = {
zoom: zoom,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas_'+id), mapOptions);
function poliLines(map, latPointBefore, lonPointBefore, latPointAfter, lonPointAfter){
var routes = [
new google.maps.LatLng(latPointBefore, lonPointBefore)
,new google.maps.LatLng(latPointAfter, lonPointAfter)
];
var polyline = new google.maps.Polyline({
path: routes
, map: map
, strokeColor: '#ff0000'
, strokeWeight: 5
, strokeOpacity: 0.5
, clickable: false
});
}
I'm sure I'm dealing with a fairly common problem that's been solved many times before.
My web application requests about 100 line-delimited addresses of buildings from another service. I must now plot all these as gmarkers on a google map (with api version 3). I must also calibrate the view port to display all the gmarkers, that is determine the map center and the appropriate zoom value.
I found some code from the Google Maps API and tweaked it to plot one point:
function codeAddress() {
var address = '1 Yonge Street, Toronto, ON';
geocoder.geocode( { 'address': address}, geocodeCallBack);
}
function geocodeCallBack(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
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
}
However, I suspect that performing 100 asynchronous geocoding calls may be slow. Does anyone have suggestion on the best way to achieve what I need?
Performing 100 Geocodes each time your page is loaded will take tens of seconds, so I suggest geocoding in advance.
If the addresses are always the same, or rarely change, you can geocode them in advance using the Geocoding Service (http://code.google.com/apis/maps/documentation/javascript/services.html) and temporarily store the resulting Lat/Lngs on your server as long as they are only ever displayed on a Maps API map.
Temporarily means that you must update these Lat/Lngs periodically (e.g. once every 30 days).
(See 10.1.3b for details: http://code.google.com/apis/maps/terms.html)
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!)