Geolocation api with direction arrow - javascript

I am building a simple PHP based off-road navigation webpage for use on a smartphone that will display two icons on a Google map, one being my my current location and one my destination. As I move, the position of the icon for me will automatically update.
Sample code to do the basic stuff includes:This Stackoverflow example and This tutorial.
I would like my icon to be an arrow that points in the direction I am currently walking. The direction would be based on my previous position and my current position. Does anyone know of any method to achieve that please?
One crude method would be to have 8 (or 16) icons, representing N, S, E, W, NE... and pick the icon that approximately matches my direction, but I was hoping for something more dynamic.
The other option is to simply draw a path on the map of where I have been. I am thinking of doing that anyway, but would also like the arrow.
To clarify exactly what I want, This Stackoverflow example contains this code to display a marker of my current position on a map:
map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 18,
center: new google.maps.LatLng(startPos.coords.latitude, startPos.coords.longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(startPos.coords.latitude, startPos.coords.longitude),
map: map
});
Instead of the teardrop type marker I want an arrow that is pointing in the direction I am walking. I would calculate the direction for it to point based on the lat/long of my previous location and my current location, but I need the code to insert in the above code where it says position:...
This is basic navigation stuff so I am sure it has been done before. I just haven't been able to find any examples. (I do not want to use Google directions API. It has a usage limit and is not really suited to off-road.)

I haven't tried this myself, but it seems the Google Maps Javascript API provides functionality for this. You can use the google.Maps.Symbol object.
With the rotation property you can set the rotation of the symbol in degrees. You need to get the angle between the current location and destination from the API first then.
With the path property you can set a the symbol. Google already implemented symbols for arrows, they use the constants BACKWARD_CLOSED_ARROW, BACKWARD_OPEN_ARROW, FORWARD_CLOSED_ARROW and FORWARD_OPEN_ARROW.
It also seems to support coloring, scaling, etc. for the symbol, so you can do quite some things with it. I hope this information helped.

Related

Google Maps API v3, Remove Marker icon or changing to "null"?

I'm writing a Python Flask application in which I'm using Google Maps. I want to be able to add labels to a polyline that I've drawn which symbolizes a ship route.
The route is drawn using a set of coordinates and the polyline feature of the Maps API. I want to add time labels to the polyline and the easiest way seems to be to use Map Markers. However I don't want the large standard pins to show up, but would prefer a small icon/marker together with my text or even none at all. As far as I have gathered you can create "Circles" (which are modifiable) or "Markers" (which you only can change the icon of). I would prefer to go with "Circles", but those you apparently can't add text to..
How can I add text to my map and avoid the Google Maps Pins showing up?
Currently I have an list of objects that contains latitude, longitude and date + time. I'm iterating through it adding markers, but as I do I would like to keep out the marker icon or instead draw the circles if someone knows how to draw circles with added text?
for(i = 0; i < markerList.length; i++){
var position = new google.maps.LatLng(markerList[i].lat, markerList[i].lng);
var date = markerList[i].date;
var marker = new google.maps.Marker({
position: position,
label: date,
map: map,
icon: "None" //Produces error: 404 (NOT FOUND)
});
}
Being able to change the label size also is a very much appreciated function, but I have been unable to find any information about whether that is available. Being able to change the color of the text would also be nice.
As no answers have been given yet and I've sort of found a solution to my problem I guess I will share for others out there with the same problem. At least until someone comes up with a better solution:
I ended up using a predefined symbol and scaling it down to 0 in size as follows:
for(i = 0; i < markerList.length; i++){
var position = new google.maps.LatLng(markerList[i].lat, markerList[i].lng);
var date = markerList[i].date;
var marker = new google.maps.Marker({
position: position,
label: date,
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 0
}
});
}
Sadly I haven't found a way to mess with the label yet.
try markerWithlabel and you can change the icon of the marker whit a svg or png plus the label too
like this jsfiddel
.
#Zeliax You can add visible: false to not have marker icon show on your google map. icon prop looks for a path that you want specify for your marker to look as. It is basically a url for your display image.

Google Maps API: how to tell if a marker is hidden by another marker?

I have a map that has markers programmatically placed on it based on values in my database. When you click on a marker, it will go to a detail page for that location.
My problem is that when the map is sufficiently zoomed out, markers that are close enough to each other appear as a single marker, in effect hiding some of the markers. Is there a way to tell programmatically whether a marker is part of a group of markers or is hidden/covered up by other markers?
My intention is to do something like this for each dynamically generated marker:
marker.addListener('click', function() {
// if marker is not hiding any other markers
window.location.href = markerURL;
// else if it is hiding markers/is part of a group of markers
map.setZoom(15);
map.setCenter(marker.getPosition());
});
I have checked the Marker API documentation, but can't seem to find any useful methods. getClickable and getVisible always return true in my case, regardless of whether a marker is covered by another marker. Any suggestions? Thank you!
I ended up going with MarkerClusterer to solve my problem. I was hoping for a simpler solution, but this turned out to be pretty simple after all.
The only thing I needed to add to my existing marker-generating code was a list: var markers = [];, and then I called markers.push(marker); on all of my markers. The final step was to create a new MarkerClusterer object:
var markerCluster = new MarkerClusterer(map, markers, options);
And MarkerClusterer handles the rest more or less (the options parameter is optional, but I used it to set the path to my images and set the maximum zoom level). Now, in the situations where previously my markers were stacked on top of each other, making it impossible to see or click certain markers at certain zoom levels, I instead see a cluster with a number indicating the number of markers in that cluster. Clicking the cluster icon will further zoom in, revealing my markers.
All of this was done following the simple usage example on their github page, but they have pretty good documentation too. Most of my time getting this to work right was actually spent styling the cluster icons to match my site's color scheme...

Google Streetview API Indoor panorama.setPosition() redirects to start position

I am working on a Google Streetview indoor application using the Google Maps JS API. I am using panorama pictures that are available on Google Streetview. I sometimes want to programatically change the position, for instance when somebody clicks on a position in a small map. However, when I call panorama.getPosition() I automatically get redirected to a different position. I can actually see the position_changed event being triggered twice.
I already sort of found the cause of this issue. It has something to do with the starting/entrance positions Google maps uses for Streetview Indoor.
The two orange circles depict the two possible starting/entrance points into the building. When dropping the pegman over these circles you will enter the building in Streetview Indoor.
It looks like when these starting points exist, the Google Maps API does not let you programatically set the position to some position other then any of the starting points. It will always redirect you to one of the starting points. This is obviously not what I want.
//The starting/entrance position is lat: 52.089988, lng: 5.178041
//The position I want to go to
var goToPosition = {lat: 52.0898852, lng: 5.1780344};
//Position changed EventListener
google.maps.event.addListener(panorama, 'position_changed', function() {
var newPosition = panorama.getPosition();
console.log('changed position to:', newPosition.lat(), newPosition.lng());
});
//Calling setPosition with goToPosition
panorama.setPosition(goToPosition);
//Will result in two console.logs directly printed after another:
changed position to: 52.0898852 5.1780344 //goToPosition
changed position to: 52.089988 5.178041 //starting position
The console.logs show that it looks like the position is being changed twice directly after each other, ending the position at the starting position.
I'm wondering if any body else has encountered this problem and if there is a known workaround for this. I am in contact with the photographer that uploaded the panorama pictures to Google. Maybe there's something in the way these pictures are uploaded to Google and configured. I wonder if this can even be fixed in my application code, or if it's an API problem or even expected behavior.
Thanks!
I found the solution for my problem, partly thanks to #LilDevil's answer.
Each panorama for a position has a panorama ID. If you know the panorama ID in advance, it can be used to move to that position using setPano().
I store panorama ID together with the lat,lng of a position. When clicking on the map I calculate the known position that is nearest to the clicked position. I can then look up the panorama ID that belongs to this position and use it to move to that panorama using setPano().
This doesn't seem to be a very clean way to solve the problem, because the panorama ID might change over time (for instance when new panorama pictures are uploaded to Google Streetview). However, I couldn't find anything in the documentation that says this method shouldn't be used. The documentation says that this method should be used when dealing with custom panorama pictures, which is not the case in my situation. Also, in this specific situation we are in control of when new panorama pictures will be uploaded (because it's for Google Indoor) so I can change the stored panorama ID's if that happens.
You can't just set the panorama to any coords. You need to use getPanorama() with your start coords and a radius, to find the coords to the nearest panorama, then set the pano to those coords. Some examples on https://developers.google.com/maps/documentation/javascript/streetview?hl=en

Google maps API twisting marker

I am trying to find a how to get the Google maps marker (it's an arrow) twisting. I know the direction in which the marker has to twist (an angle from 0 to 360°), but can't find anything about it on the internet.
Does anyone know how I need to do it? I know Google maps does it on phones like this:
When you set the icon on the map, you can use the rotation property on the google.maps.Symbol object. See here:
https://developers.google.com/maps/documentation/javascript/reference#Symbol
Furthermore, you can use google.maps.spherical.computeHeading() if you need to determine the value for the rotation property. See here:
https://developers.google.com/maps/documentation/javascript/reference#spherical
Example:
var heading = google.maps.geometry.spherical.computeHeading(fromLatLng, toLatLng);
marker.setIcon({
scale: 6,
rotation: heading
});

How would I position a marker at the bottom of the map in Google Maps v2?

I have a webpage that finds a store by postcode or name.
I have just released an update to it so that contact details display in an info window coming from the marker. Due to the small size of the info window, after centering to the marker, the map pans down until it can fit the marker and info window in leaving the marker near the bottom.
Wondering if there is an easy way to set this offset immediately so that the marker appears at the bottom of the map window and it doesn't have to pan?
Thanks.
You could center the map appropriately before you add the marker:
var someZoom = 13;
var center = new GLatLng(37.4419, -122.1419);
map.setCenter(center, someZoom);
The zoom is optional too. You can just leave the zoom on whatever it is:
map.setCenter(center);
If you would like to center on a particular pixel, instead of a lat/lng, then you can use this function to convert:
fromContainerPixelToLatLng(pixel:GPoint)
I feel like you should spend half an hour and review the docs: http://code.google.com/apis/maps/documentation/reference.html. I read the documentation extensively while working on my website: www.trailbehind.com
Perhaps the auto-panning is caused by an internal addoverlay event handler. Have you tried handling the addoverlay event and returning false from it?
GEvent.addListener(map, "addoverlay", function() {
return false;
});
where 'map' is the name of your GMap2 object.

Categories

Resources