I am building a site and I have a page which takes an address and uses it to generate a 2D roadmap style google-map and then next to it, the street view for that address.
My problem is that these two maps span almost the entire width of the site and the user is likely to have their mouse go over it when scrolling down the page and get confused by their inability to scroll down further (while zooming into a map).
Disabling this for the 2D map was pretty strait forward
//works to disable scroll wheel in 2D map
var mapOptions = {
zoom: 12,
center: latlng,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions );
//not working to disable scroll wheel in panorama
var panoramaOptions = {
position: results[0].geometry.location,
scrollwheel: false
};
panorama = new google.maps.StreetViewPanorama(document.getElementById("map_canvas2"), panoramaOptions );
but the street view does not seem to allow me to disable the scroll wheel using these options and I am not able to find this issue addressed in the google-docs. Anyone know if this CAN be done or suggestions on how to approach it?
There was a feature request with Gmaps API v3 issues to add scrollwheel: false to streetview http://code.google.com/p/gmaps-api-issues/issues/detail?id=2557. This is now fixed, just use scrollwheel: false within your StreetViewPanorama options.
I am having the same problem, when the user scrolls down using the mouse wheel, the cursor gets caught in the Google street view and starts zooming instead of scrolling down the page.
In Google Maps they provide the scrollwheel property which can disable this, but unfortunately this does not seem to be implemented in Street view.
The only workaround I found as of now is as #bennedich said in the previous answer, I placed an empty/transparent div exactly over the street view div.
I am enabling the controls when the user clicks anywhere over the street view area by using jQuery to hide this empty div (using css visibility property) on mousedown event and when the user moves his mouse out I am placing this empty div back over. Which basically means everytime the user wants to interact with the street view control he has to click it once. It's not the best solution but it's better than getting your mouse caught up when scrolling
Don't know about the javascript way, but with html and css you can place an invisible div with higher z-index over the map/streetview.
There is a patch coming up from Google to address this issue.
The fix that works for now is to set the version number explicitly to 3.25 for scrollwheel: false to work.
Example:
https://maps.googleapis.com/maps/api/js?key=XXX&v=3.25
My solution was the following. As soon as the mouse is scrolled on the street view using the "wheel" event, then do the scroll artificially and bring an overlay to the front.
$('.streetViewOverlay').click(function(e) {
$(this).addClass('streetViewOverlayClicked');
});
document.querySelector('#street-view').addEventListener("wheel", function(evt) {
$(document).scrollTop($(document).scrollTop() + evt.deltaY);
$('.streetViewOverlay').removeClass('streetViewOverlayClicked');
});
$('#street-view').mouseleave(function() {
$('.streetViewOverlay').removeClass('streetViewOverlayClicked');
});
var panorama;
function initialize() {
panorama = new google.maps.StreetViewPanorama(
document.getElementById('street-view'),
{
position: {lat: 37.869260, lng: -122.254811},
pov: {heading: 165, pitch: 0},
zoom: 1,
gestureHandling: 'cooperative',
scrollwheel: false
});
}
.streetViewOverlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
opacity: 0;
}
.streetViewOverlayClicked {
z-index: 1;
}
Related
Is there a way to show zoom control slider in google maps using their API (like in this image I have taken today from maps.google.com)?
zoom slider control
I tried setting style: google.maps.ZoomControlStyle.LARGE in the init, but it doesnt work.
You can look at this simple example - there are only zoom buttons, but no slider
https://codepen.io/anon/pen/pNORgv
var mapOptions = {
zoom: 14,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.RIGHT_BOTTOM
}
};
The old zoom control has been removed. If you want to include one you'll need to custom make it. I only skimmed over this blog post about how to make one but it seems pretty comprehensive.
Essentially you'll need to create a custom HTML element and tie functions to detect changes in the slider and emit those to the Google Map
I have heard about the talkings about new version of maps will have vertical zoom slider that they will re-implement the slider for next version. we will wait and see what will they do for that. If you had any information about this please inform us too.
I have a big problem for mobile users:
i have a google maps that has width: 100% and so when the user scroll the window if touch the screen "inside" the map, the scroll it will be only for map and not for all window... (yesterday my father for 3 minutes scrolled inside the map XD)
To scroll the window is possible touch the border of screen, but is very very scrict and not all users understand this.
I dont'want a map with a width less of 100% so i must found other solution...
This is it will be make the map draggable only when it is touch with two fingers, almost when pinch to zoom...
but which google maps event i can to use ?
maybe:
google.maps.event.addListener(map, 'dblclick', function(event){
this.setOptions({draggable:true});
});
but maybe at first click on map i should to alert (with a div in map) that is possible to move the map with two fingers ??
What do you think? and code is correct?
Thanks a lot and sorry for my english and for strange question :D
If you are using API v3.27 or higher. While initializing map just add property gestureHandling: 'Cooperative'
like this
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng,
gestureHandling: 'cooperative'
});
More Info Here
Or if you want to do this after creating the map, do
map.setOptions({gestureHandling: 'cooperative'});
More Info Here
Although this is quite strange requirement, you can try the following;
document.addEventListener('touchmove', function(e) {
e.preventDefault();
var touch = e.touches[0];
if(e.touches.length == 2){
//This means there are two finger move gesture on screen
googleMapsReference.setOptions({draggable:true});
}
}, false);
I have not tested this on a mobile device but it should give you a starting point.
This is my gmaps avscript code, i print maps as many as my data database, these gmaps are inside at collapsed div:
var maps = {!! $maps !!};
var googlemaps = [];
$.each(maps, function( key, item ) {
googlemaps[key] = new GMaps({
div: '#gmaps-' + key,
lat: item.latitude,
lng: item.longitude,
width: '100%',
height: '100%',
});
googlemaps[key].addMarker({
lat: item.latitude,
lng: item.longitude,
width: '100px',
draggable: false,
title: 'Marker'
});
googlemaps[key].setCenter( item.latitude, item.longitude );
googlemaps[ key ].setZoom( 15 );
});
The div by default is collapsed, after i open the div and show the gmaps, it's just showing blank grey maps, i try drag my map to search my marker, it only view a little part of the gmaps panel at the top left.
after i resize my browser the marker finaly can drag to center of panel but still grey.
I zoomed out/in and the image loaded, the image only loaded when i zoom in and out.
I really confused searching so many answer but not solving my problem.
Please help me..
When the map div, or it's parent, or it's parent parent (any predecessor) has display:none style, and you create the map, the map view won't initialize properly. You have to trigger resize event on map for it to reinitialize the map view.
In GMaps the google.maps.Map object is accessible using .map attribute, so your code will have to look something like this:
google.maps.event.trigger(googlemaps[key].map, "resize");
Remember to trigger it AFTER the div is visible. To be sure you can put the resize trigger into a timeout, when they click the div to display.
Side note: I am not sure if you are aware, but every map you create is a separate API call so to have multiple maps results in lot of separate API calls and if you don't have maps for business license you can hit limits pretty fast.
I want to center my map at these coords here (google maps website)
I copy pasted the coordinates in my website code:
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(56.4611388, -2.9719832),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Because my map slides down from the top of the page when user hovers over some text I call the function to refresh the map at the end of the animation:
$('#map').mouseover(function() {
if ($(this).offset().top == mapHiddenHeight) {
$(this).animate({
top: 0
}, 500, function() {
google.maps.event.trigger(map,'resize'); // refresh map
});
}
})
But the map is slightly offset from the center on my website. (Map drops down when you hover over "Find us on the map", top right)
NB: Actually I just noticed, if I clear the browser cache and load the website it appears at the right location. It's when you reload the page with cache full that it constantly displays with the same location offset. No matter how many times you refresh the page after that. So it only displays at correct location with a cleared cached, which of course is annoying.
I don't even know where to start debugging this. Tested on Chrome and Firefox,
Basically there is nothing to "debug", it may sound funny but when there is something that may be called "bug" it's the position you get when it works as expected.
When you trigger the resize-event the API re-calculates the size of the map to be able to load missing tiles. The API will not re-center the map based on the current center/size(the center of a hidden map usually is the location in the northwest-corner).
You must re-center the map on your own.
there are 2 options:
always center the map at the same position:
store the desired center as a map-option:
var map_options = {
center: new google.maps.LatLng(56.4611388, -2.9719832),
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP,
//default-center, should have same value as center
originalCenter:new google.maps.LatLng(56.4611388, -2.9719832)
}
in the $.animate-callback first trigger the resize-event and then set the center of the map:
google.maps.event.trigger(map,'resize');
map.setCenter(map.get('originalCenter'));
center the map at the center before resizing(when a user drags the map this position will be restored):
inside the $.animate-callback:
var center=map.get('center');
google.maps.event.trigger(map,'resize');
map.setCenter(center);
Here is the relevant code:
var map;
var chicago = new google.maps.LatLng(41.850033,-87.6500523);
var mapDiv = document.getElementById('map-canvas');
var mapOptions = {
zoom: 12,
mapTypeId: google.maps.MapTypeId.SATELLITE,
panControl: true,
rotateControl: true,
rotateControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
},
center: chicago
}
map = new google.maps.Map(mapDiv, mapOptions);
I tried mapTypeId of HYBRID too. I tried disabling/enabling rotateControl, panControl, rotateControlOptions, etc. The Map shows with pancontrol but without rotate control. If relevant, here is the div markup:
<div id="map-canvas" style="position:absolute;top:50px;left:100px;width:800px;height:500px;
border:red 2px solid;-webkit-border-radius: 10px;-moz-border-radius:10px;
border-radius: 10px;"></div>
Included the styles inline here just for brevity in presenting the question.
If zoom doesn't help then enabling of rotateControl won't either if there is no 45° imagery for specific place.
rotateControl enables/disables the appearance of a Rotate control for controlling the orientation of 45° imagery. By default, the control's appearance is determined by the presence or absence of 45° imagery for the given map type at the current zoom and location. You may alter the control's behavior by setting the map's rotateControlOptions to specify the RotateControlOptions to use (though you cannot make the control appear if no 45° imagery is currently available).
Try with zoom:20.
You need to zoom to see your position closely. Then you'll see the Rotation Control