Develop Reference

Disable horizontal repeating of world map with mapbox

I'm quite new to JS, so maybe my problem will be easy to solve, though I already spent many hours on it.
I'm using Mapbox with the leaflet api, and I would like to disable the repeating of horizontal world maps when zooming out. I already explored the maxBounds properties, but it is not satisfying, as I want to hide the map outside the bounds. Basically, I would like to have this result http://jsfiddle.net/zF6bf/ but instead of "canvas", I would like to have this map, stored on mapbox.com : cartogrph.hbem5mod
Moreover, I would like to disable drag and zoom handlers, so I'm looking for a solution which would be compatible with the following:
// disable drag and zoom handlers
map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
// disable tap handler, if present.
if (map.tap) map.tap.disable();
Can anyone help me? I would be really greatful.
Thanks in advance,
Jonas

See the docs: Disable World Wrapping
<script>
var map = L.mapbox.map('map','cartogrph.hbem5mod', {
// these options apply to the tile layer in the map
tileLayer: {
// this map option disables world wrapping. by default, it is false.
continuousWorld: false,
// this option disables loading tiles outside of the world bounds.
noWrap: true
}
}).setView([38, -102.0], 5);
</script>

I found the existing answer didn't work for me. But you can use the RenderWorldCopies property to do this. See the Docs
You can use the Constructor's Option
new mapboxgl.Map({
renderWorldCopies: false,
// your other options....
})
Or with the method:
map.setRenderWorldCopies(true);

Google Maps Disable user panning on all events

In my google maps application I have a follow method which follows a moving marker. When it is following I want to allow zooming through all the usual methods (dblclick, dblleftclick, mousewheel and touch events) and I want to disable panning of any kind. The problem is that on zoom with mousewheel and dblclick the map gets panned to the position of the mouse. I can disable everything just fine but I want to allow zooming. I have solved the mousewheel problem by using the jquery mousewheel plugin and using the delta to change the zoom.
Is there some easy way to do this or do I have to write a listener for all the different touch and mouse events?
EDIT
I have already disable double click, mousewheel zooming and dragging but I want to have the double click functionality still there. I also want the touch events there but I want to have them zoom from the centre rather than from where the event happened. The real problem is replicating the events which google already handle but change the functionality a bit
var options = {
disableDoubleClickZoom: true,
draggable: false,
scrollwheel: false,
panControl: false
};
this.map = new google.maps.Map(document.getElementById('map'), options);
My ideal solution would be if there was a disableDoubleClickPan and disableScrollwheelPan or the draggable option actual prevents all dragging of any kind
EDIT
This is for all devices, desktop and mobile.

Here is how I did it:
var options = {
draggable: false,
scrollwheel: false,
panControl: false,
maxZoom: Zoom,
minZoom: Zoom,
zoom: Zoom,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
As you can see, setting maxZoom and minZoom to the same value helps block user's double click event.

I have ended up going with a combination of options. Firstly I had to override desktop events which occurred to get my achieved result (touch, double click, double left click, and mouse wheel).
On a touch screen devise I paused all updates to the markers when there were more than two touches. this meant that any pinch event was not jumping around when the zoom operating.
On a normal web desktop device I disabled the zoom and double click events on the map and rewrote my own event handlers.
To distinquish between them I checked for the ontouchstart event in the window object.
function setDraggable(draggable) {
if ("ontouchend" in document) {
return;
}
var options = {
draggable: draggable,
panControl: draggable,
scrollwheel: draggable
};
this.map.setOptions(options);
},
The zoom_changed or idle events where not really an option for a few reasons:
The idle event only gets called when the map is idle and with the amount of animation I was doing this never got called.
The animation at each step recentered the map on the followed markers so the zoom_changed event would be recalling the recenter before an animation frame.
due to the amount of animation the idea of not panning to the center is to reduce animation frames and improve performance.

While it's possible to argue that double-clicking the map or wheel-zooming the map need not take account of the mouse location (because you are acting on the map object rather than a location on the map), pinch-to-zoom is always location-dependent because you physically stretch or squash the map around a location. To alter that behaviour would be distinctly unintuitive.
In this case you should listen for zoom_changed or idle and then pan the map to recentre it, so the user can see what's going on.
You could even use those events to handle the default double-click or mousewheel behaviour so that it's obvious you are changing the level of control the user normally has.

setCenter() and then move marker vertically higher on the map canvas

I have a simple question, and hopefully there is a simple answer . . . I just can't find it after a couple of hours of searching.
I've got a standard google map with a bunch of markers. I have a click event on each marker so that when clicked, the map pans the marker to the center and zooms in on it. No issues there.
Now I want to change the event handler so that when a marker is clicked the map recenters so that the marker is centered horizontally, but it is vertically towards the top of the map canvas. Is there a relatively straight forward way of doing this that works across different zoom levels?
Thanks,
Chuck

There may be many ways, e.g.
google.maps.event.addListener(marker, 'click', function() {
this.getMap().setCenter(this.getPosition());
this.getMap().panBy(0,(this.getMap().getDiv().offsetHeight/2)+this.anchorPoint.y);
});
It puts the marker in the center and then pans the map vertically by (mapHeight/2-markerHeight)

You could also muck around with getProjection() and the fromContainerPixelToLatLon and fromLatLonToContainerPixel to set a specific position within the viewable point of the math.
Both of those will give you pixel measurements from the <div> element you're using as the map canvas.
c.f. fromDivPixel and ToDivPixel which will give you the pixel position of the item on the infinite div of the map. Say you've got your map focussed on Africa, right? And you've got a pin in NYC. Using the *DivPixel* variants will keep your pin in NYC, and then you can pan towards it. Using *ContainerPixel* will move your pin into view on the map regardless of whatever Lat/Lon you've set it to.

Place the Google Maps pegman underneath markers

I have a Google V3 map which uses steetView and some map markers.
The little yellow streetView pegman sits on the map on top of the markers.
Is there a way to change the z-indexes so that my markers will be above the pegman
(so that they can be easlly clicked on without having to zoom in)?
In case anything is not clear, here is a fiddle....
http://jsfiddle.net/spiderplant0/BRkCA/
After a bit of experimenting I came up with this...
$("#map_canvas img[src*=cb_scout]").parent("div").css({'zIndex': -200});
$($("#map_canvas img[src*=cb_scout]")[1]).parent("div").parent("div").css({'zIndex': -200});
This forces the pegman to sit beneath the markers but now the pegman is no longer dragable and each time the map is moved etc, the pegman jumps above the markers again.

To keep the pegman under your markers you can watch for the pov_changed event and reset the z-index after a short delay
$google.maps.event.addListener(panorama, 'pov_changed', function() {
var func=function(){
$("#map_canvas img[src*=cb_scout]").parent("div").css({'zIndex': -200});
}
setTimeout(func,1000);
}
});
You will also need to change the depth of the pegman after the maps moves, which can be accomplished with the following snippet
google.maps.event.addListener(map, 'idle', function() {
google.maps.event.trigger(panorama, 'pov_changed');
})
If you want to be able to drag the pegman, you must first place it above the markers by having a toggle button swap the pegman's depth and add an exception to the pov_changed event handler preventing the pagman from dropping depths when the toggle button is active.

Okay, this may be a bit hacky... (and I hope I understood what you were doing)
1) Disable street view control
2) Make another control with a lower zIndex than the marker you have.
3) Update street view control with the position of the fake street view marker.
http://jsfiddle.net/z7Lp8/

You can set the zIndex of the marker above google.maps.Marker.MAX_ZINDEX in order for the pegman to remain under the marker. MAX_ZINDEX is the maximum default z-index that the API will assign to a marker. Marker z-indexes only work when optimizations are turned off on all markers on the map.
Forked fiddle from question to illustrate: http://jsfiddle.net/brendaz/t4v8nhoq/
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(54.975, -2.020),
map: map,
zIndex: google.maps.Marker.MAX_ZINDEX + 1,
optimized: false
});

How would I position a marker at the bottom of the map in Google Maps v2?

I have a webpage that finds a store by postcode or name.
I have just released an update to it so that contact details display in an info window coming from the marker. Due to the small size of the info window, after centering to the marker, the map pans down until it can fit the marker and info window in leaving the marker near the bottom.
Wondering if there is an easy way to set this offset immediately so that the marker appears at the bottom of the map window and it doesn't have to pan?
Thanks.

You could center the map appropriately before you add the marker:
var someZoom = 13;
var center = new GLatLng(37.4419, -122.1419);
map.setCenter(center, someZoom);
The zoom is optional too. You can just leave the zoom on whatever it is:
map.setCenter(center);
If you would like to center on a particular pixel, instead of a lat/lng, then you can use this function to convert:
fromContainerPixelToLatLng(pixel:GPoint)
I feel like you should spend half an hour and review the docs: http://code.google.com/apis/maps/documentation/reference.html. I read the documentation extensively while working on my website: www.trailbehind.com

Perhaps the auto-panning is caused by an internal addoverlay event handler. Have you tried handling the addoverlay event and returning false from it?
GEvent.addListener(map, "addoverlay", function() {
return false;
});
where 'map' is the name of your GMap2 object.