I am working with markers and adding them like this:
markerLatLang = new google.maps.LatLng(35.6412142,139.6988337);
marker = new google.maps.Marker({position: markerLatLang, map: map});
When I go in to street view all the markers are at ground level. Is there a way to position a marker at x meters above ground or at a set altitude?
Unfortunately, as Dr.Molle said, this option doesn't exist in Google Maps API for now.
I have done this using a PNG image having bottom empty space how much you want. I also did not find a proper way to do that but this trick may be helpful to you.
Related
I am using the Google Maps API to add some overlays to the map. I'm not having any trouble actually adding the overlays where I want since I found this nifty jsfiddle to determine corners on a map: http://jsfiddle.net/4cWCW/3/
But I discovered that Google skews some of the image overlays, specifically ones that are more north or south. This makes sense since a map is a 2D projection of a globe and some skewing happens, but I don't want google impose this on my overlays. I am wondering if there is any way to correct for this?
overlay method(javascript):
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(42, 27.9),
new google.maps.LatLng(80, -168.6));
var tempOverlay = new google.maps.GroundOverlay("ru2.png", imageBounds);
tempOverlay.setMap(map);
Specifically here, I have a silhouette of Russia I want to place on the map, but it stretches the top of the image without changing the lower part of it, so I can't actually line it up with the county location.
I'm trying to put a google.maps.Marker object over (z-index positioning) an Infobubble object
but i am having no success.
Basically what i'm doing is assigning zIndex: n to the markerOptions object which I pass to the Marker constructor as follow:
var markerOptions = {
position: store.getLocation(),
title: store.getDetails().title,
icon: DEFAULT_MARKER,
anchorPoint: new google.maps.Point(20,5),
zIndex: 2
};
var marker = new google.maps.Marker(markerOptions);
I have already read this answer Google Maps v3 marker over infowindow but actually it has not got any votes. Can somebody tell me more about?
Thanks a lot
The problem, as commented by shaunhusain is the fixed pane where particular elements will be drawn.
It's correct that you need to use a custom overlay, but you must use it to draw the marker, not the infobubble.
The reason: infobubble is an implementation of a custom overlay, it will be drawn inside the floatPane. To put the marker on top the infobubble must be drawn into a pane with a zIndex equal or lower than the zIndex of the pane where the marker will be drawn.
But here comes the problem: all these panes do not receive mouse-events, you wouldn't be able to interact with the infobubble(select tabs, select text, click links, close the infobubble).
Therefore you must use a custom overlay to draw the markers, and you must put these overlays into the floatPane(it's the pane with the highest zIndex)
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 have this page where I have a listing of items per state. If I try to do
map.fitBounds(bounds);
Then the map suddenly shifts to the ocean. What I wanted it to do was to fit around the area of the markers.
Here is the test page for this:
http://www.comehike.com/outdoors/terrain.php?type=hills&geo=state&state_id=1
Any idea what is going wrong?
Thanks!
When you initialize bounds at the end of initializeTerrain there are no markers on the map. Therefore it defaults to that spot in the Pacific when you later call map.fitBounds(bounds). You need to extend the bounds after each of the markers are added.
var myLatlng = new google.maps.LatLng( 32.533470 , -87.786118 );
bound.extend(myLatlng);
...repeat for each marker.
should do the trick
that location is the center of the map, probably meaning that the location wasn't found. Maybe an incorrect syntax somewhere?
I am looking for javascript code that display marker on top of others.
May be there is any method of GMarker that set marker on top (z-index kind of).
For solution, I destroy marker and created again. The solution works before some time (when I tried this solution) but not right now.
There is a parameter zIndexProcess.
var marker = new GMarker( latlng, { zIndexProcess: "your z index for marker" } );
Should work.
Check this link as well.
http://econym.org.uk/gmap/zindex.htm