We Keep Coding

How to change map view's orientation for navigating the users?

I am implementing the navigation manager in javascript for learning purposes where I would like to navigate the user based on the calculated route. If the start and destination points are located in south, north directions respectively, then the marker for the start position appears in the bottom of the map's viewPort and the target maker would appear on the top by default. In contrast, assume the following situation where the start and destination point's are located in north, south directions respectively. I would like to change the orientation of the view upside down in order to keep the start position in the bottom and destination on the top (Similar to commercial android apps).
I tried two different methods to change the cameraview but I couldn't achieve it due to the following reasons.
Method-1:
The first method is based on startInteraction which is given in the following link where I couldn't find any options to set the HEADING angle
https://developer.here.com/documentation/maps/topics_api/h-map-render-renderengine-interactionmodifiers.html
Code:
var map = new H.Map(...);
var viewPort = map.getViewPort();
viewPort.startInteraction(H.map.render.RenderEngine.InteractionModifiers.HEADING);
Method-2:
I am trying to change the camera view according to the given position, orientation data which will be processed by the renderer. The setCameraData method from the following link works fine with the parameters zoom, position {H.geo.IPoint} and the renderer updates the map correspondingly.
https://developer.here.com/documentation/maps/topics_api/h-map-viewmodel.html#h-map-viewmodel__setcameradata
When I change the orientation of the virtual camera, i observe absolutely no difference in the map though roll, pitch, yaw properties are assigned with some values (I tried both the degrees (type used by HERE maps) and radians).
Code:
var map = new H.Map(...);
var viewModel = map.getViewModel();
var data = {'zoom': 16, 'position': curLoc, 'pitch': 0, 'yaw': 0, 'roll': 45.0}; // type - {H.map.ViewModel.CameraData}
viewModel.setCameraData(data);
Note: I have also tried updating the view with setViewBounds() method but I couldn't set the map's view upside down.
Best Regards,
Jeyaprakash Rajagopal

The JS API itself is just supporting one map view and that means north is on the top.

how to create a padding around the edge of a google map

I have a very busy Google Maps app that I have built and I'm trying to create a "buffer zone" around the outside edge of the map so that the google map commands won't put things there. My solution was to create invisible divs and add them to the map as controls, one for each of the edges. This seems to work great as all of the google commands see them and adjust accordingly, and the map appears normally. For example, fitBounds ensures my bounds is not under the invisible layers. For the top where I have a control bar it's a perfect solution, but for the other edges where there is nothing, it creates a problem - I can't click on the map or info windows under these controls as they take the click event.
So I'm looking for one of 2 solutions:
1) can I make my invisible controls pass clicks through to the map, or;
2) is there a better way to pad the edge of the map; something that doesn't involve a much of math every time I want to call a fitBounds or panTo would be preferred as I automate a lot of map motion
Cheers

I managed to solve this.
The best way to add padding to your maps is with invisible controls. It creates the padding that all other map functions obey without any additional coding when call them. Here is how to do it for everyone else who needs this.
First.. I create a function to simplify creating the divs.
function createDummyDiv(w, h){
var out = $(document.createElement('div')).addClass('dummy-div').css('width', w).css('height', h);
return out[0];
}
Then I add the controls as needed. In this case I have the normal zoom control in the LEFT_CENTER position, so I had to create 2 for the left side. This creates a 10% padding on the left, right and bottom, and a 55px padding at the top under my own control bar.
map.controls[google.maps.ControlPosition.TOP_CENTER].push(createDummyDiv('100%', '55px'));
map.controls[google.maps.ControlPosition.LEFT_TOP].push(createDummyDiv('10%', '45%'));
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(createDummyDiv('10%', '45%'));
map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(createDummyDiv('10%', '100%'));
map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(createDummyDiv('100%', '10%'));
The.. the final fix to my problem is to put them behind the map layer with css.
.dummy-div{ z-index: -100 !important; }
I hope this helps someone else

Try to give the invisible DIV a negative z-index, e.g. -10

For me, fitBounds api worked itself with second parameter (padding)
Add padding to google map bounds

Center Google Maps (V3) on browser print

I have a map set to 100% of the page width. The map has one marker and is centered on that marker. When I print the browser, I want the map to stay centered on the marker. This is the code I wrote to do so:
var lastPos = map.getCenter();
google.maps.event.addListener(map, "idle", function() {
lastPos = map.getCenter();
console.log(lastPos.toString());
});
google.maps.event.addDomListener(window, "resize", function() {
google.maps.event.trigger(map, "resize");
map.setCenter(lastPos);
console.log("Re-center on " + lastPos.toString());
});
This works when I re-size my browser, but does not work when the browser re-sizes itself before printing. If my browser is above a certain width then the marker is shifted entirely off the page (to the right) when the map is printed.
Here is my test case: http://www-sf.talispoint.com/testmapprint.html

You would need to add a #media print and give the map the size when printing and then you can do what is explained below.
When a map is printed what happens is that the top left corner is kept and the map is adjusted to fit the #media print size.
If you want the center to stay the same you need to manually change the center of the map.
http://jsbin.com/owiwox/33 is an example on how to work around this.
It uses a listener for the print media being applied event and adjusts the center of the map using a ratio on how the map is changed (made smaller)
One thing that you have to take care of is that you might have to make this browser targeted to make it work on all browsers (This solution works well in Chrome)
A good resource for making it work across browsers is:
http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/
The js code from the sample above listens to print requests and shifts the map so that the top left corner has the same center as the big map.
To cut the whole story short, this is how it works
You need to put in the ratio of the map vs printed map (or get the size by checking it from JS)
You assign it to:
var widthRatio = 2;
var heightRatio = 3;
You listen for print media being applied and shift the center so that it does not change
After you finish print , you revert the change.
Still here you have the problem that a part of the map will be cut, but there is not a good solution here, since the zoom level -1 tiles might not be cached so when you zoom out to fit bounds you might get no tiles.

It seems the problem with your 'printing' or 'printer'.
I did a test:
load the test map and make the browser very wide
print preview and saw the problem you described
But: I can change the printing scale from 'Shrint to fit' (default for IE and FF) to say 30% and was able to print the map as seen on the screen.
Another thought is:
You may try to use another CSS for print to limit the map div width, but I am not sure if that will trigger the resize of the map first (you may refer to this post: Javascript Event Handler for Print)

How to override or remove a control in Google Map API

I was playing with Google maps for last two days and started understanding little bit about its functionality.
I was using Large Map i.e. 700 X 300 resolution map size and i was trying to implement controls used in small maps.
eg.
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 18);
map.setMapType(G_HYBRID_MAP);
**map.setUIToDefault();**
map.enableContinuousZoom();
var customUI = map.getDefaultUI();
customUI.controls.smallzoomcontrol3d=true; //1. trying to override largezoomcontrol3d
customUI.controls.menumaptypecontrol=true; //2. trying to override largezoomcontrol3d
map.setUI(customUI);
map.enableRotation(); //3. Enabling rotation
Here in 1(a). Small zoom control is not getting visible until i remove the line map.setUIToDefault() and add one more line customUI.controls.largezoomcontrol3d=false. Although I was expecting that by writing above code those control will get overridden.
1(b). I tried to use map.removeControl(Control:GControl) where i was not able to pass the correct parameter. I wanted to remove largezoomcontrol3d from map but i was not able to make out how to refer to this control in the current map.
Same overriding problem is occuring here also. The only difference here is that both the controls are visible here menumaptypecontrol and maptypecontrol, here menumaptypecontrol is overlapping on maptypecontrol
I am trying to enable rotation on map but it is not working for me.

thinking about map.removeControl you were quite closely to solution (if I got what you need). take a look here:
Controls
so, you need just use map.addControl function to add exactly what you need instead of what you did.
sorry, forgot about map rotation. I think the following simple example of Google Map can help you (I just never played with rotation, but example looks very simple to learnt from it):
Google Map rotation example

Scalable google maps overlay

Is it possible to add an image overlay to a google map that scales as the user zooms?
My current code works like this:
var map = new GMap2(document.getElementById("gMap"));
var customIcon = new GIcon();
customIcon.iconSize = new GSize(100, 100);
customIcon.image = "/images/image.png";
map.addOverlay(new GMarker(new GLatLng(50, 50), { icon:customIcon }));
However, this adds an overlay that maintains the same size as the user zooms in and out (it is acts as a UI element like the sidebar zoom control).

There is a zoomend event, fired when the map reaches a new zoom level. The event handler receives the previous and the new zoom level as arguments.
http://code.google.com/apis/maps/documentation/reference.html#Events_GMap

You might want to check out openlayers
It's a very capable Javascript API - it supports a bunch of back ends, allowing you to transparently switch between, say, Google Map tiles and Yahoo Map tiles.

Well after messing around trying to scale it myself for a little bit I found a helper called EInserts which I'm going to check out.
Addition:
Okay EInserts is about the coolest thing ever.
It even has a method to allow you to drag the image and place it in development mode for easy lining up.