Forum | Appery.io

How do you rotate the Google map based on a given heading?
I am trying to develop an app to work as a GPS navigator but I cannot find a way to rotate the map or the marker. Any help will be really appreciated.

also... I need to move the marker (a GPS navigation arrow) so that its center is at the current position rather than the mid-point of its bottom side. I am trying to do this by using google.maps.Icon but I cannot make it work
Here is my code:

var currentLatLng = new google.maps.LatLng(localStorage.currentLatitude, localStorage.currentLongitude);

var myOptions = {
zoom: 16,
center: currentLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map($('div[dsid="googleMap"]').get(0), myOptions);

var iconOffset = new google.maps.Point({
x: 0,
y: -16
});

var markerIcon = new google.maps.Icon({
anchor: iconOffset,
url: "http://www.robertoarnetoli.com/navArr..."
});

var marker = new google.maps.Marker({
position: currentLatLng,
map: map,
title:"you are here",
icon: markerIcon
});

map.refresh();

Hi Roberto,

Unfortunately this is outside the scope of our support, but you can search here
https://developers.google.com/maps/do...

Hi Katya,
thank you for your quick reply and for the link.
I understand that the decision of whether a question is in scope of your support or not may be difficult at times, but what makes a question about rotating a google map and position of the marker out of scope and a question about displaying one or more google map markers (which you guys have responded to extensively) in scope?
Especially when I am trying to use your product for a proof-of-concept which failing to work may be leading me towards other products.

Also, Appery is really good but no so good at giving messages about possible errors in the JS. For example, regarding the second part of my question, I am following Google's API documentation, but while this works...

ar currentLatLng = new google.maps.LatLng(localStorage.currentLatitude, localStorage.currentLongitude);

var myOptions = {
zoom: 16,
center: currentLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map($('div[dsid="googleMap"]').get(0), myOptions);

var marker = new google.maps.Marker({
position: currentLatLng,
map: map,
title:"you are here",
icon: "http://www.robertoarnetoli.com/navArr..."
});

map.refresh();

... while this doesn't (it doesn't show the marker) ....

var currentLatLng = new google.maps.LatLng(localStorage.currentLatitude, localStorage.currentLongitude);

var myOptions = {
zoom: 16,
center: currentLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map($('div[dsid="googleMap"]').get(0), myOptions);

var markerIcon = new google.maps.Icon({
url: "http://www.robertoarnetoli.com/navArr..."
});

var marker = new google.maps.Marker({
position: currentLatLng,
map: map,
title:"you are here",
icon: markerIcon
});

map.refresh();

Yet Appery just doesn't work It does not say anything about errors in the code.... or at least it is not clear to me where I should be looking for it.

Any help would be really really really appreciated
Roberto

Hello! There is no google.maps.Icon function. Instead of codevar markerIcon = new google.maps.Icon({
url: "http://www.robertoarnetoli.com/navArr..."
});/code try codevar markerIcon = {
url: "http://www.robertoarnetoli.com/navArrow.png"
};/code
You can see js errors only in run time. Here is how to debug your app http://docs.appery.io/documentation/a...

Hi Marina,
I'll try your code but here is the google.maps.Icon object reference:
https://developers.google.com/maps/do...
that has other properties like 'anchor' which would enable me to position the marker center to the current position.

Hi, did you try the code I suggested?

It worked! thank you! ..... any thoughts or directions on map rotation?

Hi Roberto,

I'm afraid to upset you but current version of google maps provided by html-model doesn't support rotation for map. Even last version for desktop browsers based on WebGL technology doesn't support this.

You can try use CSS-rotation for entire map-box, but it's really bad idea. It's very expensive for performance action and will be rotated all map controls and location names. Maybe you will try rotate maps base-image inside google maps box, but I think it's contrary to user agreement and will create unexpected errors for googlemaps-code.
Details about CSS-rotation you can find here.

Thank you very much for your explanation and suggestion. Really appreciated!!