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.
Related
I want embed fully Google map into my website. It mean includes search bar in left.
google map
The link directly on browser address bar will be work https://www.google.com/maps/search/Automation+Supplies+Limited/#53.4455454,-7.5863638,8z?hl=en-IE But when I place it in iframe it not work.
<iframe src="https://www.google.com/maps/search/Automation+Supplies+Limited/#53.4455454,-7.5863638,8z?hl=en-IE"></iframe>
Thanks
You can't.
This isn't offered by Google. All you can do is link to Google Maps.
In the google map link that you have mentioned above, open it and click on Menu bar. Choose Share or embed map and you may find your html code for website.
Here is an example of your map: <iframe src="https://www.google.com/maps/embed?pb=!1m12!1m8!1m3!1d1212742.5438103776!2d-8.069837255079928!3d53.59579689997422!3m2!1i1024!2i768!4f13.1!2m1!1sAutomation%20Supplies%20Limited!5e0!3m2!1sen!2s!4v1573529617789!5m2!1sen!2s" width="400" height="300" frameborder="0" style="border:0;" allowfullscreen=""></iframe>.
If you want to show the map in your website and put a search bar in the left side, as an alternative, you can use Google Maps Platform's Maps JavaScript API to do this.
Here is a sample code I made that looks similar to the implementation that you want which is in the image in your link.
In this example, I used the Maps JavaScript API to show the map
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 53.467079, lng: -6.719628},
zoom: 8,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_RIGHT
},
});
and use the Google Maps Places API library to put the Autocomplete
var autocomplete = new google.maps.places.Autocomplete(input);
as a search mechanism on the map.
Hope this helps.
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
How to enable message ctrl + Scroll zoom message in google map?
Map option define below.
var mapOptions = {
mapTypeId: 'roadmap', center: new google.maps.LatLng(countryLat, countryLon), zoom: countryZoom, gestureHandling: 'cooperative'
};
I need output like this when mouse scroll :
Use the following option to control this behavior:
gestureHandling: 'cooperative'
As per the instructions mentioned here:
Controlling Zoom and Pan (developers.google.com)
If you want to enable the ctrl + scroll to zoom on map have to pass the
gestureHandling: 'greedy' this option in the javascript of google map object. you just passed the
Ref.: Click here to look at reference
and as per i seen there are any issue worth your css because here is the link which is exactly as you want please refer this link
This function seems to only work in the experimental version of the API. So just change the version in the URL to 3.exp or to 3.30 (which is the current experminatal version) so your URL in the script would look something like this:
"https://maps.googleapis.com/maps/api/js?v=3.30&sensor=false&key=" + your_api_key
You can also remove the version tag so it will always use the latest version of the API.
Hope this fix your issue.
I tried integrating google maps tile layer into leaflet using leaflet-google plugin. Everything loads fine, but when i try to zoom in/out, first my custom feature layer zooms and then the google map tile layer zooms. Why don't they zoom together?
var map = new L.Map('map', {center: new L.LatLng(18.93718 , 72.79366), zoom: 10});
var googleLayer = new L.Google('ROADMAP');
map.addLayer(googleLayer);
and I am adding my feature layer by:
L.geoJson(inputgeoJson, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
Thanks!
The Google layer in Leaflet is a hack (a possibly illegal one), and involves using the Google Maps API within Leaflet. Since Leaflet and the Google Maps API have different zoom transition animations, you see this effect. You could use Google tiles directly in Leaflet, but that's definitely be illegal, not just maybe.
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.