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
});
Related
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
Is there an equivalent in Baidu like fitBounds in GoogleMap?
I have multiple markers on a Baidu map and I would like to show all the markers with the proper positioning and zoom level.
Just stumbling upon this thread. The answer to this question is:
var points = [Point_1,...,Point_n];
map.setViewport(points);
points is simply an array containing objects of type BMap.Point that you want within the map viewport.
Docs: http://developer.baidu.com/map/reference/index.php?title=Class:%E6%80%BB%E7%B1%BB/%E6%A0%B8%E5%BF%83%E7%B1%BB
Although this answer worked for me, with the change of direct latlng object instead of BMap.Point object to make it work.
It is possible to show multiple markers on Baidu Map.
Check their example here
I have displayed Baidu Map with an area of 230x125 so I have shown the China on the area like below:
var map = new BMap.Map("id_of_map_loading_area");
var point = new BMap.Point(101.841797,35.433724); //China on the center of the area
map.centerAndZoom(point,3); // Change value 3 to see difference
map.enableScrollWheelZoom(); // Zoom effect to the map using mouse.
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.
I've put together a little snippet on js fiddle so you can see what I am working with.
Basically I am trying to hook up a "Zoom" button so that once a path is created you can click the zoom button and the map zooms to fit the path. All of the answers I have found work by having an array of markers which I do not have. Any suggestions would be greatly appreciated.
http://jsfiddle.net/A3NBZ/
Well, in fact you do have an array of markers! It's stored in the Polyline that you're creating when the user is clicking on the map. To retrieve the points on which the user has clicked, simply use Polyline.getPath(). You can then add those points (as geocodezip mentioned) to a LatLngBounds object and use google.maps.Map.fitBounds() to adjust the map view to the given bounds.
Here's a simple implementation of the zoom method, based on the code example you've provided (you can see it working here).
function zoom() {
var bounds = new google.maps.LatLngBounds();
geodesic.getPath().forEach(function(latLng) {
bounds.extend(latLng);
});
map.fitBounds(bounds);
}
Similar to the examples you have seen with markers, add all the google.maps.LatLngs in the path to a google.maps.LatLngBounds object (using bounds.extend()), then call map.fitBounds on the resulting bounds object.
updated jsfiddle
I am currently working on google map and new to it..
I want to know is it possible to divide the map into certain tiles with definite height and width and to color them.. If yes then somebody can just explain how to do it as i am facing difficulties.
I think what you are referring to is known as overlays in the Google Maps API. Do you want to achieve something like this? (click to show overlay)
The polygons section in the Google Maps API documentation would be the place to go to learn more.
If there is a limited area (geographically) that you would like to color based on map tiles, then you could create a custom tile layer overlay for that area (with each tile colored appropriately).
You can read the documentation for Tile Layer Overlays, but the gist is that you create a GTileLayer object, then set a property on that object with a function, getTileUrl, that is called when Google maps need to insert a tile in Google Maps.
In your getTileUrl function, you can return your own version of the tile (which you can draw with a colored tint based on the origional tile):
tilelayer.getTileUrl = function(point, zoom) {
if (zoom == 17 && point.x == 38598 && point.y == 49259)
return "../pics/origional_tile_with_colored_tint.png";
};
Once you have a a GTileLayer object, you instantiate a GTileLayerOverlay (passing in your GTileLayer) and add it to the GMap2 object (with the addOverlay method).
You can find an example of this here.