Google Maps doesn't support 19 or 20+ zoom in the area where I want to use it. I'm trying it to do with css.
I'm creating the map, adding wheel event to recognize which zoom-level user in. If it's equal to 20, I'm adding css zoom property to the map. However, this time infowindow creating in wrong positions on my click.
map = new google.maps.Map(document.getElementById("map"), {
center: { lng: 1.393307, lat: 52.824281 },
fullscreenControl: false,
type: "HYBRID",
minZoom: 8,
maxZoom: 0,
zoom: 5,
gestureHandling: 'greedy',
mapTypeId: 'hybrid',
streetViewControl: false,
controlSize: 27,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.HYBRID, "Map"],
},
});
Wheel Event and the class' css
.zoom {
zoom: 2;
}
window.addEventListener('wheel', function (event) {
if (event.deltaY < 0) {
if (map.getZoom() == 20) {
$('#map > div').eq(0).addClass("zoom");
}
}
else if (event.deltaY > 0) {
if (map.getZoom() <= 20) {
$('#map > div').eq(0).removeClass("zoom");
}
}
});
Google Maps Click Event
google.maps.event.addListener(map, "click", (function (mapsMouseEvent) {
var position = mapsMouseEvent.latLng;
infowindow.setPosition(position);
infowindow.setContent("test");
infowindow.open(map);
}));
Jsfiddle live test is here; https://jsfiddle.net/mylayf/ubeaL9s2/13
By doing this:
.zoom {
zoom: 2;
}
You are changing the size of container. But zoom in map is done by loading a new layer data. By multiplying the size of container, the pictures will be bigger (along with buttons and etc.) but it's not loading a new layer. So the front window and container will have a shift. For example if you use a zoom of 2, the front window will be 1/4 of zoomed background image and if you click in middle, it will be exactly at the bottom right of background image.
So just change the maxZoom: 0 to something like maxZoom: 30. It will load the maximum resolution images (equal to maxZoom: 18). If it's not enough for your, there are no more resolution by this map and you need to switch to another map provider with more layers for zoom.
Related
Ok so here is the file. It was working some days ago. I haven't really changed anything so i do not know why latLng does not work now.
here is my code
function map_initialize() {
var googleMapOptions = {
center: mapCenter, // map center
zoom: 17, //zoom level, 0 = earth view to higher value
maxZoom: 18,
minZoom: 10,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL //zoom control size
},
scaleControl: true, // enable scale control
mapTypeId: google.maps.MapTypeId.ROADMAP // google map type
};
map = new google.maps.Map(document.getElementById("google_map"), googleMapOptions);
console.log(map);
//Right Click to Drop a New Marker
google.maps.event.addListener(map, 'rightclick', function(event) {
//Drop a new Marker with location Form
create_marker(event.latLng, 'New Marker', true, true, true);
});
when i console.log(event.latLng); it returns an empty object.
console.log(event.latLng.lat());
tried with mousedown listener , it works
I have a map, and I draw a rectangle on it. Here is what I want: whenever my mouse enter that rectangle, open an infowindow, when my mouse leave, close the infowindow.
I have successfully created a map and drawn a rectangle. Here is my code:
var map;
function initialize() {
// Init map
var mapOptions = {
center: { lat: ***, lng: *** },
zoom: 13,
draggable: false,
scrollwheel: false,
zoomControl: false,
streetViewControl: false,
mapTypeControl: false,
disableDoubleClickZoom: true
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
google.maps.event.addListenerOnce(map, 'bounds_changed', function () {
drawGrid();
});
} // end initialize
function drawGrid() {
var rectangle = new google.maps.Rectangle({
strokeColor: '#000',
strokeWeight: 2,
fillOpacity: 0,
map: map,
bounds: new google.maps.LatLngBounds(sw1, ne1) //sw1 and ne1 is my variable
});
var infowindow = new google.maps.InfoWindow({
content: "Hello",
position: rectangle.getBounds().getCenter()
});
google.maps.event.addListener(rectangle, 'mouseover', function () {
infowindow.open(map);
});
google.maps.event.addListener(rectangle, 'mouseout', function () {
infowindow.close();
});
}
google.maps.event.addDomListener(window, 'load', initialize);
You can see the result below. The rectangle is the black one.
Now, the problems are:
Mouseover event is fired only when I let my mouse follow the green arrows.
Mouseout event is fired only when my mouse follow the green arrows (yes, from out to in, not in to out as expected), and it's fired twice.
Why do I encounter those problems? What did I do wrong? How to solve this problem? Thank you so much for your help.
There was a change to the way Firefox 39.0 handles mouse events. See issue 8278 in the issue tracker
Project Member #4 enoch...#google.com
Thanks for reporting this issue. Indeed, it appears that Firefox 39 has made changes to its mouse event, which is causing the API to behave incorrectly.
Status: Accepted
Owner: enoch...#google.com
Labels: Internal-20820906
Note that users have reported that v=3 (the release version) is working correctly and this issue only appears in v=3.exp (the "experimental" version).
Here is the project
var map = new google.maps.Map(document.getElementById('map-canvas'), {
disableDoubleClickZoom: true,
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
zoom: 15,
center: new google.maps.LatLng(34.239415, -118.529339),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
https://jsfiddle.net/yxg7spbp/2/
the problem is i want to zoom in closer to see the buildings outlines of the campus however if i change the zoom value past 15 it does not have any effect, how can i zoom in closer.
The Terrain map type is limited to a zoom of 15. If you want to zoom in more, use the ROADMAP map type (up to about 19) or SATELLITE map type (use the MaxZoom Service to determine the maximum zoom available)
related question: Google maps: change from map view to satellite view
fiddle that changes the mapType when the current type reaches its maxZoom
google.maps.event.addListener(map, 'zoom_changed', function () {
var maptype = map.getMapTypeId();
if (map.getZoom() >= map.mapTypes[maptype].maxZoom) {
if (map.getMapTypeId() == google.maps.MapTypeId.TERRAIN) {
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
} else if (map.getMapTypeId() != google.maps.MapTypeId.HYBRID) {
map.setMapTypeId(google.maps.MapTypeId.HYBRID)
map.setTilt(0); // disable 45 degree imagery
}
}
});;
The Google Maps API provides map tiles at various zoom levels for map type imagery. Most roadmap imagery is available from zoom levels 0 to 18, for example. Satellite imagery varies more widely as this imagery is not generated, but directly photographed.
In Google Maps, I would like to be able to keep the center of the map on a marker on my location when I'm zooming in or out. It's something that Ingress does, it doesn't matter where you double tap (or double click) or where you pinch, the map remains centered on your marker. So it's possible...
The best I came up with for now is :
google.maps.event.addListener(mymap, 'zoom_changed', function() {
mymap.setCenter({lat: myLoc.lat, lng: myLoc.lon});
})
But it's far from perfect, it just re-center the map after the user already zoomed...
Thanks a lot !
[EDIT] absolutely nothing helps in the API ref... Or elsewhere I'm blind and missed it !
Purely using Javascript
First you disable scroll zoom function by default of google map by scrollwheel=false,
Next create custom scroll zoom function by capture mouse event and set zoom level for google map
Check my sample code: Fiddle URL: https://jsfiddle.net/vh3gqop0/17/
var map, i = 12;
function initialize() {
var myLatlng = new google.maps.LatLng(46.769603, 23.589957);
var mapOptions = {
center: myLatlng,
zoom: i,
scrollwheel: false,
disableDoubleClickZoom: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Any Title'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
$( document ).ready(function() {
$('#map_canvas').on("wheel", function(evt){
// console.log(evt.originalEvent.deltaY);
if(evt.originalEvent.deltaY > 0){
map.setZoom(++i);
}else {
map.setZoom(--i);
}
});
});
#map_canvas{
height:400px;
width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>
I have no idea why you tagged this question as both Javascript and Android. On Android you need to wrap your MapView inside another view and detect Double Tap motion inside onInterceptTouchEvent which you can override if your class can override FrameLayout for example. Then return true to prevent the map from handling this event and you handle it instead.
For full code please see my answer here: https://stackoverflow.com/a/30118649/764897
Unfortunately Google Maps Api does not provide this behaviour.
The following example doesn't require jQuery and supports double-click and mouse scrolling, but you can add more events if you want.
View in Codepen
Disable:
Double-clickin
Scrolling
Panning
Add dblclick and zoom_changed events on the map and a mousewheel event on the canvas.
I have commented the code, hopefully this works for your case. Keep in mind that you need to normalize mousewheel speed for all browsers and devices. Hammer.js is a good library for that.
var map, zoom;
function initialize() {
// The white house!
var myLatLng = new google.maps.LatLng(38.8977, -77.0365);
// Default zoom level
zoom = 17;
// Keep a reference for evens
var $map = document.getElementById("map");
// Disable scrolling + double-click + dragging
map = new google.maps.Map($map, {
zoom: zoom,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
disableDoubleClickZoom: true,
//draggable: false
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map
});
// EVENTS
// Double Click: event zoom by 1
map.addListener('dblclick', function(e) {
zoomHandler(e.latLng, 1);
});
// Zoom changed: update current zoom level
map.addListener('zoom_changed', function(e) {
// Using a timeout because `getZoom()` does not return a promise.
setTimeout(function() {
zoom = map.getZoom();
}, 50);
});
// Dom event: On mousewheel
$map.addEventListener('mousewheel', wheelEvent, true);
}
// Mouse Scrolling event
function wheelEvent(event) {
if (event.deltaY > 1)
zoomHandler(event, -1);
else
zoomHandler(event, 1);
}
// Zoom in/out
function zoomHandler(event, zoomin) {
zoom += zoomin;
map.setZoom(zoom);
}
google.maps.event.addDomListener(window, 'load', initialize);
#map {
width: 100%;
height: 240px;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC9d3jaUX6Qdr0Uzvq6fQXVmZ1PBuHEVAQ"></script>
You should try the center_changed event with panTo function.
google.maps.event.addListener(mymap, 'center_changed', function() {
mymap.panTo({lat: myLoc.lat, lng: myLoc.lon});
})
You can see an example about it here and documentation about panTo function here.
Becareful, it should mess up all the draggable thing.
I recently had the need to place a map in a bootstrap modal, which works fine except for the ability to pan and zoon with mouse interaction. Panning by clicking and dragging the mouse, and zooming by using the mouse wheel does not seem to work.
I have put up an example of the problem. (I have only tested it in Chromium and Firefox, on Kubuntu)
http://jsfiddle.net/nG9nu/
$("#myModal").on(
'shown.bs.modal',
function () {
var pos = new google.maps.LatLng(63.43, 10.39);
var mapProp = {
center: pos,
zoom: 14,
draggable: false,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapCanvas"),
mapProp);
google.maps.event.trigger(map, "resize");
});
Any ideas what stops the mouse events to reach google maps? Or how to fix this particular problem?
I am very thankfull for all the help I can get :)
var mapProp = {
center: pos,
zoom: 14,
draggable: false,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
I can see
scrollWheel => false
draggable => false
Of course it won't work : set them to 'true'
See this fiddle :http://jsfiddle.net/nG9nu/1/