We Keep Coding

Prevent duplicating of map and keep dragging within world

Is there a way to make leaflet not repeat the world map and make the map stay within the world bounds when dragging? and also disable zoom out when the size of the world reaches the size of the window

To stop the tiles from repeating, use the noWrap option of L.TileLayer
If set to true, the tiles just won't load outside the world width (-180 to 180 longitude) instead of repeating.
http://leafletjs.com/reference.html#tilelayer-nowrap
If you want to stop panning beyond defined bounds, use the maxBounds option of L.Map or call the setMaxBounds method:
Restricts the view to the given geographical bounds, bouncing the user back when he tries to pan outside the view.
http://leafletjs.com/reference.html#map-maxbounds
http://leafletjs.com/reference.html#map-setmaxbounds
If you want to disable zoom beyond a certain level use L.Map's minZoom and maxZoom options. What you want to do is set a minimum zoom level and use that as initial zoom. What factor depends on your map's elementsize and your tilelayer's tilesize. Most tileproviders use 256px². At zoom 0 the world is 1 tile, at zoom 1, 2x2 tiles, at 3 it's 4x4 etc. So if your map's elements is 512px² your minZoom would be 1.
http://leafletjs.com/reference.html#map-minzoom
Here's a demonstration on Plunker: http://embed.plnkr.co/rP5NLQ/preview

By Setting minimum zoom level :
map._layersMinZoom=1 (which sets the minimum zoom level to 1)
OR
map.options.minZoom = 1;
Read more here

Reduced bing map to lowest extent does not fit in the map area

When we reduce the map size to lowest possible size by scrolling down or clicking zoom(-) sign, a square is shown which does not exactly fit in the map area on my web page.
i implemented bing map over openlayer.
cant attach image due to repo constraint on stackoverflow.
as of now my implementation looks like current look but i want map should look like desired look

if you mean that your map is too small for the DIV area, but the DIV area itself is OK, you can tell your map what is the last zoom level you want to use by setting the map options at the map init:
map = new OpenLayers.Map("map",{ numZoomLevels: 5, minZoomLevel: 3, maxZoomLevel: 5 } );
plus/minus zoom makes only your zoom change, not the area of the map, the area stays the same within the page. so how do you want the area of the map to be affected by zooming?
the area of the map is dependent only upon the size of the DIV that the map is placed in.
this is the DIV in your first exapmle: <div id="map" class="smallmap"></div>. If you change the proportions of the DIV element, the area of the map is changed too.

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

Getting LatLng of a certain pixel within the map container

How can one determine which LatLng a certain pixel (not determined by clicking!) in the map canvas div corresponds to? Say, I have x and y "offset" of a pixel within the map canvas div and I want to find out a LatLng this pixel corresponds to (f.ex., to place a marker on it).

You need to implement a Javascript class that extends google.maps.OverlayView (http://code.google.com/apis/maps/documentation/javascript/reference.html#OverlayView).
When the map is panned, the draw() method of your class will be called. Within that method you can call getProjection() to get a MapProjection object, and then use MapProjection.fromContainerPixelToLatLng to convert a pixel (relative to the top left of the map) to a LatLng.
The reason that this is so complex is that it's almost certainly not the right thing to be doing. Why do you need to place something relative to the map in pixel space? Users of maps tend to be interested in "real world" space (e.g. points on the surface of the Earth).

How to set default view in OpenLayers, WITHOUT restricting bounds?

Based on samples, I can see that you can set a default view in OpenLayers by saying something along the lines of:
var bounds = new OpenLayers.Bounds(-125, 25, -65, 50);
var map = new OpenLayers.Map('map', {restrictedExtent: bounds });
However, this also (as the name implies), restricts me to be able to ONLY navigate within these bounds. I can zoom out and see things outside of these bounds, but I can't then zoom back onto them, or scroll to them.
I've tried not having any restrictedExtent (or making it the entire map), but then I can't get it to focus on the area I want. I tried using:
map.setCenter(new OpenLayers.LonLat(0,0), 3);
console.log(map.getCenter());
To set the zoom and the center...but it doesn't seem to do ANYTHING, other than set the variable "center" which I can then read from map.getCenter() (if I don't set it, it's null, if I do set it, I can see it...but the map itself stays fully extended and it's center doesn't seem to change at all...)
The Map layer I am using is:
OpenLayers.Layer.OSM.Mapnik
with displayOutsideMaxExtent set to true... I'm really at a loss here.
My goal is to have a default region of the world zoomed in to and in view (such as the United States), with the option of viewers being able to go outside the default to view things.

I think I've figured it out. For whatever reason, the zoom was never changing, but the center apparently WAS moving (it was just so zoomed out I couldn't tell). Add to the fact that I needed to transform the center to use the google projection, and it seems to work just fine.
What I ended up doing was:
var lonlat = new OpenLayers.LonLat(20,37).transform(new OpenLayers.Projection("EPSG:4326"),new OpenLayers.Projection("EPSG:900913"));
map.setCenter(lonlat);
map.zoomTo(4);