Google Maps API V3 doesn't support the V2 GOverviewMapControl option, yet. I've come across a piece of code at http://dl.google.com/io/2009/pres/Th_1045_Maps_API_Mobile.pdf , silde 19, that gives the code to display the smaller map, but not the draggable, semi-transparent blue box that you generally see here. It's possible, but unofrtunately the code is 'ellided'. Anyone have any ideas how to generate this? Thanks
This is how it works out of the box in Maps v3:
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
overviewMapControl: true,
overviewMapControlOptions: {opened: true}
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
Please note the last two properties of the mapOptions object. They do the trick.
Within the overlayMap, add a draggable marker to display the frame of the RectangleOverlay, and a non-draggable marker to display the semi-transparent box itself. Then, add bindings to some of the maps' events to update size and position of the markers, i.e. the maps' bounds_changed, drag, and/or center_changed events. Finally, update the location of the maps when the frame is dragged by binding a function to its dragend event.
I am using v3 right now and the overviewMapControl seems to work. Can't find any documentation on it yet.
overviewMapControl: true
Then you see a small arrow in the right hand side of your map. Click will open it. Can't figure out how to trigger this click with javascript (jquery) doesn't seem to work.
Check out http://code.google.com/p/gmaps-api-v3-overviewmapcontrol It's an open-source project to approximate the functionality of v2's GOverviewMapControl.
Related
I'm trying to display a map just like Google does here https://www.google.fr/maps
With google maps API, I'm struggling at finding the following :
makeing ctrl + drag change the tilt
programmatically setting the tilt to 0, but keep 3D imagery (for high resolution purpose basically)
programmatically setting the tilt to a custom value (say 30 degrees)
makeing ctrl + drag rotate the map
programmatically rotate the map to a custom value
Is that even possible ?
First off, the map in your link by default does not support 45 degree tilt nor rotate options, as that is a roadmap. In order to enable tilt and rotate options in your map, you will need to set your mapTypeId to "Satellite" or "Hybrid" first and set the rotateControl in your Map Object to true; this is an example adapted from Google Maps API:
function initialiseMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 41.390205, lng: 2.154007},
zoom: 12,
mapTypeId: 'satellite',
rotateControl: true
});
map.setTilt(45);
}
As far as I can tell from their documentation:
Google Maps JavaScript API support special 45 degree imagery for
certain location
You can set the heading option and tilt option dynamically by calling the respective method on the map object. But I do not think you can override the preset behavior programmatically unless this is something that I have missed from the documentation . This is another link to the 45 degree service for you.
if you are in 3d mode and using a desktop, you can tilt or rotate by holding SHIFT+CTRL at the same time. doesnt work in roadmap mode though
Since a few days our users can only zoom when they hit the "ctrl" key while scrolling which doesn't make sense in our applications.
Is there a way to allow zooming only with scrolling (as it was before) in Google Maps?
I've seen that this "ctrl + scroll" force now also is in the google maps api reference (screenshot).
Screenshot from the Google Maps Javascript API reference which shows the new message
Add gestureHandling: 'greedy' to your map options during instantiation.
E.g:
var map = new google.maps.Map(document.getElementById('map'), {
center: {0, 0},
zoom: 8,
gestureHandling: 'greedy'
});
}
gestureHandling: "cooperative",
This the updated version from google maps.
Check out a demo: http://jsfiddle.net/VudEC/3/
It's about using Google's Satellite Layer (in example: zoom=20), birds eye mode enabled and a marker.
var map = new L.Map('map_canvas', {
center: new L.LatLng(39.868841, -4.021938),
zoom: 20
});
var ggl = new L.Google('SATELLITE');
map.addLayer(ggl);
var marker = new L.Marker(new L.LatLng(39.868841, -4.021938));
map.addLayer(marker);
If you drag vertically the map (or use the function map.panBy()) you will see the marker moving up or down (vertically). And it shouldn't.
If the drag or movement is horizontal, no problem.
If I disabled the birds eye (or set a lower zoom), the issue disappear.
At least it happens with polygons too.
Btw, with Google Maps API it doesn't happen: http://jsfiddle.net/ew332/1/
I don't understand why I get this issue.
Thank you very much
It seems it's a bug of the plugin, you can read more here and for now, there is no a fix
I have a Google map that I am using to allow people to suggest locations. Currently I position a draggable marker in the centre of the map using a LatLng created with
myPosition = frmMap.getCenter();
What I would like to do though is place it initially somewhere to the edge of the map, perhaps directly under the zoom control (not unlike the way you see the yellow street view man above the zoom control).
I've searched for a solution but am not coming up with anything. My only idea was to do some maths based on the Center and NortEast but I'd rather have an absolute position based on pixels if that's possible?
As I mentioned in the comments, computing a latlng value for a marker to position under the zoom controls is not only cumbersome, but might not be feasible if the user starts panning/zooming around in the map (as the marker will move wherever the latlng takes it).
My suggestion would be to use the Drawing Library provided by the Maps API. This basically gives you a drawing control, to add markers to the map (other overlays are possible too: cirlce, polygon, polyline, rectangle). And like any control google maps provides, you can strictly position them anywhere you'd like - by setting it in the options. The snippet below describes how you initialize the drawing library:
var drawingManager = new google.maps.drawing.DrawingManager({
drawingControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM,
drawingModes: [
google.maps.drawing.OverlayType.MARKER
]
}
});
drawingManager.setMap(map);
This gives you your drawing control, with the mode for Marker enabled, and binds it to your map object.
You can then listen to when a marker's been added by adding a listener on the drawingManager variable for the markercomplete event. Then in the call back you can get the position of the added marker, the snippet below demonstrates this:
google.maps.event.addListener(drawingManager, 'markercomplete', function (marker) {
var position = marker.getPosition();
});
I put together a small jsfiddle with this example if you'd like to see it in action. Also, click here for full reference of the Drawing Library for the maps api.
EDIT: (start mode in marker add on map load, hide drawing controls after marker added, maker marker draggable)
To start the drawing mode to add marker on map load, simply set the drawingMode option in your drawingManager variable declaration:
`drawingMode : google.maps.drawing.OverlayType.MARKER`
You can hide the drawing controls in the markercomplete event listener:
// To hide:
drawingManager.setOptions({
drawingControl: false //changes UI back to regular map interactions
});
drawingManager.setDrawingMode(null); //hides controls
Alternatively, if you're never going to need the drawing controls again later in your client interactions you can remove it from the map complete via:
drawingManager.setMap(null);
Then to make the marker draggable, just set the option in the listener as well (because the marker in the callback function is a google maps marker object anyway - which references the marker that's added to your map).
marker.setOptions({
draggable: true
});
You can then add a listener on the marker object for the dragend event to track changes to the location.
Here's in updated fiddle: http://jsfiddle.net/svigna/J5zMg/3/
I'm trying to display a map by creating a view and inserting it into DOM, and it works fine the first time, but fails on subsequent invocations of the view, displaying a gray empty area.
Here is the JSFiddle of the problem: http://jsfiddle.net/dyuvH/14/
Everything works fine when you click on the 'Click to load map' link, but will fail if you do it again.
I'm loading a map into a view using the following:
onRender: function() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapView = new App.MapView();
var map = new google.maps.Map(mapView.el, mapOptions);
mapView.render();
this.ui.mapContainer.html(mapView.el);
}
Again, everything works perfectly the first time and fails the second. I'm thinking the view is holding on to some aspect of the map or vice-versa. I do create new instances of the map and the view using the "new" keyboard in both cases, so I'm not sure what's messed up.
Any help is appreciated.
The call to mapView.render() is not necessary, and can be removed or commented out. That will at least get the map to render upon subsequent clicks.
You will also need to compensate for Issue 1448 in the GMaps API v3. Something along this code should work to solve the off-centered map on subsequent renderings:
google.maps.event.addListener(map, "idle", function(){
map.setCenter(mapOptions.center);
google.maps.event.trigger(map, 'resize');
});
For reference, the updated jsFiddle with the above suggestions.
I had the same problem and after reading #19 of Issue1448 I decided to use onShow instead of onRender and then it worked like a charm. This way I didn't need to trigger any map resize event or trying to work out the center of the map.